CollapsingToolbarLayout-可折叠式标题栏

一、简介

  • 我们现在的标题栏基本都是使用 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
image
image
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,588评论 6赞 496
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,456评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,146评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,387评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,481评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,510评论 1赞 293
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,522评论 3赞 414
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,296评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,745评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,039评论 2赞 330
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,202评论 1赞 343
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,901评论 5赞 338
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,538评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,165评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,415评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,081评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,085评论 2赞 352

推荐阅读更多精彩内容