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