Material Design CoordinatorLayout+AppBarLayout+Toolbar+CollapsingToolbarLayout

最新推荐文章于 2025-05-28 10:50:24 发布

tony499074462

最新推荐文章于 2025-05-28 10:50:24 发布

阅读量502

点赞数

CC 4.0 BY-SA版权

分类专栏： Material 文章标签： android

本文链接：https://blog.youkuaiyun.com/tony499074462/article/details/95491085

Material 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了使用CoordinatorLayout、AppBarLayout、Toolbar和CollapsingToolbarLayout实现特定效果的方法。分析了CollapsingToolbarLayout的继承关系和功能，阐述了AppBarLayout中view的滚动触发行为，以及CollapsingToolbarLayout子视图的折叠模式，最后给出了布局文件和Activity相关代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先来看看我们要做的效果

在这里插入图片描述

这种效果我们使用 CoordinatorLayout+AppBarLayout+Toolbar+CollapsingToolbarLayout就可以把它实现出来

前面一片我们已经分析了 CoordinatorLayout+AppBarLayout+Toolba 的使用，现在我们再加上一个CollapsingToolbarLayout 折叠的效果，就可以完成上面的效果了

CollapsingToolbarLayout
在这里插入图片描述

可以看出它继承于FrameLayout ，而FrameLayout是我们正常使用的一个布局，使用FrameLayout 我们的子view会产生一个叠加的效果，它不同于LinearLayout 可以水平或者锤子摆放，那么CollapsingToolbarLayout继承于FrameLayout 那么它也就用于FrameLayout的功能

简单来说 ,CollapsingToolbarLayout是一个包装器，它包装它的子view，通常在子view中设置相应的属性，达到相应的效果，它通常作为子view被包含在AppBarLayout中，作为父容器包含子view Toolbar，下面我们用图来分析一下上图效果的布局方式

分析

在这里插入图片描述

看以看到详细的层次布局

AppBarLayout
AppBarLayout里面定义的view只要设置了app:layout_scrollFlags属性，就可以在RecyclerView滚动事件发生的时候被触发某种行为
例如我给CollapsingToolbarLayout控件设置了 app:layout_scrollFlags=“scroll|exitUntilCollapsed”
设置layout_scrollFlags保证CollapsingToolbarLayout能折叠
此刻如果没有这个属性，CollapsingToolbarLayout是不会折叠的

CollapsingToolbarLayout字面意思就是折叠toolBar。所以不用多说你一定可以想到这个东西就是完成折叠伸缩的玩意儿。
CollapsingToolbarLayout里面定义的view只要设置了app:layout_collapseMode属性，就可以控制子视图的折叠模式。那什么是折叠模式？
折叠模式分为两种：
“pin”：固定模式。在收缩的时候最后固定在顶端（例如向上滚动的时候就固定toolBar）
“parallax”：视差模式，在折叠的时候会有个视差折叠的效果。（例如向下滚动的时候就展开ImageView）

还有一点需要注意

  在CoordinatorLayout中只要是能滑动控件的都需要设置layout_behavior
   app:layout_behavior="@string/appbar_scrolling_view_behavior"

下面就贴上代码了

布局文件

<?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:id="@+id/coordinator_Layout"
                                                 android:layout_width="match_parent"
                                                 android:layout_height="match_parent"
                                                 android:fitsSystemWindows="true">

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            app:collapsedTitleTextAppearance="@style/ToolBarTitleText"
            app:contentScrim="#46a8ba"
            app:expandedTitleMarginEnd="48dp"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleTextAppearance="@style/transparentText"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <!--设置layout_scrollFlags保证CollapsingToolbarLayout能滚动-->
            <!--app:layout_scrollFlags="scroll|exitUntilCollapsed"-->

            <LinearLayout
                android:id="@+id/head_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                app:layout_collapseMode="pin"
                app:layout_collapseParallaxMultiplier="0.7">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="300dp"
                    android:background="?attr/colorPrimary"
                    android:scaleType="fitXY"
                    android:src="@mipmap/tangyan"
                    app:layout_collapseMode="parallax"
                    app:layout_scrollFlags="scroll|snap" />

            </LinearLayout>
            <!--Toolbar放在下面不然会被挡住-->
            <android.support.v7.widget.Toolbar
                android:id="@+id/tb_atf_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
        </android.support.design.widget.CollapsingToolbarLayout>


        <android.support.design.widget.TabLayout
            android:id="@+id/toolbar_tab"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_gravity="bottom"
            android:background="#ffffff"
            android:fillViewport="false"
            app:layout_scrollFlags="scroll"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabIndicatorHeight="2.0dp"
            app:tabSelectedTextColor="@color/colorAccent"
            app:tabTextColor="#151515">

            <!--指示器颜色-->
            <!-- app:tabIndicatorColor="#0835f8"-->

            <!--tab条目中字体颜色-->
            <!--app:tabSelectedTextColor="#0835f8"-->

            <android.support.design.widget.TabItem
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:icon="@mipmap/v5"/>
            <!--布局选择器-->
            <!--android:icon="@drawable/tab_selector"-->
            <android.support.design.widget.TabItem
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="头条"/>

            <android.support.design.widget.TabItem
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="社交"/>

            <android.support.design.widget.TabItem
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="直播"/>

            <android.support.design.widget.TabItem
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="嘿嘿"/>


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

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

    <android.support.v4.view.ViewPager
        android:id="@+id/main_vp_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
    <!--在CoordinatorLayout中只要是能滑动控件的都需要设置layout_behavior-->
    <!--app:layout_behavior="@string/appbar_scrolling_view_behavior"-->
