web-dev-qa-db-ja.com

CollapsingToolbarLayout内のツールバーでTabLayoutを使用する方法は？

chrisbanes/cheesesquare を見て、CollapsingToolbarLayout内にツールバーのあるTabLayoutを配置しようとしています。

<Android.support.design.widget.CoordinatorLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/main_content"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true">

    <Android.support.v4.view.ViewPager
        Android:id="@+id/viewpager"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/appbar"
        Android:layout_width="match_parent"
        Android:layout_height="@dimen/detail_backdrop_height"
        Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        Android:fitsSystemWindows="true">

        <Android.support.design.widget.CollapsingToolbarLayout
            Android:id="@+id/collapsing_toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:background="@color/primary_dark"
            Android:minHeight="150dip"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            Android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginBottom="60dp"
            app:expandedTitleMarginEnd="64dp">

            <ImageView
                Android:id="@+id/backdrop"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:scaleType="centerCrop"
                Android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax" />

            <Android.support.v7.widget.Toolbar
                Android:id="@+id/toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="110dip"
                Android:layout_gravity="top"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

            <Android.support.design.widget.TabLayout
                Android:id="@+id/tabs"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:layout_gravity="bottom"/>

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

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

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

CollapsingToolbarを開くと、次のようになります。まさに私が探しているものです。

enter image description here

しかし、（画像を引き上げて）折りたたむと、このようなものが表示されます

enter image description here

これは、タブとツールバーのタイトルが重複するデフォルト設定のままにすると、ツールバーの高さが110dipになるように設定したためです。そのため、ツールバーのタイトルがアプリバーの適切な場所に配置され、タブレイアウトがその下になるように、適切な方法を探しています。これを達成する方法はありますか？

androidmaterial-designandroid-toolbarandroid-design-library
37
Todor Grudev

これが私がこれをどうにかしてできた方法です、私はそれが最良の解決策であるとは思いませんが、誰かがより良い方法を見つけたなら、答えを投稿してください。

<Android.support.design.widget.CoordinatorLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/main_content"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true">

    <Android.support.v4.view.ViewPager
        Android:id="@+id/viewpager"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/appbar"
        Android:layout_width="match_parent"
        Android:layout_height="@dimen/detail_backdrop_height"
        Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        Android:fitsSystemWindows="true">

        <Android.support.design.widget.CollapsingToolbarLayout
            Android:id="@+id/collapsing_toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="206dip"
            Android:background="@color/primary_dark"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            Android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginBottom="20dp"
            app:expandedTitleMarginEnd="64dp">

            <ImageView
                Android:id="@+id/backdrop"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:scaleType="centerCrop"
                Android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax" />

            <Android.support.v7.widget.Toolbar
                Android:id="@+id/toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />
        </Android.support.design.widget.CollapsingToolbarLayout>

        <Android.support.design.widget.TabLayout
            Android:id="@+id/tabs"
            Android:layout_width="match_parent"
            Android:layout_height="50dip"
            app:tabGravity="center"
            app:tabMode="scrollable"
            Android:gravity="bottom"/>
    </Android.support.design.widget.AppBarLayout>
</Android.support.design.widget.CoordinatorLayout>
22
Todor Grudev

純粋なAndroidソリューションを見つけることを試みてから2日が経ちました。これが私のソリューションです。

ターゲット：両方のビューの背後に画像の背景があるツールバーの下のタブ

（TL; DR：添付XMLを参照）

私が達成したい動作は、CollapsingToolbarLayoutとTabLayoutを画像の上に配置し、「ヘッダー」を上にスクロール（画面外）してから、 ActionBar（ツールバー）の下にTabLayoutがあります。

問題：

CollapsingToolbarLayoutは、ToolbarビューとTabLayoutは、CollapsingToolbarLayoutの外側に配置する必要がありますが、AppBarLayoutの内側に配置する必要があります。画面およびToolbarの下。問題は、CollapsingToolbarLayout内に配置されたImageViewがTabLayoutしかし、その上に垂直に。

