web-dev-qa-db-fra.com

Afficher le contenu sous la barre d'outils

Bonjour, je tente simplement de placer mon contenu sous la barre d’outils, mais au moment où j’exécute mon application, une partie du contenu est cachée derrière celle-ci alors qu’elle devrait être en dessous.

J'ai lu sur l'utilisation d'une disposition de cadre pour tenter de la séparer, mais je suis un peu coincé. J'utilise actuellement un modèle de tiroir de navigation de studio Android fourni avec le logiciel et je me demandais quelles modifications je devais apporter.

Ma mise en page de coordinateur

<Android.support.design.widget.AppBarLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:theme="@style/AppTheme.AppBarOverlay">

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

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

<FrameLayout
    Android:id="@+id/fragment_container"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"/>

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

Ma disposition de tiroir

<Android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:fitsSystemWindows="true"
tools:openDrawer="start">

<include
    layout="@layout/app_bar_main"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent" />

<Android.support.design.widget.NavigationView
    Android:id="@+id/nav_view"
    Android:layout_width="wrap_content"
    Android:layout_height="match_parent"
    Android:layout_gravity="start"
    Android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header_main"
    app:menu="@menu/activity_main_drawer" />

  </Android.support.v4.widget.DrawerLayout>

Quels changements dois-je faire?

androidxmlandroid-layouttoolbarandroid-toolbar
13
james

De nombreux ViewGroups permettent à leurs enfants de se chevaucher. Ceux-ci incluent FrameLayout, RelativeLayout, CoordinatorLayout et DrawerLayout. LinearLayout est l'un de ceux qui ne permettent pas à ses enfants de se chevaucher.

La réponse à votre question dépend vraiment de ce que le résultat final devrait être. Si vous essayez simplement d'avoir une barre d'outils toujours affichée à l'écran et du contenu en dessous, vous n'avez pas du tout besoin de CoordinatorLayout et AppBarLayout, vous pouvez simplement utiliser un LinearLayout vertical avec deux enfants:

<LinearLayout Android:orientation="vertical" ...>
    <Android.support.v7.widget.Toolbar
        Android:layout_width="match_parent"
        Android:layout_height="?attr/actionBarSize"
        ... />

    <FrameLayout 
        Android:id="@+id/fragment_container"
        Android:layout_width="match_parent"
        Android:layout_height="0dp"
        Android:layout_weight="1"
        ... />
</LinearLayout>

Notez les attributs de mise en page de FrameLayout.

Si vous voulez faire des choses fantaisistes où la barre d'outils défile à l'écran pendant que vous faites défiler le contenu, vous avez besoin d'un AppBarLayout et vous devez attribuer à votre zone de contenu un attribut spécial comme celui-ci:

<Android.support.design.widget.CoordinatorLayout>
    <Android.support.design.widget.AppBarLayout
       Android:layout_width="match_parent"
       Android:layout_height="wrap_content"
       ... >

        <Android.support.v7.widget.Toolbar
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll"
            ... />
    </Android.support.design.widget.AppBarLayout>

    <FrameLayout 
        Android:id="@+id/fragment_container"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        ... />
</Android.support.design.widget.CoordinatorLayout>
25
Karakuri
app:layout_behavior="@string/appbar_scrolling_view_behavior"

Ajouter ce code à votre balise frame

13
Brian Hoang

Comme @Brian Hoang et @Karakuri ont déclaré utiliser la propriété layout_behaviour:

app:layout_behavior="@string/appbar_scrolling_view_behavior"

semble être une très bonne solution. Même si vous n'avez pas d'animation pour le moment mais que vous envisagez de l'avoir à l'avenir, vous pouvez toujours conserver CoordinatorLayout et un AppBarLayout au cas où vous souhaiteriez ajouter des animations à l'avenir.

D'après ce que je comprends, la propriété semble généralement permettre de calculer la hauteur de l'ensemble du composant d'interface utilisateur AppBarLayout. Le composant d'interface utilisateur qui utilise la propriété layout_behaviour avec @ string/appbar_scrolling_view_behaviour sera automatiquement affiché exactement sous AppBarLayout, quelle que soit sa hauteur.

De cette façon, il n'est pas nécessaire de coder en dur les marges supérieures de l'interface utilisateur censée se trouver sous AppBarLayout.

Dans le code ci-dessous, include_app_bar_with_tabs_layout (AppBarLayout) a une hauteur fixe de 200 dp (il peut s'agir de wrap_content ou de tout autre élément). Ensuite, le RelativeLayout qui contient le contenu de l'écran utilise la propriété layout_behaviour.

Regardez le code et l'image de l'interface ci-dessous:

<?xml version="1.0" encoding="utf-8"?>
<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">

    <include
        layout="@layout/include_app_bar_with_tabs_layout"
        Android:layout_width="match_parent"
        <!-- this can be anything, even wrap_content -->
        Android:layout_height="200dp" />

    <RelativeLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:background="@color/Green"
        <!-- this tells it to be below the include_app_bar_with_tabs_layout (AppBarLayout) -->
        app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

        <Android.support.v4.view.ViewPager
            Android:id="@+id/view_pager"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:layout_above="@+id/adView" />

        <com.google.Android.gms.ads.AdView
            Android:id="@id/adView"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_alignParentBottom="true"
            Android:layout_centerHorizontal="true"
            app:adSize="BANNER"
            app:adUnitId="@string/banner_ad_unit_id"
            tools:background="@color/green"
            tools:layout_height="50dp" />
    </RelativeLayout>
</Android.support.design.widget.CoordinatorLayout>

 enter image description here

1
PrograMonks