scrollview

时间:2016-08-31 04:42:58

标签: android android-linearlayout android-scrollview

我想要做的就是这样的事情。

enter image description here

图像一

无论是哪种设备。它应该在屏幕上显示四行,以后用户可以滚动查看其他行

我正在使用veritical linearlayout weight来实现这一目标,但它并没有像我想要实现的那样发生。当我添加更多行时,它给我这样的屏幕

enter image description here

图片二

下面是我的布局xml,它将屏幕显示为图像一,但添加更多行给图像两个视图

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/lightGray"
android:orientation="vertical">

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/toolbar"
        android:fillViewport="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:padding="1dp"
                android:weightSum="4"

                >


                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_weight="1"
                    android:orientation="horizontal"
                    android:weightSum="3">


                    <ImageView
                        android:id="@+id/abulation"
                        style="@style/icon"
                        android:background="@drawable/wudu_96" />

                    <ImageButton
                        android:id="@+id/masjid"
                        style="@style/icon"
                        android:background="@drawable/masjid_96" />


                    <ImageView
                        android:id="@+id/restroom"
                        style="@style/icon"
                        android:background="@drawable/restroom_96" />

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_weight="1"
                    android:orientation="horizontal"
                    android:weightSum="3">

                    <ImageView
                        android:id="@+id/dressing"
                        style="@style/icon"
                        android:background="@drawable/dressing_96" />

                    <ImageButton
                        style="@style/icon"
                        android:background="@drawable/icon_selector"
                        android:scaleType="fitXY" />


                    <ImageButton
                        android:id="@+id/Favourite"
                        style="@style/icon"
                        android:background="@drawable/favourite_96"
                        android:onClick="random"
                        android:scaleType="fitXY" />


                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_weight="1"
                    android:orientation="horizontal"
                    android:weightSum="3">

                    <ImageView
                        style="@style/icon"
                        android:background="@drawable/fear_96" />

                    <ImageView
                        style="@style/icon"
                        android:background="@drawable/fear_96" />

                    <ImageView
                        style="@style/icon"
                        android:background="@drawable/fear_96" />
                </LinearLayout>


                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_weight="1"
                    android:orientation="horizontal"
                    android:weightSum="3">

                    <ImageView
                        style="@style/icon"
                        android:background="@drawable/fear_96" />

                    <ImageView
                        style="@style/icon"
                        android:background="@drawable/fear_96" />

                    <ImageView
                        style="@style/icon"
                        android:background="@drawable/fear_96" />
                </LinearLayout>

            </LinearLayout>



        </LinearLayout>
    </ScrollView>
  </android.support.v4.widget.NestedScrollView>
</LinearLayout>

我知道我做错了。请帮助我如何获得我想要的视图。

3 个答案:

答案 0 :(得分:0)

试试这个。您已将视图包装在ScrollView中的另一个父LinearLayout中,这可能只是您遇到问题的原因。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:orientation="vertical">

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true">

        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/toolbar"
            android:fillViewport="true">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:weightSum="4">
                <LinearLayout
                    android:layout_width="match_parent"
                    android:weightSum="3"
                    android:layout_height="0dp"
                    android:layout_weight="1">
                    <ImageView
                        android:src="@mipmap/ic_launcher"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"/>
                    <ImageView
                        android:src="@mipmap/ic_launcher"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"/>
                    <ImageView
                        android:src="@mipmap/ic_launcher"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"/>
                </LinearLayout>
                <LinearLayout
                    android:layout_width="match_parent"
                    android:weightSum="3"
                    android:layout_height="0dp"
                    android:layout_weight="1">
                    <ImageView
                        android:src="@mipmap/ic_launcher"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"/>
                    <ImageView
                        android:src="@mipmap/ic_launcher"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"/>
                    <ImageView
                        android:src="@mipmap/ic_launcher"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"/>
                </LinearLayout>
                <LinearLayout
                    android:layout_width="match_parent"
                    android:weightSum="3"
                    android:layout_height="0dp"
                    android:layout_weight="1">
                    <ImageView
                        android:src="@mipmap/ic_launcher"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"/>
                    <ImageView
                        android:src="@mipmap/ic_launcher"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"/>
                    <ImageView
                        android:src="@mipmap/ic_launcher"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"/>
                </LinearLayout>
                <LinearLayout
                    android:layout_width="match_parent"
                    android:weightSum="3"
                    android:layout_height="0dp"
                    android:layout_weight="1">
                    <ImageView
                        android:src="@mipmap/ic_launcher"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"/>
                    <ImageView
                        android:src="@mipmap/ic_launcher"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"/>
                    <ImageView
                        android:src="@mipmap/ic_launcher"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"/>
                </LinearLayout>
            </LinearLayout>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:weightSum="4">
                <LinearLayout
                    android:layout_width="match_parent"
                    android:weightSum="3"
                    android:layout_height="0dp"
                    android:layout_weight="1">
                    <ImageView
                        android:src="@mipmap/ic_launcher"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"/>
                    <ImageView
                        android:src="@mipmap/ic_launcher"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"/>
                    <ImageView
                        android:src="@mipmap/ic_launcher"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"/>
                </LinearLayout>
                <LinearLayout
                    android:layout_width="match_parent"
                    android:weightSum="3"
                    android:layout_height="0dp"
                    android:layout_weight="1">
                    <ImageView
                        android:src="@mipmap/ic_launcher"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"/>
                    <ImageView
                        android:src="@mipmap/ic_launcher"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"/>
                    <ImageView
                        android:src="@mipmap/ic_launcher"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"/>
                </LinearLayout>
                <LinearLayout
                    android:layout_width="match_parent"
                    android:weightSum="3"
                    android:layout_height="0dp"
                    android:layout_weight="1">
                    <ImageView
                        android:src="@mipmap/ic_launcher"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"/>
                    <ImageView
                        android:src="@mipmap/ic_launcher"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"/>
                    <ImageView
                        android:src="@mipmap/ic_launcher"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"/>
                </LinearLayout>
                <LinearLayout
                    android:layout_width="match_parent"
                    android:weightSum="3"
                    android:layout_height="0dp"
                    android:layout_weight="1">
                    <ImageView
                        android:src="@mipmap/ic_launcher"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"/>
                    <ImageView
                        android:src="@mipmap/ic_launcher"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"/>
                    <ImageView
                        android:src="@mipmap/ic_launcher"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"/>
                </LinearLayout>
            </LinearLayout>
        </ScrollView>
    </android.support.v4.widget.NestedScrollView>
