グーグルプレイストアのような折りたたみツールバーレイアウト

Question

グーグルプレイストアのような折りたたみツールバーレイアウトを作りたいです。このように： https://sendvid.com/ugjspx8r

これが私のレイアウトです： http://sendvid.com/s4mx3xem

新しいAndroidサポートライブラリでそれを行うにはどうすればよいですか？

これが私のレイアウトxmlファイルです：

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

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

        <Android.support.design.widget.CollapsingToolbarLayout
            Android:id="@+id/seffafCollapsingToolbarLayout"
            Android:layout_width="match_parent"
            Android:layout_height="240dp"
            app:expandedTitleMarginEnd="164dp"
            app:expandedTitleMarginStart="148dp"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed">

            <ImageView
                Android:id="@+id/header"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
                Android:src="@drawable/haber_icerik_resim"
                Android:fitsSystemWindows="true"
                Android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <Android.support.v7.widget.Toolbar
                Android:id="@+id/haber_toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="?attr/actionBarSize"
                app:theme="@style/ToolbarColoredBackArrow"
                app:layout_collapseMode="pin"
                app:layout_scrollFlags="scroll|enterAlways"/>

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



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


    <Android.support.v7.widget.RecyclerView
        Android:id="@+id/newsRecyclerView"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:scrollbars="vertical"
        Android:clickable="true"
        Android:background="@color/mainBackground"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

Answer 1

これが作業コードです。必要なものです。

<?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:id="@+id/main_content"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">


    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/appbar"
        Android:layout_width="match_parent"
        Android:layout_height="@dimen/detail_backdrop_height"
        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|enterAlways|enterAlwaysCollapsed">

            <ImageView
                Android:id="@+id/backdrop"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:fitsSystemWindows="true"
                Android:scaleType="centerCrop"
                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:layout_scrollFlags="scroll|enterAlways|snap"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

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

    <fragment
        Android:name="com.support.Android.designlibdemo.CheeseListFragment"
        class="com.support.Android.designlibdemo.CheeseListFragment"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

そしてここにアクティビティがあります

public class SampleActivity extends AppCompatActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_sample);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }
}

これで問題が解決することを願っています。さらにサポートが必要な場合はお知らせください!!!

Answer 2

CollapsingToolbarLayout内を表示するには、app：layout_scrollFlagsを設定する必要はありません。無効。私のコードに基づいて、CollapsingToolbarLayoutのapp：layout_scrollFlagsを「app：layout_scrollFlags = "scroll | enterAlways | enterAlwaysCollapsed」に変更し、minHeightを設定します。

ツールバーは「ピン」であるため、下にスクロールすると、enterAlwaysCollapsedによってツールバーが呼び出されます。

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

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

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:id="@+id/seffafCollapsingToolbarLayout"
        Android:layout_width="match_parent"
        Android:layout_height="240dp"
        Android:minHeight="?attr/actionBarSize"
        app:expandedTitleMarginEnd="164dp"
        app:expandedTitleMarginStart="148dp"
        app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

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

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/haber_toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            app:theme="@style/ToolbarColoredBackArrow"
            app:layout_collapseMode="pin"/>

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

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


<Android.support.v7.widget.RecyclerView
    Android:id="@+id/newsRecyclerView"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:scrollbars="vertical"
    Android:clickable="true"
    Android:background="@color/mainBackground"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

Answer 3

同じ機能を得るためにほとんどすべての答えを試しましたが、少し調整しただけで機能しました。

ツールバーのタイトルが折りたたまれて非表示になっている場合にのみ表示されるPlayStoreと同様に機能します。

これがレイアウトです

<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:fitsSystemWindows="true">

    <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/AppTheme.AppBarOverlay">

        <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="@color/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
            app:titleEnabled="false">

            <ImageView
                Android:id="@+id/banner"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:src="@drawable/image"
                Android:fitsSystemWindows="true"
                Android:scaleType="centerCrop"
                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.AppBarLayout>

    <!--Add your views here-->
    <Android.support.v7.widget.RecyclerView
        Android:id="@+id/recycler_view"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:clipToPadding="false"
        Android:fadeScrollbars="true"
        Android:paddingTop="10dp"
        Android:scrollbarStyle="insideOverlay"
        Android:scrollbars="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

