像谷歌游戏商店一样折叠工具栏布局

Posted 2023-04-18

【中文标题】像谷歌游戏商店一样折叠工具栏布局

【英文标题】：collapsing toolbar layout like google play store

【发布时间】：2015-12-10 18:01:50

【问题描述】：

我想制作一个像 google play 商店那样的折叠工具栏布局。像这样： 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_
    android:layout_
    android:focusableInTouchMode="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_
        android:layout_
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/seffafCollapsingToolbarLayout"
            android:layout_
            android:layout_
            app:expandedTitleMarginEnd="164dp"
            app:expandedTitleMarginStart="148dp"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed">

            <ImageView
                android:id="@+id/header"
                android:layout_
                android:layout_
                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_
                android:layout_
                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_
        android:layout_
        android:scrollbars="vertical"
        android:clickable="true"
        android:background="@color/mainBackground"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

【问题讨论】：

Overlap scrolling view with AppBarLayout的可能重复

【参考方案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_
    android:layout_>


    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_
        android:layout_
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_
            android:layout_
            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_
                android:layout_
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_
                android:layout_
                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_
        android:layout_
        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);
    

我希望这能解决您的问题。如果您需要进一步的帮助，请告诉我！！！

【讨论】：

好的，您的代码可以正常工作，但唯一不工作的是状态栏。 Google Play 商店在工具栏折叠之前一直是透明的，如何实现这种行为？

当我只向下滚动时如何使文本可见？

【参考方案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_
android:layout_
android:focusableInTouchMode="true">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appBarLayout"
    android:layout_
    android:layout_
    android:fitsSystemWindows="true">

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

        <ImageView
            android:id="@+id/header"
            android:layout_
            android:layout_
            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_
            android:layout_
            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_
    android:layout_
    android:scrollbars="vertical"
    android:clickable="true"
    android:background="@color/mainBackground"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

【讨论】：

我是不是你说：sendvid.com/1k8ukqse 但我不想要。我想要就像 google play store 的工具栏一样。在我的应用程序中，工具栏是图像的一部分，但在 google play 中，工具栏不是图像的一部分，它是绿色的。我认为应该有两个工具栏：透明的；将在显示图像时显示。第二个（绿色的）；将在未显示图像时显示并向下滚动。但我不知道该怎么做。

将 app:contentScrim="?attr/colorPrimary" 添加到您的折叠工具栏布局中。实现这个效果不需要两个工具栏。

@tongluencheah with contentscrim 颜色primary 的高度大于工具栏的高度。我也在寻找与 Playstore 完全一样的行为。 colorprimary 的高度应该与工具栏的高度完全相同，然后如果进一步向下滚动应该可以看到图像。

我有标签布局。所以它与工具栏标题和汉堡图标重叠。有什么建议吗？

【参考方案3】：

我实现了如下所示。我找不到更好的解决方案。

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_
    android:layout_
    android:fitsSystemWindows="true"
    app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

    <ImageView
        android:layout_
        android:layout_
        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_
        android:layout_
        app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>

`

【讨论】：

这完全符合 Play 商店的预期滚动功能。如果有人期待确切的功能，那么应该接受这个答案谢谢@isudansh

有没有办法添加滚动状态栏？

【参考方案4】：

我尝试了几乎所有的答案来获得相同的功能，但经过一些调整后它就可以工作了。

它的工作方式类似于 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_
    android:layout_
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_
        android:layout_
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_
            android:layout_
            android:fitsSystemWindows="true"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
            app:titleEnabled="false">

            <ImageView
                android:id="@+id/banner"
                android:layout_
                android:layout_
                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_
                android:layout_
                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_
        android:layout_
        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>

将此代码添加到 Activity 的 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 以禁用折叠标题效果

我希望这对寻找相同行为的人有用。

请告诉我结果如何。干杯！

【参考方案5】：

这是我的实现

布局代码

<android.support.design.widget.AppBarLayout
    android:id="@+id/appBarLayout"
    android:layout_
    android:layout_
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsingToolbarLayout"
        android:layout_
        android:layout_
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">


        <ImageView
            android:id="@+id/img"
            android:layout_
            android:layout_
            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_
            android:layout_
            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_
    android:layout_
    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>");

【参考方案6】：

只需在CollapsingToolbarLayout中添加波纹标签

app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"

并删除ImageView中的上述相同标签，那里不需要。

它的工作原理就像你在 google play 中看到的那样

希望这对某人有帮助:)