</LinearLayout>

答案 1 :(得分:0)

试试这个。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/lightGray"
android:orientation="vertical">

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/toolbar"
        android:fillViewport="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:padding="1dp"
                android:weightSum="4"

                >


                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_weight="1"
                    android:orientation="horizontal"
                    android:weightSum="3">


                    <ImageView
                        android:id="@+id/abulation"
                        android:layout_width="wrap_content"
                        android:layout_weight="1"
                        android:layout_height="match_parent"
                        android:background="#FF0F0F" />

                    <ImageButton
                        android:id="@+id/masjid"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:layout_width="wrap_content"
                        android:background="#D0060F" />


                    <ImageView
                        android:id="@+id/restroom"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:layout_width="wrap_content"
                        android:background="#1F0F0F" />

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_weight="1"
                    android:orientation="horizontal"
                    android:weightSum="3">

                    <ImageView
                        android:id="@+id/dressing"
                        android:layout_width="wrap_content"
                        android:layout_weight="1"
                        android:layout_height="match_parent"
                        android:background="#FF0F0F" />

                    <ImageButton
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:layout_width="wrap_content"
                        android:background="#1F0F0F"
                        android:scaleType="fitXY" />


                    <ImageButton
                        android:id="@+id/Favourite"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:layout_width="wrap_content"
                        android:background="#D0060F"
                        android:onClick="random"
                        android:scaleType="fitXY" />


                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_weight="1"
                    android:orientation="horizontal"
                    android:weightSum="3">

                    <ImageView
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:layout_width="wrap_content"
                        android:background="#D0060F" />

                    <ImageView
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:layout_width="wrap_content"
                        android:background="#1F0F0F" />

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_weight="1"
                        android:layout_height="match_parent"
                        android:background="#FF0F0F" />
                </LinearLayout>


                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_weight="1"
                    android:orientation="horizontal"
                    android:weightSum="3">

                    <ImageView
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:layout_width="wrap_content"
                        android:background="#1F0F0F" />

                    <ImageView
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:layout_width="wrap_content"
                        android:background="#D0060F" />

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_weight="1"
                        android:layout_height="match_parent"
                        android:background="#FF0F0F" />
                </LinearLayout>

            </LinearLayout>



        </LinearLayout>
    </ScrollView>
  </android.support.v4.widget.NestedScrollView>
</LinearLayout>

希望有所帮助。

答案 2 :(得分:0)

以下是您需要做的事情:首先,我们从每个水平android:weightSum的主垂直LinearLayoutandroid:layout_weight中删除LinearLayout属性。我们还需要将id设置为垂直LinearLayout作为android:id=@+id/mainContainerLL。这是我为您的布局测试而导出的示例布局:

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/toolbar"
        android:fillViewport="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <LinearLayout
                android:id="@+id/rowContainerLL"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:padding="1dp">


                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@android:color/holo_red_light"
                    android:orientation="horizontal"
                    android:weightSum="3">

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@android:color/darker_gray"

                    android:orientation="horizontal"
                    android:weightSum="3">


                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@android:color/holo_red_light"

                    android:orientation="horizontal"
                    android:weightSum="3">
                </LinearLayout>


                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@android:color/darker_gray"

                    android:orientation="horizontal"
                    android:weightSum="3">

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@android:color/holo_red_light"

                    android:orientation="horizontal"
                    android:weightSum="3">

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@android:color/darker_gray"

                    android:orientation="horizontal"
                    android:weightSum="3">

                </LinearLayout>

            </LinearLayout>


        </LinearLayout>
    </ScrollView>
</android.support.v4.widget.NestedScrollView>

现在,对于java编码部分:我们使用ViewTreeObserver来获取运行时的高度(观察者在将要绘制视图时为我们提供回调,并且计算它们的高度,我们需要它)。在那里,我们将高度设置为每个水平LinearLayout

final LinearLayout linearLayout = (LinearLayout) findViewById(R.id.rowContainerLL);
    ViewTreeObserver viewTreeObserver = linearLayout.getViewTreeObserver();

    viewTreeObserver.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
        @Override
        public boolean onPreDraw() {
            linearLayout.getViewTreeObserver().removeOnPreDrawListener(this);

            View child;
            LinearLayout.LayoutParams params;
            final int viewHeight = linearLayout.getHeight() / 4;

            for (int i = 0; i < linearLayout.getChildCount(); i++) {
                child = linearLayout.getChildAt(i);

                params = (LinearLayout.LayoutParams) child.getLayoutParams();
                params.height = viewHeight;

                child.setLayoutParams(params);
            }

            return false;
        }
    });