解決策：

この問題を解決するには、ImageViewをより高くして、TabLayoutをCollapsingToolbarLayoutの内側に配置する必要があります。それ。ただし、TabLayoutをCollapsingToolbarLayoutの外側に配置したため、ImageView親ビュー（CollapsingToolbarLayout）が短くても描画されます。 clipChildren = "false"救助へ！ clipChildrenは、ViewGroupに、子ビューがサイズよりも大きい場合は子ビューをクリップしないように指示するため、本質的にはImageView背が高く、それでもTabLayoutの下に描画されます。このようにして、CollapsingToolbarLayoutとTabLayoutの両方をNiceイメージの上に配置できます！

My Layout xml：

<?xml version="1.0" encoding="utf-8"?>

<Android.support.design.widget.AppBarLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:clipChildren="false" /////IMPORTANT!!!!!!
    Android:theme="@style/AppTheme.AppBarOverlay">

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:id="@+id/toolbar_layout"
        Android:layout_width="match_parent"
        Android:layout_height="200dp"
        Android:clipChildren="false"  /////IMPORTANT!!!!!!
        Android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        >

        <ImageView
            Android:layout_width="match_parent"
            Android:layout_height="200dp"
            Android:scaleType="centerCrop"
            Android:src="@drawable/poster"
            app:layout_collapseMode="parallax" />

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/AppTheme.PopupOverlay" />
    </Android.support.design.widget.CollapsingToolbarLayout>

    <Android.support.design.widget.TabLayout
        Android:id="@+id/main_tabs"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        app:tabMode="scrollable" />
</Android.support.design.widget.AppBarLayout>


<include layout="@layout/content_main" />
22
Alexandros Ioannou

AppBarLayoutはLinearLayoutを拡張するため、2つのCollapsingToolBarLayouts（FrameLayoutを拡張）を含めることができます。私がやったのは、最初のCollapsingToolBarLayoutに、表示したくないコンテンツを格納し、AppBarLayoutフラグを付けたことです。

app：layout_scrollFlags = "scroll | exitUntilCollapsed"

実際にタブを持つ2番目のCollapsingToolbarLayoutの場合、スクロールフラグを次のように設定します。

app：layout_scrollFlags = "scroll | enterAlways"

最終的なXMLは次のようになり、必要なものが得られます。

    <?xml version="1.0" encoding="utf-8"?>
<Android.support.design.widget.CoordinatorLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical">

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

    <Android.support.design.widget.AppBarLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content">

        <Android.support.design.widget.CollapsingToolbarLayout
            Android:id="@+id/collapsing_toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginBottom="@dimen/quadruple_margin"
            app:layout_collapseParallaxMultiplier="0.7"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <RelativeLayout
                Android:id="@+id/header_view"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:animateLayoutChanges="true"
                Android:background="@color/black_40">

                <!-- YOUR CONTENT HERE -->

            </RelativeLayout>

            <Android.support.v7.widget.Toolbar
                Android:id="@+id/action_bar"
                Android:layout_width="match_parent"
                Android:layout_height="@dimen/abc_action_bar_default_height_material"
                app:contentInsetLeft="@dimen/triple_margin"
                app:contentInsetStart="@dimen/triple_margin"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/Theme.AppCompat.NoActionBar"
                app:theme="@style/Theme.AppCompat.NoActionBar" />
        </Android.support.design.widget.CollapsingToolbarLayout>

        <Android.support.design.widget.CollapsingToolbarLayout
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways">

            <Android.support.design.widget.TabLayout
                Android:id="@+id/tabs"
                Android:layout_width="match_parent"
                Android:layout_height="48dp"
                Android:layout_gravity="bottom"
                Android:layout_marginTop="@dimen/half_margin"
                app:layout_scrollFlags="enterAlways"
                app:tabBackground="@color/transparent"
                app:tabGravity="center"
                app:tabMode="scrollable"
                app:tabSelectedTextColor="@color/white"
                app:tabTextColor="@color/grey_400" />
        </Android.support.design.widget.CollapsingToolbarLayout>
    </Android.support.design.widget.AppBarLayout>
