web-dev-qa-db-fra.com

Barre de navigation Android couvrant le contenu du viewpager

Je ne peux pas empêcher la barre de navigation des systèmes de masquer mon contenu!

enter image description here

On me fait défiler jusqu'au bas de la liste de recyclage, mais cela se cache derrière la barre de navigation. Voici ma mise en page XML.

<Android.support.design.widget.CoordinatorLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:id="@+id/root"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:fitsSystemWindows="true">

<Android.support.design.widget.AppBarLayout
    Android:id="@+id/appbar"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <include layout="@layout/toolbar"/>

    <Android.support.design.widget.TabLayout
        Android:id="@+id/tabs"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content" />

</Android.support.design.widget.AppBarLayout>

<Android.support.v4.view.ViewPager
    Android:fitsSystemWindows="true"
    Android:id="@+id/viewpager"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<com.melnykov.fab.FloatingActionButton
    Android:id="@+id/fab"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_gravity="bottom|right"
    Android:layout_margin="16dp"
    app:fab_colorNormal="@color/accent"
    app:fab_colorPressed="@color/accent_dark" />

Voici la disposition des fragments que vous voyez sur la photo.

<FrameLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:orientation="vertical"
Android:padding="8dp">

<Android.support.v7.widget.RecyclerView
    Android:id="@+id/recyclerView"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:scrollbars="vertical"/>

</FrameLayout>

J'ai essayé d'ajouter Android: fitsSystemWindows = "true" dans chaque élément de mise en page que je pouvais, mais cela n'a pas fonctionné. D'autres discussions mentionnent l'ajout d'une marge calculée à partir de la barre, mais cela ne semble pas être la solution appropriée. J'ai saisi cette présentation directement à partir de l'application CheesSquare de Google pour la démonstration de l'application, et celle-ci semble fonctionner correctement.

androidandroid-fragmentsandroid-viewpagernavigationbar
23
hitch.united

Je l'ai compris. Dans ma situation particulière, chacun de mes fragments gère sa propre instance de barre d'outils. J'appelais setSupportActionBar () dans la méthode onViewCreated () sur mes fragments. Déplacer cette fonctionnalité dans onCreateView () l'a résolu. 

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_my_account, container, false);
        setupToolbar((Toolbar) view.findViewById(R.id.toolbar));
        return view;
    }

    private void setupToolbar(Toolbar toolbar) {
        toolbarController.registerToolbar(toolbar);
        toolbarController.setActivityTitle("My Account");
    }

(registerToolbar () appelle setSupportActionBar () dans l'activité d'hébergement).

J'espère que cela aide tout le monde!

1
hitch.united

La vue racine de fragment de Viewpager doit être RecyclerView ou NestedScrollView. FrameLayout ne prend pas en charge le comportement de défilement de CoordinatorLayout et c’est pourquoi il ne fonctionne pas bien.

Comment corriger la disposition des fragments du viewpager: ne placez pas RecyclerView dans FrameLayout. Déclarez plutôt RecyclerView à la racine. Vous pouvez également définir padding="8dp" sur RecyclerView, utilisez simplement Android:clipToPadding="false".

1
Dima Kornilov

Le problème est d'utiliser AppBarLayout. La CoordinatorLayout a été introduite en tant que puissant FrameLayout qui apporte des animations de Nice basées sur Behaviors défini. Si nous voulons ajouter une sorte d'animation scroll, telle que collapsing toolbar, etc., nous devons envelopper notre Toolbar avec AppBarLayout, mais lorsque nous voulons placer un contenu statique dans CoordinatorLayout, tel que ViewPager dans votre cas, nous ne le faisons pas besoin d'utiliser AppBarLayout du tout:

activity_main.xml: 

<Android.support.design.widget.CoordinatorLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true"
    tools:context="com.mydemoci.MainActivity">

    <Android.support.v7.widget.Toolbar
        Android:id="@+id/toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="?attr/actionBarSize"
        Android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay"/>

    <include layout="@layout/content_main"/>

    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/fab"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="bottom|end"
        Android:layout_margin="@dimen/fab_margin"
        Android:src="@Android:drawable/ic_dialog_email"/>

</Android.support.design.widget.CoordinatorLayout>

content_main.xml: 

<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"
    Android:background="#A1D490"

    // Remember CoordinatorLayout is a kind of FrameLayout,
    // so we have to provide top margin to make Toolbar visible
    Android:layout_marginTop="?attr/actionBarSize"

    tools:context="com.mydemoci.MainActivity"
    tools:showIn="@layout/activity_main">

    <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentBottom="true"
        Android:layout_centerHorizontal="true"
        Android:background="@color/colorAccent"
        Android:text="Hello World"
        Android:textSize="30sp"/>

</RelativeLayout>
0
Roman

Accédez à style.xml et supprimez ces deux éléments ou définissez leurs valeurs "true" sur "false".

<item name="Android:windowTranslucentStatus">true</item>
<item name="Android:windowTranslucentNavigation">true</item>

Dans mon cas, le problème a été résolu en supprimant ces deux valeurs de styles de thème.

0
Amir De

Ajouter simplement la marge inférieure à View Pager corrige le problème pour moi.

Voici le code dans mon activité_main.xml

<Android.support.v4.view.ViewPager
    Android:id="@+id/main_viewPager"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:layout_marginBottom="55dp"/>

<Android.support.design.widget.BottomNavigationView
    Android:id="@+id/navigation"
    Android:layout_width="0dp"
    Android:layout_height="wrap_content"
    Android:background="?android:attr/windowBackground"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:menu="@menu/navigation" />
0
Darien Daud