CollapsingToolbarLayout-可折叠式标题栏

2017-10-10 本文已影响0人珞神

一、简介

我们现在的标题栏基本都是使用 Toolbar 来实现的，但是并没有规定标题栏的样式，我们可以根据自己的喜好来实现不同样式的标题栏。
CollapsingToolbarLayout 是一个作用于 Toolbar 基础之上的布局，它可以让 Toolbar 的效果变得更加绚丽。本次实现一个可折叠式标题栏

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

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

2.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: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

<android.support.design.widget.AppBarLayout
        android:id="@+id/appbarlayout"
        android:layout_width="match_parent"
        // 250 dp 视觉效果好，当然并不是固定的
        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"
            //这个主题本来是给 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">

<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 属性介绍

<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 中的代码：

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