</Android.support.design.widget.CoordinatorLayout>
14
Tunji_D

私はこれを作成しました sample CollapsingToolbarLayout内でTabLayoutを使用するプロジェクト

API 14-23でテスト済み。問題なく動作します。

7
Vito Valov

透明なTabLayoutバックグラウンドで動作する簡単な解決策を見つけました。

  • expandedTitleMarginBottomでCollapsingToolbarLayoutを使用して、拡張タイトルが重複しないようにしますTabLayout
  • セットする layout_heightからTabLayoutへの定数値
  • 追加 layout_marginBottomからToolbarへの値はTabLayoutlayout_height
<Android.support.design.widget.AppBarLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content">

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        app:expandedTitleMarginBottom="70dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <YourMagicViewWithBackgroundImageTextAndOtherStuff
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            app:layout_collapseMode="parallax" />

        <Android.support.v7.widget.Toolbar
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_marginBottom="50dp"
            app:layout_collapseMode="pin" />

        <Android.support.design.widget.TabLayout
            Android:layout_width="match_parent"
            Android:layout_height="50dp"
            Android:layout_gravity="bottom" />

    </Android.support.design.widget.CollapsingToolbarLayout>
</Android.support.design.widget.AppBarLayout>
5
sosite

このコードXMLを使用

<?xml version="1.0" encoding="utf-8"?>
<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">

<Android.support.design.widget.AppBarLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:fitsSystemWindows="true"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:id="@+id/collapse_toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="250dp"
        Android:fitsSystemWindows="true"
        app:contentScrim="@color/PrimaryColor"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            Android:id="@+id/img"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:background="@drawable/background_material"
            Android:fitsSystemWindows="true"
            Android:scaleType="fitXY"
            app:layout_collapseMode="parallax" />

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="100dp"
            Android:gravity="top"
            Android:minHeight="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:titleMarginTop="15dp"/>



        <Android.support.design.widget.TabLayout
            Android:id="@+id/tabsInLogin"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            Android:layout_gravity="bottom"
            app:tabIndicatorHeight="2dp"
            app:tabIndicatorColor="@Android:color/white" />

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

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

<Android.support.v4.view.ViewPager
    Android:id="@+id/viewpagerDetail"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

Javaコード

  collapsingToolbarLayout =    (CollapsingToolbarLayout)findViewById(R.id.collapse_toolbar);
    collapsingToolbarLayout.setTitleEnabled(false);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    getSupportActionBar().setTitle(cheeseName);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
2
Ramesh Singh

ソースコード付きの新しいマテリアルデザインサポートライブラリの例を使用したタブ付きの折りたたみツールバー

新しいマテリアルデザインサポートライブラリの公式の折りたたみツールバー機能を使用しました。

ここで折りたたまれたビューの高さは256dpで、タブの高さは56dpです

次のパスを作成し、折りたたまれたビュー用とタブ用の2つの部分に画像をカットしました。

dp to pixel 高解像度ドローアブルxxxhdpiのサイズに従って画像を切り取り、すべての画面サイズに調整できるようにドローアブルフォルダーに入れます

2000x1246の画像があります

トップ画像256dp = 2000x1024ピクセル

下部タブ画像56dp = 2000x224ピクセル

ソースコード の完全な例を次に示します

enter image description here

2
nirav kalola

これを行うための私の考えはここにあります。

AppBarの外側にタブレイアウトを配置し、垂直線形レイアウトでラップして、このように位置を設定します

<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="80dp"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom"
    Android:orientation="vertical">

<Android.support.design.widget.TabLayout
    Android:id="@+id/tabDetail"
    Android:layout_width="match_parent"
    Android:layout_height="40dp"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
</LinearLayout>

別の2倍の高さのレイアウトでTabLayoutをラップしない場合。 layout_anchorをAppBarに設定すると、TabLayoutの半分のみがAppBarになります。

