La barre de navigation inférieure est repoussée hors de vue par une mise en page Scrollview

Question

En allant droit au but. Je veux avoir une barre de navigation inférieure pour mon application, puis en haut une barre d'outils, au milieu un scrollview où le contenu sera placé.

Le problème qui se pose ici est que la mise en page ScrollView pousse la barre de navigation hors de vue, et maintenant la barre de navigation ne s'affiche pas.

Comme vous pouvez le constater, la barre de navigation ne s'affiche pas car le ScrollView occupe également le bas de l'écran.

J'ai essayé une autre solution, mais il s'avère que la barre de navigation s'affiche au-dessus du ScrollView.

La barre bleue située sous la barre d'outils Accueil est la barre de navigation.

<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>

Jusqu'à présent, je n'ai pu que forcer la hauteur du Scrollview à un certain dp pour faire de la place à la barre de navigation, mais il doit y avoir un autre moyen que je suis censé manquer ?

Answer 1

Vous pourriez mieux utiliser Mise en page relative o Disposition des contraintes ( Je recommande d'utiliser Disposition des contraintes ) pour gérer de telles situations.

J'ai modifié votre mise en page en Mise en page par contrainte. J'ai modifié la valeur marginBottom de la barre de défilement pour qu'elle corresponde à la hauteur de la bottomNavigationBar [sinon, une partie du contenu de la scrollView reste derrière la 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>