web-dev-qa-db-fra.com

Ajouter une disposition personnalisée à ActionBar / Toolbar sans marges

Je veux créer une barre d'outils de hauteur personnalisée et cela fonctionne bien jusqu'à ce que j'y ajoute du contenu. Ensuite, mon contenu est ajusté pour se trouver entre la flèche de retour et les boutons de la barre d'action.

Comment puis-je faire en sorte que mon contenu occupe toute la largeur afin que je puisse créer une mise en page comme ci-dessous? Je suppose que l'icône "+" doit être dans une disposition parent de la barre d'outils?

Les docs disent:

L'application peut ajouter des vues enfant arbitraires à la barre d'outils. Ils apparaîtront à cette position dans la mise en page. Si Toolbar.LayoutParams d'une vue enfant indique une valeur de gravité de CENTER_HORIZONTAL, la vue tentera de se centrer dans l'espace disponible restant dans la barre d'outils une fois que tous les autres éléments auront été mesurés.

Mais je n'ai pas la gravité réglée sur CENTER_HORIZONTAL ... Layout I want

 <Android.support.v7.widget.Toolbar xmlns:Android="http://schemas.Android.com/apk/res/Android"
        xmlns:iosched="http://schemas.Android.com/apk/res-auto"
        iosched:theme="@style/ActionBarThemeOverlay"

        iosched:popupTheme="@style/ActionBarPopupThemeOverlay"
        Android:id="@+id/toolbar_actionbar"
        Android:background="@color/theme_primary"
        iosched:titleTextAppearance="@style/ActionBar.TitleText"
        iosched:contentInsetStart="16dp"
        iosched:contentInsetEnd="16dp"
        Android:layout_width="match_parent"
        Android:layout_height="128dp" >
        <RelativeLayout
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content">

        ... My Content

Actuellement, ma disposition se termine comme ceci lors de l'exécution avec une marge gauche définie sur 168:

enter image description herelayout

19
Christer Nordvik

Je ne sais pas si vous avez encore besoin d'aide pour cela, mais il a le plus de votes pour une question sans réponse non seulement dans la balise Android-5.0-Lollipop , mais aussi dans la balise Android- barre d'outils tag en ce moment. Donc, je pensais que je lui en donnerais un.

Cette mise en page est assez facile à réaliser, en particulier avec le nouveau Design Support Library .

Implémentation

La racine de votre hiérarchie devra être CoordinatorLayout .

Selon les documents:

Les enfants d'un coordinateur Layout peuvent avoir une ancre. Cet id de vue doit correspondre à un descendant arbitraire de CoordinatorLayout, mais il peut ne pas être l'enfant ancré lui-même ou un descendant de l'enfant ancré. Cela peut être utilisé pour placer des vues flottantes par rapport à d'autres volets de contenu arbitraires.

Nous allons donc l'utiliser pour positionner le FloatingActionButton où il doit aller.

Le reste est assez simple. Nous allons utiliser un LinearLayout vertical pour positionner le Toolbar, le conteneur de texte, le conteneur d'onglets, puis un ViewPager. Ainsi, la mise en page complète ressemble à:

<Android.support.design.widget.CoordinatorLayout
    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:fitsSystemWindows="true">

    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:background="#181E80"
        Android:orientation="vertical">

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:minHeight="?attr/actionBarSize" />

        <RelativeLayout
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_marginBottom="48dp"
            Android:paddingTop="8dp">

            <ImageView
                Android:id="@Android:id/icon"
                Android:layout_width="54dp"
                Android:layout_height="54dp"
                Android:layout_alignParentStart="true"
                Android:layout_marginStart="16dp"
                Android:importantForAccessibility="no"
                Android:src="@drawable/logo" />

            <TextView
                Android:id="@Android:id/text1"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_alignTop="@Android:id/icon"
                Android:layout_marginStart="14dp"
                Android:layout_toEndOf="@Android:id/icon"
                Android:text="Chelsea"
                Android:textColor="@Android:color/white"
                Android:textSize="24sp" />

            <TextView
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:layout_alignStart="@Android:id/text1"
                Android:layout_below="@Android:id/text1"
                Android:text="England - Premier League"
                Android:textColor="@Android:color/white"
                Android:textSize="12sp" />

        </RelativeLayout>

        <FrameLayout
            Android:id="@+id/tab_container"
            Android:layout_width="match_parent"
            Android:layout_height="90dp"
            Android:background="#272F93">

            <Android.support.design.widget.TabLayout
                Android:id="@+id/tabs"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:layout_gravity="bottom"
                app:tabContentStart="70dp"
                app:tabGravity="center"
                app:tabIndicatorColor="#F1514A"
                app:tabMode="scrollable"
                app:tabSelectedTextColor="@Android:color/white"
                app:tabTextColor="#99ffffff" />

        </FrameLayout>

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

    </LinearLayout>

    <Android.support.design.widget.FloatingActionButton
        Android:layout_width="60dp"
        Android:layout_height="60dp"
        Android:layout_margin="16dp"
        Android:src="@drawable/ic_star_white_24dp"
        app:backgroundTint="#F1514A"
        app:borderWidth="0dp"
        app:elevation="8dp"
        app:layout_anchor="@id/tab_container"
        app:layout_anchorGravity="top|right|end" />

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

Il n'y a pas grand-chose de plus à ajouter, la seule autre chose que je mentionnerais est la façon d'utiliser TabLayout . Si vous utilisez un ViewPager comme nous le sommes, vous appelleriez probablement l'un des deux:

Notes

J'ai simplement regardé les dimensions en essayant de faire correspondre autant que possible l'image.

Résultats

results

25
adneal