これが私のXMLファイル全体です。

<Android.support.design.widget.CoordinatorLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:id="@+id/main_content"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:fitsSystemWindows="true">

<Android.support.v4.view.ViewPager
    Android:id="@+id/viewpagerDetail"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<Android.support.design.widget.AppBarLayout
    Android:id="@+id/appbar"
    Android:layout_width="match_parent"
    Android:layout_height="@dimen/detail_backdrop_height"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    Android:fitsSystemWindows="true">

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:id="@+id/collapsing_toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        Android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginBottom="54dp">

        <ImageView
            Android:id="@+id/backdrop"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:scaleType="centerCrop"
            Android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax" />

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="100dp"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin" />

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

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

<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="80dp"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom"
    Android:orientation="vertical">

<Android.support.design.widget.TabLayout
    Android:id="@+id/tabDetail"
    Android:layout_width="match_parent"
    Android:layout_height="40dp"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
</LinearLayout>

これらのdp値のセットが画面サイズに適合するかどうかはわかりませんが、私の場合は適合します。誰かがより良い答えを持っている場合は共有してください。

私のコードや英語を間違えたらごめんなさい。ありがとう！

1
Boonya Kitpitak

私は同様の問題を抱えていたので、私の解決策は途方もなく簡単でした。ツールバーをサポートアクションバーとして設定するだけで済みました（Theme.NoActionBarスタイルベース）

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
1
Supreme Dolphin

ツールバー>下部のマージンを48dpに設定し、layout_heightを？attr/actionBarSizeに設定

<Android.support.design.widget.CoordinatorLayout
xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:id="@+id/main_content"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:fitsSystemWindows="true">

<Android.support.v4.view.ViewPager
    Android:id="@+id/viewpager"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<Android.support.design.widget.AppBarLayout
    Android:id="@+id/appbar"
    Android:layout_width="match_parent"
    Android:layout_height="@dimen/detail_backdrop_height"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    Android:fitsSystemWindows="true">

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:id="@+id/collapsing_toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:background="@color/primary_dark"
        Android:minHeight="150dip"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        Android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginBottom="60dp"
        app:expandedTitleMarginEnd="64dp">

        <ImageView
            Android:id="@+id/backdrop"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:scaleType="centerCrop"
            Android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax" />

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            Android:layout_gravity="top"
            Android:layout_marginBottom="38dp"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin" />

        <Android.support.design.widget.TabLayout
            Android:id="@+id/tabs"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_gravity="bottom"/>

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

