Android - 将scrollView与其他元素嵌入一个布局

时间:2018-04-20 21:45:14

标签: android scrollview android-constraintlayout scrollable

我的布局有问题。我想在一个活动上显示顶部的工具栏,在它下面我希望有2个图像按钮,在这些按钮下面是一个嵌入在scrollView中并动态填充活动的表。

所以我的最终结果应该看起来很糟糕。像这样:

Layout design

我现在的问题是,如果我使用LinearLayout作为根元素,除了工具栏之外什么都没有显示:

Result of the design when emulated

此布局的代码如下所示:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:orientation="vertical"
    android:background="#d3d3d3">
    <android.support.v7.widget.Toolbar
        android:id="@+id/my_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:elevation="4dp"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"/>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <ImageButton
            android:id="@+id/arrow_up"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginTop="8dp" />

        <ImageButton
            android:id="@+id/arrow_down"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="44dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="7dp" />

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <ScrollView
            android:id="@+id/tableWrapper"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="260dp"
            android:layout_marginTop="8dp"
            tools:layout_editor_absoluteX="1dp">

            <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/tableLayout1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:shrinkColumns="*"
                android:stretchColumns="*">

                <TableRow
                    android:id="@+id/tableRow_title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#16a085"
                    android:gravity="center_horizontal">

                    <TextView
                        android:id="@+id/TableHeader"
                        android:layout_width="766dp"
                        android:layout_height="40dp"
                        android:layout_span="6"
                        android:gravity="center"
                        android:text="Data Base"
                        android:textColor="#ffffff"
                        android:textSize="18dp"
                        android:textStyle="bold"
                        android:typeface="serif"
                        tools:layout_editor_absoluteX="8dp"
                        tools:layout_editor_absoluteY="-83dp"></TextView>
                </TableRow>

                <TableRow
                    android:id="@+id/tableRow_item"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#ffffff"
                    android:gravity="center"
                    android:padding="5dp">

                    <TextView
                        android:id="@+id/tv1"
                        android:text="Table"
                        android:textColor="#000000"></TextView>

                    <TextView
                        android:id="@+id/tv2"
                        android:text="Action"
                        android:textColor="#000000"
                        android:typeface="serif"></TextView>

                    <TextView
                        android:id="@+id/tv3"
                        android:text="Request running"
                        android:textColor="#000000"
                        android:typeface="serif"></TextView>

                    <TextView
                        android:id="@+id/tv4"
                        android:text="Available"
                        android:textColor="#000000"
                        android:typeface="serif">       </TextView>
                </TableRow>

            </TableLayout>

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

如果我使用约束布局而不是线性布局作为根元素,我可以使所有项目都运行但问题是,scrollView中的表有一个顶部边距,导致scollView无法滚动直到桌子的尽头。 我还尝试通过填充(在其他帖子中推荐)来交换边距,但没有成功。没有边距,滚动视图将完美地工作,但覆盖图像按钮。

任何想法我如何在我的布局上拥有所有小部件并使scrollView可滚动到最后,即使它?

2 个答案:

答案 0 :(得分:0)

首先设置将LinearLayout包裹到ImageButton的{​​{1}}高度wrap_content此外,您可以完全删除此LinearLayout,因为它没有id(可以不能在java代码中修改)并且vertical为root LinearLayout

然后移除包裹LinearLayout完整的ScrollView并将height ScrollView更改为match_parent,将TableLayout更改为wrap_content

将根LinearLayout的高度设置为match_parent

