Fügen Sie ein benutzerdefiniertes Layout zu ActionBar/Toolbar ohne Ränder hinzu.

Question

Ich möchte eine benutzerdefinierte Symbolleiste für die Höhe erstellen, die funktioniert, bis ich ihr Inhalt hinzufüge. Dann ist mein Inhalt so eingestellt, dass er zwischen dem Zurück-Pfeil und den Aktionsleisten-Schaltflächen liegt.

Wie kann ich meinen Inhalt die gesamte Breite nehmen, damit ich ein Layout wie unten erstellen kann? Ich nehme an, dass das "+" - Symbol in einem übergeordneten Layout der Symbolleiste sein muss?

Die docs sagen:

Die Anwendungsansichten beliebigen Kind in die Toolbar hinzufügen. Sie erscheinen an dieser Position innerhalb des Layouts. Wenn die Toolbar.LayoutParams einer untergeordneten Ansicht einen Schwerkraftwert von CENTER_HORIZONTAL angibt, versucht die Ansicht, nach der Messung aller anderen Elemente den verfügbaren Platz in der Symbolleiste zu zentrieren.

Aber ich habe nicht die Schwerkraft zu CENTER_HORIZONTAL gesetzt haben ...

<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 

Derzeit mein Layout endet wie folgt aus, wenn sie mit linken Rand auf 168 gesetzt ausgeführt wird:

Answer 1

Ich bin mir nicht sicher, ob Sie noch Hilfe brauchen, aber es hat die meisten Stimmen für eine unbeantwortete Frage in nicht nur die android-5.0-lollipop Tag, sondern auch die android-toolbar Tag jetzt. Also dachte ich, ich würde es geben.

Dieses Layout ist ziemlich einfach zu erreichen, besonders mit dem neuen Design Support Library.

Implementierung

Die Wurzel Ihrer Hierarchie müssen die CoordinatorLayout sein.

sich nach den docs:

Kinder eines CoordinatorLayout kann einen Anker haben. Diese Ansichts-ID muss einem beliebigen Nachkommen des CoordinatorLayout entsprechen, aber ist möglicherweise nicht das verankerte Kind selbst oder ein Nachkomme des verankerten Kindes. Dies kann verwendet werden, um schwebende Ansichten relativ zu anderen beliebigen Inhaltsbereichen zu platzieren.

Also werden wir dies verwenden, um die FloatingActionButton, wo es hingehört zu positionieren.

Der Rest ist ziemlich einfach. Wir werden eine vertikale LinearLayout verwenden, um den Toolbar, Textcontainer, Registerkartencontainer und dann ViewPager zu positionieren. Also, das vollständige Layout wie folgt aussieht:

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

Es gibt nicht viel mehr zu addieren, die einzige andere Sache, die ich erwähnen möchte, ist, wie die TabLayout zu verwenden.Wenn Sie ein ViewPager wie wir verwenden sind, dann würden Sie wahrscheinlich eine der zwei nennen:

• TabLayout.setTabsFromPagerAdapter
• TabLayout.setupWithViewPager

Hinweise

ich nur irgendwie eyeballed die Dimensionen, versuchen, das Bild so viel wie möglich anzupassen.

Ergebnisse