滚动视图布局将底部导航栏推出视图

Question

直奔主题。我想为我的应用程序有一个底部导航栏，然后在顶部有一个工具栏，中间是一个滚动视图，内容将被放置在其中。

现在的问题是 ScrollView 布局将导航栏推到视野之外，现在导航栏不会显示。

As you can see, the navigation bar isn't showing because the ScrollView takes up the bottom of the screen too.

我尝试了另一种解决方案，但结果是导航栏弹出在 ScrollView 的顶部

That blue bar below the Home toolbar is the navigation bar.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="polytechnic.temasek.bluebeatsmusicapplication.HomePageActivity">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:background="@drawable/bluebeatsbackground2">

    <TextView
        android:id="@+id/toolbartitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Home"
        android:textColor="@android:color/white"
        android:textSize="32sp"
        android:textStyle="bold" />
</android.support.v7.widget.Toolbar>


<ScrollView
        android:layout_width="match_parent"
        android:layout_height="539dp"
    >

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            tools:layout_editor_absoluteX="8dp"
            tools:layout_editor_absoluteY="0dp">

            [Content inside] 
            </android.support.constraint.ConstraintLayout>

    </ScrollView>

<android.support.design.widget.BottomNavigationView
    android:id="@+id/the_bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_gravity="bottom"
    android:background="@color/colorPrimary"
    app:itemBackground="@color/colorPrimary">
    </android.support.design.widget.BottomNavigationView>
</LinearLayout>

到目前为止，我只能将 Scrollview 的高度强制到某个 dp 以为导航栏腾出空间，但我应该还有另一种方式吗？

Answer 1

你最好使用Relative Layout或Constraint Layout（我推荐使用Constraint Layout）来处理这种情况。

我已将您的布局修改为约束布局。 我已经将滚动条的 marginBottom 值欺骗到了 bottomNavigationBar 的高度 [否则，scrollView 的某些内容保留在 bottomNavBar 后面]。

<android.support.constraint.ConstraintLayout 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.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#000"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/toolbartitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Home"
            android:textColor="@android:color/white"
            android:textSize="32sp"
            android:textStyle="bold" />

    </android.support.v7.widget.Toolbar>

    <ScrollView
        android:id="@+id/scrollView2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="50dp"
        android:layout_marginTop="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent">

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="@string/long_text"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintHorizontal_bias="0.0"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

        </android.support.constraint.ConstraintLayout>
    </ScrollView>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/the_bottom_navigation"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_gravity="bottom"
        android:background="@color/colorPrimary"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">

    </android.support.design.widget.BottomNavigationView>


</android.support.constraint.ConstraintLayout>