</Android.support.design.widget.AppBarLayout>
0
Chew Kok
<?xml version="1.0" encoding="utf-8"?>
<ui.screen.ProfileView
    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.support.design.widget.CoordinatorLayout
        Android:id="@+id/content"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:orientation="vertical">

        <Android.support.v4.view.ViewPager
            Android:id="@+id/profile_viewpager"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

        <Android.support.design.widget.AppBarLayout
            Android:id="@+id/profile_appbar_layout"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:background="@Android:color/transparent"
            app:elevation="2dp">

            <Android.support.design.widget.CollapsingToolbarLayout
                Android:id="@+id/collapsing_toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                app:contentScrim="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                app:expandedTitleTextAppearance="@Android:color/transparent"
                app:elevation="2dp">

                <LinearLayout
                    Android:id="@+id/profile_user_layout"
                    Android:layout_width="match_parent"
                    Android:layout_height="192dp"
                    Android:background="?attr/colorPrimary"
                    Android:clipChildren="false"
                    Android:clipToPadding="false"
                    Android:orientation="vertical"
                    Android:paddingBottom="24dp"
                    Android:paddingLeft="24dp"
                    Android:paddingRight="24dp"
                    Android:paddingTop="64dp"
                    app:layout_collapseMode="parallax">

                    <LinearLayout
                        Android:layout_width="match_parent"
                        Android:layout_height="wrap_content"
                        Android:clipChildren="false"
                        Android:orientation="horizontal">

                        <FrameLayout
                            Android:layout_width="96dp"
                            Android:layout_height="96dp"
                            Android:clipChildren="false">

                            <de.hdodenhof.circleimageview.CircleImageView
                                Android:id="@+id/profile_user_photo"
                                Android:layout_width="86dp"
                                Android:layout_height="86dp"
                                Android:src="@mipmap/ic_launcher"
                                app:border_width="1dp"
                                app:border_color="@color/white" />

                            <View
                                Android:id="@+id/profile_user_medal"
                                Android:layout_width="24dp"
                                Android:layout_height="24dp"
                                Android:background="@drawable/medal"
                                Android:layout_marginRight="6dp"
                                Android:layout_marginTop="2dp"
                                Android:layout_gravity="top|right" />

                        </FrameLayout>

                        <LinearLayout
                            Android:id="@+id/profile_user_details"
                            Android:layout_width="wrap_content"
                            Android:layout_height="wrap_content"
                            Android:layout_weight="1"
                            Android:orientation="vertical"
                            Android:layout_marginLeft="16dp">

                            <TextView
                                Android:id="@+id/profile_user_name"
                                Android:layout_width="match_parent"
                                Android:layout_height="wrap_content"
                                Android:text="Kateřina Bíla"
                                Android:textColor="@color/white"
                                Android:textSize="24sp" />

                            <TextView
                                Android:id="@+id/profile_user_completed_activities"
                                Android:layout_width="match_parent"
                                Android:layout_height="wrap_content"
                                Android:text="Dokoncene 4 z 5"
                                Android:textColor="@color/white"
                                Android:textSize="16sp" />

                            <LinearLayout
                                Android:layout_width="match_parent"
                                Android:layout_height="wrap_content"
                                Android:orientation="horizontal">

                                <TextView
                                    Android:id="@+id/profile_user_progress_text"
                                    Android:layout_width="wrap_content"
                                    Android:layout_height="wrap_content"
                                    Android:textSize="20sp"
                                    Android:textColor="@color/white"
                                    Android:text="50%" />

                                <com.rey.material.widget.ProgressView
                                    Android:id="@+id/profile_user_progress_bar"
                                    Android:layout_width="match_parent"
                                    Android:layout_height="6dp"
                                    Android:visibility="visible"
                                    Android:layout_gravity="center_vertical"
                                    Android:layout_marginLeft="8dp"
                                    Android:paddingRight="16dp"
                                    app:pv_progressMode="determinate"
                                    app:pv_circular="false"
                                    app:pv_autostart="true"
                                    app:lpd_strokeSize="3dp"
                                    app:lpd_strokeColor="@color/red"
                                    app:lpd_strokeSecondaryColor="@color/white"
                                    app:lpd_maxLineWidth="62dp"
                                    app:lpd_minLineWidth="31dp"
                                    app:pv_progressStyle="@style/ProfileTotalProgressBar"
                                    app:pv_progress="0.5" />


                            </LinearLayout>


                        </LinearLayout>
                    </LinearLayout>


                </LinearLayout>

                <include layout="@layout/toolbar" />

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

            <FrameLayout
                Android:layout_width="match_parent"
                Android:layout_height="48dp"
                app:elevation="2dp">

                <Android.support.design.widget.TabLayout
                    Android:id="@+id/profile_tab_layout"
                    Android:layout_width="match_parent"
                    Android:layout_height="48dp"
                    Android:layout_gravity="top"
                    Android:background="?attr/colorPrimary"
                    app:tabTextColor="@color/white_87"
                    app:tabGravity="fill"
                    app:tabIndicatorColor="@color/white"
                    app:tabIndicatorHeight="4dp"
                    app:tabMode="fixed"
                    app:tabSelectedTextColor="@color/white"
                    app:tabTextAppearance="@style/TabTextAppearance"
                    app:elevation="2dp" />

            </FrameLayout>

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

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

</ui.screen.ProfileView>

これは私のために動作しますが、API 19+を搭載したデバイスでのみ