このコードをアクティビティのonCreateメソッドに追加します

private Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
private AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar);
appBarLayout = (AppBarLayout) findViewById(R.id.appbar);
    appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
            if (verticalOffset <= -appBarLayout.getTotalScrollRange() + toolbar.getHeight()) {
                //Toolbar Collapsed
                toolbar.setTitle("Your title here");
            } else {
                //Toolbar Expanded
                toolbar.setTitle(" ");
            }
        }
    });

注意すべき点はほとんどありません

• 背景をツールバーに設定しないでください。設定すると、ビューと重なってしまいます。
• contentScrim属性は、折りたたみ時にツールバーの色を処理します
• タイトルの折りたたみ効果を無効にするには、titleEnabled属性をfalseに設定します

これが同じ振る舞いを探している人々に役立つことを願っています。

それがどのように機能するか教えてください。乾杯！

Answer 4

以下に示すようにこれを実装しました。これ以上の解決策は見つかりませんでした。

public enum State {
    EXPANDED,
    COLLAPSED,
}
mCurrentState = State.EXPANDED; 
 Boolean toolbarIsTransparent = true;
// Calculate ActionBar height
    TypedValue tv = new TypedValue();
    int actionBarHeight = 0;
    if (mContext.getTheme().resolveAttribute(Android.R.attr.actionBarSize, tv, true)) {
        actionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data, getResources().getDisplayMetrics());
    }

    AppBarLayout appBarLayout = (AppBarLayout) rootView.findViewById(R.id.appbar_layout);
    final CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) rootView.findViewById(R.id.collapsible_toolbar);
    if (appBarLayout != null) {
        final int finalActionBarHeight = actionBarHeight;
        appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int i) {
                if (i == 0) {
                    mCurrentState = State.EXPANDED;
                } else if (Math.abs(i) >= appBarLayout.getTotalScrollRange()) {
                    mCurrentState = State.COLLAPSED;
                }
                if ((collapsingToolbarLayout.getHeight() + i <= finalActionBarHeight) && mCurrentState.equals(State.COLLAPSED)) {
                    toolbar.setBackgroundColor(ContextCompat.getColor(mContext, R.color.colorPrimary));
                    toolbarIsTransparent = false;
                } else if (!toolbarIsTransparent) {
                    mCurrentState = State.EXPANDED;
                    toolbar.setBackgroundColor(ContextCompat.getColor(mContext, Android.R.color.transparent));
                    toolbarIsTransparent = true;
                }
            }
        });
    }

xmlコードは `です

<Android.support.design.widget.CollapsingToolbarLayout
    Android:id="@+id/collapsible_toolbar"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true"
    app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

    <ImageView
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:fitsSystemWindows="true"
        Android:orientation="vertical"
        Android:src="@drawable/image"
        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"/>
</Android.support.design.widget.CollapsingToolbarLayout>

`

Answer 5

これが私の実装です

レイアウトコード

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

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


        <ImageView
            Android:id="@+id/img"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:fitsSystemWindows="true"
            Android:scaleType="centerCrop"
            Android:layout_gravity="center_horizontal|top"
            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:theme="@style/ThemeOverlay.AppCompat.Light" />

    </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:clipToPadding="false"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <!-- YOUR LAYOUT CODE --->

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


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

Javaコード

onCreateView内

if (toolbar != null) {
            ((AppCompatActivity)getActivity()).setSupportActionBar(toolbar);
            ((AppCompatActivity)getActivity()).getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        }

//コード内

img.setImageResource(R.drawable.img1);
collapsingToolbarLayout.setTitle("<TITLE>");

Answer 6

CollapsingToolbarLayoutに次のタグを追加するだけです

app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"

ImageViewで上記の同じタグを削除します。ここでは必要ありません。

そしてそれはあなたがグーグルプレイで見るようにexacltyで動作します

これが誰かに役立つことを願っています:)