可折叠式标题栏 - CollapsingToolbarLayout

发表于 | 分类于 | | 阅读次数 | 浏览 次

一、简介

  • 我们现在的标题栏基本都是使用 Toolbar 来实现的，但是并没有规定标题栏的样式，我们可以根据自己的喜好来实现不同样式的标题栏。

  • CollapsingToolbarLayout 是一个作用于 Toolbar 基础之上的布局，它可以让 Toolbar 的效果变得更加绚丽。本次实现一个可折叠式标题栏

二、可折叠式标题栏的实现

注意： CollapsingToolbarLayout 是不能独立存在的，它只能作为 AppBarLayout 的直接子布局来使用，而 AppBarLayout 必须是 CoordinateLayout 的子布局，所以我们就用 CoordinateLayout 作为最外层布局样式

2.1 页面的布局文件如下所示：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<?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.support.design.widget.AppBarLayout
        android:id="@+id/appbarlayout"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:fitsSystemWindows="true">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingtoolbarlayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
            <!--app:layout_collapseMode="parallax",指定当前控件在折叠过程中的折叠模式-->
            <ImageView
                android:id="@+id/imageview"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />
            <!--标题栏-->
            <!--app:layout_collapseMode="pin"，表示折叠过程中位置始终保持不变-->
            <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.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <!--NestedScrollView 内部只允许有一个子布局-->
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="15dp"
                android:layout_marginTop="35dp"
                app:cardCornerRadius="4dp">
                <TextView
                    android:id="@+id/textview_card"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="10dp" />
            </android.support.v7.widget.CardView>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
    <!--FloatingActionButton-->
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/floating"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/floating_icon"
        app:fabSize="normal"
        app:layout_anchor="@id/appbarlayout"
        app:layout_anchorGravity="bottom|end"
        app:pressedTranslationZ="10dp"
        app:rippleColor="@color/colorAccent" />
</android.support.design.widget.CoordinatorLayout>

布局分析：

  • 最外层是 CooldinatorLayout，其下有三个直接子布局，分别是 AppBarLayout 、NestedScrollView 、 FloatingActionButton

  • AppBarLayout 下有一个直接子布局 CollapsingToolbarLayout ，其下有两个控件，ImageView 和 Toolbar 

1
2
3
4
5
6
7
<android.support.design.widget.AppBarLayout
        android:id="@+id/appbarlayout"
        android:layout_width="match_parent"
        // 250 dp 视觉效果好，当然并不是固定的
        android:layout_height="250dp"
        //是为了状态栏的适配
        android:fitsSystemWindows="true">
1
2
3
4
5
6
7
8
9
10
11
12
13
<android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingtoolbarlayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            //这个主题本来是给 Toolbar 的，为了实现效果放到父布局中了
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            //设置 趋于折叠以及折叠之后的颜色
            app:contentScrim="@color/colorPrimary"
            //scroll 表示标题栏会跟着下方的 NestedScrollView 一起滚动
            //exitUntilCollapsed 表示折叠之后，标题栏保留在界面上，而不是移出屏幕
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            //这个主题也是给 toolbar 设置的
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ImageView
                android:id="@+id/imageview"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                //指定折叠模式， parallax 表示折叠过程中会产生一定的错位偏移，视觉效果好
                app:layout_collapseMode="parallax" />
            <!--标题栏-->
            <!--app:layout_collapseMode="pin"，表示折叠过程中位置始终保持不变-->
            <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.v7.widget.Toolbar>

  • NestedScrollView 也是要求只能有一个直接子布局，要想放东西多，就在外层加个大布局。

  • FloatingActionButton 属性介绍

1
2
3
4
5
6
7
8
9
10
11
12
13
<android.support.design.widget.FloatingActionButton
        android:id="@+id/floating"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/floating_icon"
        app:fabSize="normal"
        //设定一个锚点，意思就是 FloatingActionButton 会显示在 appbarlayout 中
        app:layout_anchor="@id/appbarlayout"
        //将悬浮按钮定位在标题栏区域的右下角
        app:layout_anchorGravity="bottom|end"
        app:pressedTranslationZ="10dp"
        app:rippleColor="@color/colorAccent" />
2.2 对应的 Activity 中的代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
public class MyRecyclerViewItemDetailActivity extends AppCompatActivity {
    @BindView(R.id.imageview)
    ImageView imageview;
    @BindView(R.id.toolbar)
    Toolbar toolbar;
    @BindView(R.id.collapsingtoolbarlayout)
    CollapsingToolbarLayout collapsingtoolbarlayout;
    @BindView(R.id.appbarlayout)
    AppBarLayout appbarlayout;
    @BindView(R.id.textview_card)
    TextView textviewCard;
    @BindView(R.id.floating)
    FloatingActionButton floating;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my_recycler_view_item_detail);
        ButterKnife.bind(this);
        Intent intent = getIntent();
        String titleName = intent.getStringExtra("titleName");
        //设置透明状态栏
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            WindowManager.LayoutParams localLayoutParams = getWindow().getAttributes();
            localLayoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | localLayoutParams.flags);
        }
        setSupportActionBar(toolbar);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            //显示标题栏左侧导航图标
            actionBar.setDisplayHomeAsUpEnabled(true);
        }
        actionBar.setTitle(titleName);
//        imageview.setImageResource(R.drawable.cardview_icon);
        Glide.with(this).load(R.drawable.cardview_icon).into(imageview);
        textviewCard.setText(ContentData(titleName));
    }
    /**
     * 虚构的 TextView 要显示的数据
     * @param titleName
     * @return
     */
    private String ContentData(String titleName) {
        StringBuffer buffer = new StringBuffer();
        for (int i = 0;i < 500;i++){
            buffer.append(titleName);
        }
        return buffer.toString();
    }
}

说明： 设置的逻辑是，一个 RecyclerView 的条目点击事件，通过 Intent 传递数据到这个页面，然后展示对应的条目详情。

2.3 显示效果如下所示：

设备： Android 4.4

image

image

image