具有权重和滚动视图的线性布局

Question

我正在尝试使用权重创建响应式布局，但在这种情况下我还需要使用滚动视图。

这是我此时的代码：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".EncyclopediaFragment">

    <!--Linear Container-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:weightSum="100">

        <!--Title Box-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="20"
            android:orientation="horizontal"
            android:weightSum="100">

            <!--Empty Space-->
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="5">


            </LinearLayout>

            <!--Text Box-->
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="95">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="@string/encyclopedia_mosntersLabel"
                    android:gravity="center"
                    android:textAlignment="viewStart"/>

            </LinearLayout>

        </LinearLayout>

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

        </LinearLayout>

    </LinearLayout>

但它需要像 this。

该布局应该可以响应权重，但同时我需要使其能够滚动。

所以我的问题是：我怎样才能创建一个具有权重的响应式布局，同时又是一个可以向下滚动的布局，就像图片中那样？

Answer 1

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".EncyclopediaFragment">

<!--Toolbar-->
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<!--Linear Container With Weights--> 

</RelativeLayout>
</ScrollLayout>
</RelativeLayout>

Answer 2

您的 ScrollView 中的内容应使用 wrap_parent，如果您想拉伸其中的内容，请设置 android:fillViewport="true"。试试这个：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".EncyclopediaFragment">

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

        <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

            <!--Linear Container--> 

        </RelativeLayout>
    </ScrollLayout>
</RelativeLayout>

Answer 3

如果您确定了 6 个怪物和 8 个塔的数量，那么您应该如何组织布局：

    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Monsters"/>

            <!-- the following LinearLayout should be repeated twice for 6 Monsters -->

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

                <MonsterView
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content" />

                <MonsterView
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content" />

                <MonsterView
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content" />

            </LinearLayout>

            ...


            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Towers"/>        

            <!-- the following LinearLayout should be repeated twice for 6 Towers -->

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

                <TowerView
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content" />

                <TowerView
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content" />

                <TowerView
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content" />

            </LinearLayout>

            ...


            <!-- attention here for two Towers in the last row -->        

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

                <TowerView
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content" />

                <TowerView
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content" />

            </LinearLayout>

        </LinearLayout>
    </ScrollView>

具有权重和滚动视图的线性布局

Linear Layout with Weights and Scroll View

android

android-layout

android-linearlayout

android-layout-weight