0
Lubos Mudrak

上記のコードはすべて、「CollapsingtoolbarLayout」コンポーネントのみを折りたたみます。つまり、「ViewPager」コンテンツのページをスクロールすると、機能しません。

「ViewPager」を「FrameLayout」に置き換えます。これが機能するようになりました。

Viewpagerのページをスクロールすると、「CollapsingToolbarLayout」がリッスンするはずです。このために、「NestedScrollView」を使用しました。しかし、問題は「ViewPager」が「NestedScrollView」で機能しないことです。

だからついにFrameLayoutで達成しました。

しかし、問題は「tabLayout.setOnTabSelectedListener（new TabLayout.OnTabSelectedListener（）{」が廃止されたことです

<Android.support.design.widget.CoordinatorLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <!--<Android.support.v4.view.ViewPager
        Android:id="@+id/viewPager"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />-->

    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/appbar"
        Android:layout_width="match_parent"
        Android:layout_height="250dp"
        Android:fitsSystemWindows="true"
        >

        <Android.support.design.widget.CollapsingToolbarLayout
            Android:id="@+id/collapsing_toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            >

            <ImageView
                Android:id="@+id/backdrop"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:fitsSystemWindows="true"
                Android:scaleType="centerCrop"
                Android:visibility="gone"
                Android:src="@drawable/srl_mallikaarjuna_lrg"
                app:layout_collapseMode="parallax"

                />


            <Android.support.v7.widget.Toolbar
                Android:id="@+id/toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="?attr/actionBarSize"
                >
                <RelativeLayout
                    Android:layout_width="match_parent"
                    Android:layout_height="match_parent">
                    <TextView
                        Android:layout_width="match_parent"
                        Android:layout_height="match_parent"
                        Android:gravity="center_horizontal|center_vertical"
                        Android:text="Calendar"/>
                </RelativeLayout>

            </Android.support.v7.widget.Toolbar>

            <Android.support.design.widget.TabLayout
                Android:id="@+id/tab_layout"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:layout_gravity="bottom"
              >

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

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

    </Android.support.design.widget.AppBarLayout>
    <Android.support.v4.widget.NestedScrollView

    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:background="#fefefe"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

  <FrameLayout
      Android:layout_width="match_parent"
      Android:layout_height="match_parent"
      Android:id="@+id/frame_container">

  </FrameLayout>

</Android.support.v4.widget.NestedScrollView>


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

ViewPagerを使用しないでTablayoutを作成する： http://www.theappguruz.com/blog/easy-way-to-create-tab-layout-in-Android-without-viewpager

0
Kona Suresh
<Android.support.design.widget.AppBarLayout
    Android:id="@+id/appbar"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:fitsSystemWindows="true"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" >

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        Android:fitsSystemWindows="true"
        Android:minHeight="?attr/actionBarSize" >

        <include layout="@layout/YOUR-CONTENT-LAYOUT" />

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:layout_scrollFlags="scroll|enterAlways"
            Android:fitsSystemWindows="false"
            app:contentScrim="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    </Android.support.design.widget.CollapsingToolbarLayout>
</Android.support.design.widget.AppBarLayout>

<LinearLayout
    Android:layout_width="fill_parent"
    Android:layout_height="wrap_content"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    Android:orientation="vertical" >

    <Android.support.design.widget.TabLayout
        Android:id="@+id/tabs"
        Android:layout_width="match_parent"
        Android:layout_height="48dp"
        app:layout_scrollFlags="scroll"
        Android:background="@color/primary_color" />

    <Android.support.v4.view.ViewPager
        Android:id="@+id/viewpager"
        Android:layout_width="fill_parent"
        Android:layout_height="fill_parent" />
</LinearLayout>
0
Hemanth

以下のコードは、ツールバーの展開/折りたたみアクションを実装します。

基本的には
CoordinatorLayout（FrameLayout）
AppBarLayout（スタッフデザインの機能の多くを実装する垂直LinearLayout）、
CollapsingToolbarLayout（ツールバーのラッパーです）
ImageViewとツールバー

<Android.support.design.widget.AppBarLayout
    Android:id="@+id/appbar"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:fitsSystemWindows="true"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <Android.support.design.widget.CollapsingToolbarLayout
        Android:id="@+id/collapsing_toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">


        <ImageView
            Android:id="@+id/header"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:background="@drawable/logo"
            Android:minHeight="300dp"
            Android:scaleType="centerCrop"
            app:layout_collapseMode="parallax" />

        <Android.support.v7.widget.Toolbar xmlns:Android="http://schemas.Android.com/apk/res/Android"
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            Android:minHeight="?attr/actionBarSize"
            app:layout_collapseMode="pin" />


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


<Android.support.design.widget.TabLayout
            Android:id="@+id/tabs"
            Android:layout_width="match_parent"
            Android:layout_height="50dip"
            app:tabGravity="center"
            app:tabMode="scrollable"
            Android:gravity="bottom"/>

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


    <FrameLayout
        Android:id="@+id/fr_container_home"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

Observation
- FrameLayout is necessary app: layout_behavior = "@string/appbar_scrolling_view_behavior"
-TOOLBAR Not need backgroud, insert the color in the attribute app:contentScrim = "?Attr/ColorPrimary" from our CollapsingToolbarLayout

あなたのクラスで

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
mCollapsingToolbarLayout = (CollapsingToolbarLayout)findViewById(R.id.collapsing_toolbar);
mCollapsingToolbarLayout.setTitle("YourTitle");
setSupportActionBar(toolbar);
0
vrbsm

前に誰かが指摘したように、これは次の理由によるものです（ドキュメントから）。

ナビゲーションボタンは、設定されている場合、ツールバーの最小の高さ内で垂直に配置されます。

したがって、初期レイアウトに基づいて、次のようなことができます。

<Android.support.design.widget.CollapsingToolbarLayout
            Android:id="@+id/collapsing_toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:background="@color/primary_dark"
            Android:minHeight="150dip"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            Android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginBottom="60dp"
            app:expandedTitleMarginEnd="64dp">

            <ImageView
                Android:id="@+id/backdrop"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:scaleType="centerCrop"
                Android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax" />

             <Android.support.design.widget.TabLayout
                Android:id="@+id/tabs"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:layout_height="?actionBarSize"
                Android:layout_gravity="bottom"/>

            <Android.support.v7.widget.Toolbar
                Android:id="@+id/toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="110dip"
                Android:layout_gravity="top"
                app:titleMarginTop="13dp"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

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

App：titleMarginTopは、ツールバーのサイズからTabLayoutのサイズからテキストのサイズを引いた値を取得するために必要な間隔で、きれいに整列する必要があります。

0
AllDayAmazing

AppLayoutの外側にTabLayoutを配置し、LinePage内でViewPagerとTabLayoutをラップしました。

<Android.support.design.widget.AppBarLayout
    Android:id="@+id/appbar"
    Android:layout_width="match_parent"
    Android:layout_height="210dp"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    Android:background="@color/profile_header_bg_color"
    Android:fitsSystemWindows="true">

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:id="@+id/collapsing_toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        Android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        Android:background="@color/profile_header_bg_color">

        <ImageView
            Android:layout_width="match_parent"
            Android:paddingTop="60dp"
            Android:layout_height="210dp"
            Android:background="@color/profile_header_bg_color"
            Android:id="@+id/user_details"
            Android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax" />

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            app:theme="@style/ThemeOverlay.AppCompat.Light"
            Android:background="@color/profile_header_bg_color"
            app:layout_collapseMode="pin"/>

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

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

<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" >

    <Android.support.design.widget.TabLayout
        Android:id="@+id/tabs"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content" />

    <Android.support.v4.view.ViewPager
        Android:id="@+id/viewpager"
        Android:layout_width="match_parent"
        Android:layout_height="fill_parent" />
</LinearLayout>
0
user1942887