具有滚动视图和线性布局的布局设计答案

【问题标题】：layout design with scroll view and linear layout具有滚动视图和线性布局的布局设计
【发布时间】：2019-03-08 07:52:33
【问题描述】：

我是 android 开发的绝对初学者，我正在开发一个带有滚动视图和线性布局的 UI。这是我的代码

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

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:clipToPadding="true">

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

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/holo_green_light"
                android:theme="?attr/actionBarTheme"
                android:minHeight="?attr/actionBarSize"
                android:id="@+id/dashboardToolbar"
                android:layout_weight="0.04" />

            <TextView
                android:text="Manage Activities"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/textView"
                android:layout_weight="9.78"
                android:textAlignment="center"
                android:textSize="30sp"
                android:layout_margin="21dp"
                android:fontFamily="cursive"
                android:textColor="@android:color/holo_orange_light"
                android:textStyle="normal|bold" />

            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="470dp"
                android:weightSum="1">

                <LinearLayout
                    android:orientation="vertical"
                    android:layout_margin="4dp"
                    android:background="@color/green"
                    android:layout_width="0dp"
                    android:layout_weight="0.5"
                    android:layout_height="120dp"></LinearLayout>

                <LinearLayout
                    android:orientation="vertical"
                    android:layout_margin="4dp"
                    android:background="@color/deeppurple"
                    android:layout_width="0dp"
                    android:layout_weight="0.5"
                    android:layout_height="120dp">

                </LinearLayout>


            </LinearLayout>


            <!-- second row -->



            <!-- second row- -->


        </LinearLayout>
    </ScrollView>
</LinearLayout>

我在水平方向上得到了两个线性布局，没有任何问题。我想要的是使第三个线性布局出现在第一个布局的底部。基本上我正在为我的应用程序开发仪表板 UI，我只想制作 2 列和 5 行线性布局矩阵。我在我的 xml 文件中评论了第二行的区域，如果有人可以帮助我提供 xml 代码或解决这个问题的想法，我真的很感激。

【问题讨论】：

添加你的设计截图
对不起，我不能这样做。
我相信在你的情况下使用 GridView 而不是 ScrollView 更好

标签： android android-layout

【解决方案1】：

请试试这个xml代码来实现你想要的布局

代码

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

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="true"
    android:fillViewport="true">

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/dashboardToolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.04"
            android:background="@android:color/holo_green_light"
            android:minHeight="?attr/actionBarSize"
            android:theme="?attr/actionBarTheme" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:weightSum="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight=".08"
                android:gravity="center">

                <TextView
                    android:id="@+id/textView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:fontFamily="cursive"
                    android:text="Manage Activities"
                    android:textAlignment="center"
                    android:textColor="@android:color/holo_orange_light"
                    android:textSize="30sp"
                    android:textStyle="normal|bold" />
            </LinearLayout>

            <View
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight=".02" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight=".14">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal"
                    android:weightSum="1">

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="120dp"
                        android:layout_margin="4dp"
                        android:layout_weight="0.5"
                        android:background="@color/colorPrimary"
                        android:orientation="vertical">

                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="120dp"
                        android:layout_margin="4dp"
                        android:layout_weight="0.5"
                        android:background="@color/colorAccent"
                        android:orientation="vertical">

                    </LinearLayout>

                </LinearLayout>
            </LinearLayout>

            <View
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight=".02" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight=".14">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal"
                    android:weightSum="1">

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="120dp"
                        android:layout_margin="4dp"
                        android:layout_weight="0.5"
                        android:background="@color/colorPrimary"
                        android:orientation="vertical">

                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="120dp"
                        android:layout_margin="4dp"
                        android:layout_weight="0.5"
                        android:background="@color/colorAccent"
                        android:orientation="vertical">

                    </LinearLayout>

                </LinearLayout>

            </LinearLayout>

            <View
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight=".02" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight=".14">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal"
                    android:weightSum="1">

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="120dp"
                        android:layout_margin="4dp"
                        android:layout_weight="0.5"
                        android:background="@color/colorPrimary"
                        android:orientation="vertical">

                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="120dp"
                        android:layout_margin="4dp"
                        android:layout_weight="0.5"
                        android:background="@color/colorAccent"
                        android:orientation="vertical">

                    </LinearLayout>

                </LinearLayout>

            </LinearLayout>

            <View
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight=".02" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight=".14">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal"
                    android:weightSum="1">

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="120dp"
                        android:layout_margin="4dp"
                        android:layout_weight="0.5"
                        android:background="@color/colorPrimary"
                        android:orientation="vertical">

                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="120dp"
                        android:layout_margin="4dp"
                        android:layout_weight="0.5"
                        android:background="@color/colorAccent"
                        android:orientation="vertical">

                    </LinearLayout>

                </LinearLayout>

            </LinearLayout>

            <View
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight=".02" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight=".14">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal"
                    android:weightSum="1">

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="120dp"
                        android:layout_margin="4dp"
                        android:layout_weight="0.5"
                        android:background="@color/colorPrimary"
                        android:orientation="vertical">

                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="0dp"
                        android:layout_height="120dp"
                        android:layout_margin="4dp"
                        android:layout_weight="0.5"
                        android:background="@color/colorAccent"
                        android:orientation="vertical">

                    </LinearLayout>

                </LinearLayout>

            </LinearLayout>

            <View
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight=".1" />
        </LinearLayout>

    </LinearLayout>
</ScrollView>
</LinearLayout>

屏幕截图

【讨论】：

非常感谢您的支持。

【解决方案2】：

你应该可以复制：

<LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="470dp"
            android:weightSum="1">

            <LinearLayout
                android:orientation="vertical"
                android:layout_margin="4dp"
                android:background="@color/green"
                android:layout_width="0dp"
                android:layout_weight="0.5"
                android:layout_height="120dp"></LinearLayout>

            <LinearLayout
                android:orientation="vertical"
                android:layout_margin="4dp"
                android:background="@color/deeppurple"
                android:layout_width="0dp"
                android:layout_weight="0.5"
                android:layout_height="120dp">

            </LinearLayout>


        </LinearLayout>

进入您的垂直线性布局。它应该可以工作。但问题是它不可见吗？

我看到您将 ScrollView 之后的第一个 LinearLayout 作为 match_parent。它应该是 wrap_content 使布局扩展到父级之外并且可以滚动。

一个很好的提示是为布局设置不同的背景颜色，这样您就可以看到每个布局的大小并检查宽度/高度是否有错误。

编辑：我看到您的水平 LinearLayout 中有 android:layout_height="470dp" ，它的子项中有 android:layout_height="120dp" 。我不知道它应该看起来如何，但这似乎有点奇怪，也许您应该将布局设置为不同的背景颜色，以确保这是您想要的尺寸。

【讨论】：