web-dev-qa-db-ja.com

マージンなしでカスタムレイアウトをActionBar / Toolbarに追加する

カスタムの高さツールバーを作成したいのですが、コンテンツを追加するまで問題なく機能します。次に、コンテンツが戻る矢印とアクションバーボタンの間にあるように調整されます。

コンテンツを全幅にして、以下のようなレイアウトを作成するにはどうすればよいですか？ 「+」アイコンはツールバーの親レイアウトにある必要があると思いますか？

ドキュメントは言う：

アプリケーションは、ツールバーに任意の子ビューを追加する場合があります。それらはレイアウト内のこの位置に表示されます。子ビューのToolbar.LayoutParamsがCENTER_HORIZONTALの重力値を示している場合、他のすべての要素が測定された後、ビューはツールバーに残っている利用可能なスペース内で中央に配置しようとします。

しかし、重力を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

現在、左マージンを168に設定して実行すると、私のレイアウトは次のようになります。

enter image description herelayout

androidandroid-5.0-lollipopandroid-toolbar
19
Christer Nordvik

これでもまだサポートが必要かどうかはわかりませんが、 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つを呼び出します。

注意事項

私は、寸法をできるだけ目立たせて、できるだけ絵に合わせるようにしています。

結果

results

25
adneal