以下是生成的代码:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:padding="10dp"
    android:orientation="vertical"
    android:background="#d3d3d3">
    <android.support.v7.widget.Toolbar
        android:id="@+id/my_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:elevation="4dp"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"/>

        <ImageButton
            android:id="@+id/arrow_up"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginTop="8dp" />

        <ImageButton
            android:id="@+id/arrow_down"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="44dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="7dp" />

        <ScrollView
            android:id="@+id/tableWrapper"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="260dp"
            android:layout_marginTop="8dp"
            tools:layout_editor_absoluteX="1dp">

            <TableLayout 
                android:id="@+id/tableLayout1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:shrinkColumns="*"
                android:stretchColumns="*">

                <TableRow
                    android:id="@+id/tableRow_title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#16a085"
                    android:gravity="center_horizontal">

                    <TextView
                        android:id="@+id/TableHeader"
                        android:layout_width="766dp"
                        android:layout_height="40dp"
                        android:layout_span="6"
                        android:gravity="center"
                        android:text="Data Base"
                        android:textColor="#ffffff"
                        android:textSize="18dp"
                        android:textStyle="bold"
                        android:typeface="serif"
                        tools:layout_editor_absoluteX="8dp"
                        tools:layout_editor_absoluteY="-83dp"/>
                </TableRow>

                <TableRow
                    android:id="@+id/tableRow_item"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#ffffff"
                    android:gravity="center"
                    android:padding="5dp">

                    <TextView
                        android:id="@+id/tv1"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Table"
                        android:textColor="#000000"/>

                    <TextView
                        android:id="@+id/tv2"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Action"
                        android:textColor="#000000"
                        android:typeface="serif"/>

                    <TextView
                        android:id="@+id/tv3"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Request running"
                        android:textColor="#000000"
                        android:typeface="serif"/>

                    <TextView
                        android:id="@+id/tv4"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Available"
                        android:textColor="#000000"
                        android:typeface="serif"/>
                </TableRow>

            </TableLayout>

        </ScrollView>
</LinearLayout>

答案 1 :(得分:0)

我试图在我的设备上显示的ImageButton下面显示表格。我只是从scrollView中删除了margin-bottom。它确实表明,Linearlayout有一个子视图是滚动视图是不必要的,所以如果你想删除它,你可以再添加一个东西,在滚动视图中添加fillViewPort = true可能在将来它会有所帮助。

修改后的代码如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:orientation="vertical"
    android:background="#d3d3d3">
    <android.support.v7.widget.Toolbar
        android:id="@+id/my_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:elevation="4dp"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"/>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <ImageButton
            android:id="@+id/arrow_up"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginTop="8dp" />

        <ImageButton
            android:id="@+id/arrow_down"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="44dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="7dp" />

    </LinearLayout>

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

        <ScrollView
            android:id="@+id/tableWrapper"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="8dp"
            android:fillViewport="true"
            tools:layout_editor_absoluteX="1dp">

            <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/tableLayout1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:shrinkColumns="*"
                android:stretchColumns="*">

                <TableRow
                    android:id="@+id/tableRow_title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#16a085"
                    android:gravity="center_horizontal">

                    <TextView
                        android:id="@+id/TableHeader"
                        android:layout_width="766dp"
                        android:layout_height="40dp"
                        android:layout_span="6"
                        android:gravity="center"
                        android:text="Data Base"
                        android:textColor="#ffffff"
                        android:textSize="18dp"
                        android:textStyle="bold"
                        android:typeface="serif"
                        tools:layout_editor_absoluteX="8dp"
                        tools:layout_editor_absoluteY="-83dp"></TextView>
                </TableRow>

                <TableRow
                    android:id="@+id/tableRow_item"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#ffffff"
                    android:gravity="center"
                    android:padding="5dp">

                    <TextView
                        android:id="@+id/tv1"
                        android:text="Table"
                        android:textColor="#000000"></TextView>

                    <TextView
                        android:id="@+id/tv2"
                        android:text="Action"
                        android:textColor="#000000"
                        android:typeface="serif"></TextView>

                    <TextView
                        android:id="@+id/tv3"
                        android:text="Request running"
                        android:textColor="#000000"
                        android:typeface="serif"></TextView>

                    <TextView
                        android:id="@+id/tv4"
                        android:text="Available"
                        android:textColor="#000000"
                        android:typeface="serif">
                    </TextView>
                </TableRow>

            </TableLayout>

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

希望它可以提供帮助。