カスタムの高さツールバーを作成したいのですが、コンテンツを追加するまで問題なく機能します。次に、コンテンツが戻る矢印とアクションバーボタンの間にあるように調整されます。
コンテンツを全幅にして、以下のようなレイアウトを作成するにはどうすればよいですか? 「+」アイコンはツールバーの親レイアウトにある必要があると思いますか?
ドキュメントは言う:
アプリケーションは、ツールバーに任意の子ビューを追加する場合があります。それらはレイアウト内のこの位置に表示されます。子ビューのToolbar.LayoutParamsがCENTER_HORIZONTALの重力値を示している場合、他のすべての要素が測定された後、ビューはツールバーに残っている利用可能なスペース内で中央に配置しようとします。
しかし、重力を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
現在、左マージンを168に設定して実行すると、私のレイアウトは次のようになります。
これでもまだサポートが必要かどうかはわかりませんが、 Android-5.0-Lollipop タグだけでなく Android-ツールバー タグを今すぐ。だから、あげようと思った。
このレイアウトは、特に新しい Design Support Library を使用すると、かなり簡単に実現できます。
実装
階層のルートは CoordinatorLayout
である必要があります。
ドキュメントに従って:
CoordinatorLayoutの子にはアンカーがある場合があります。このビューIDはCoordinatorLayoutの任意の子孫に対応している必要がありますが、アンカーされた子自体またはアンカーされた子の子孫ではない場合があります。これは、他の任意のコンテンツペインに対して相対的にフローティングビューを配置するために使用できます。
したがって、これを使用して FloatingActionButton
を配置する必要がある場所に配置します。
残りはかなり簡単です。垂直LinearLayout
を使用して、Toolbar
、テキストコンテナー、タブコンテナー、そしてViewPager
を配置します。したがって、完全なレイアウトは次のようになります。
<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>
追加することはそれほど多くありませんが、他に言及するのは TabLayout
の使い方です。私たちのようにViewPager
を使用している場合は、おそらく次の2つのうちの1つを呼び出します。
注意事項
私は、寸法をできるだけ目立たせて、できるだけ絵に合わせるようにしています。
結果