</android.support.design.widget.CoordinatorLayout>

Activity

public class FloatTabActivity extends AppCompatActivity {


    private LinearLayout            headLayout;
    private AppBarLayout            appBarLayout;
    private CollapsingToolbarLayout collapsingToolbarLayout;
    private Window                  window;
    private ViewPager               viewPager;
    private ArrayList<Fragment>     fragments = new ArrayList<>();
    private TabLayout               tabLayout;
    private Banner                  banner;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test_float);
        window = getWindow();
        Toolbar toolbar = findViewById(R.id.tb_atf_toolbar);
        headLayout = findViewById(R.id.head_layout);
        appBarLayout = findViewById(R.id.app_bar_layout);
        collapsingToolbarLayout = findViewById(R.id.collapsingToolbarLayout);
        tabLayout = findViewById(R.id.toolbar_tab);
        viewPager = findViewById(R.id.main_vp_container);

        setToolbar(toolbar);

        setTitleToCollapsingToolbarLayout();


        //相互绑定，这样可以防止图标被替换
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener
                (tabLayout));
        tabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener
                (viewPager));


        //tabItem图标显示不出来
        //tabLayout.setupWithViewPager(viewPager);

        initFragments();

        viewPager.setAdapter(new FragmentsAdapter(getSupportFragmentManager(), fragments));
        viewPager.setOffscreenPageLimit(5);
    }

    private void initFragments() {
        fragments.add(new MovieFragment());
        fragments.add(new MoviesFragment());
        fragments.add(new MoviesFragment());
        fragments.add(new MoviesFragment());
        fragments.add(new MoviesFragment());


    }

    public void setToolbar(Toolbar toolbar) {
        setSupportActionBar(toolbar);

        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onBackPressed();
            }
        });
    }


    /**
     * 使用CollapsingToolbarLayout必须把title设置到CollapsingToolbarLayout上，
     * 设置到Toolbar上则不会显示
     */
    private void setTitleToCollapsingToolbarLayout() {
        appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                if (verticalOffset <= -headLayout.getHeight() / 2) {
                    collapsingToolbarLayout.setTitle("唐嫣");
                    //使用下面两个CollapsingToolbarLayout的方法设置展开透明->折叠时你想要的颜色
                    //展开和关闭 标题都设置为白色
                    collapsingToolbarLayout.setExpandedTitleColor(getResources().getColor(android.R.color.white));
                    collapsingToolbarLayout.setCollapsedTitleTextColor(getResources().getColor(R.color.white));

                    window.setStatusBarColor(getResources().getColor(R.color.fuck));
                } else {
                    collapsingToolbarLayout.setTitle("唐嫣");
                    window.setStatusBarColor(Color.TRANSPARENT);
                }
            }
        });
    }

}

对应Activity的主题，在manifest里设置

<style name="FloatActivityTheme" parent="AppTheme.NoActionBar">
    <item name="android:statusBarColor">#00000000</item>//设置状态栏透明 达到沉浸式效果
    <item name="colorPrimary">@color/white</item>
    <item name="windowNoTitle">true</item>
    <item name="colorPrimaryDark">#00000000</item>//设置状态栏透明 这里两处设置 产生的效果更好
</style>