CollapsingToolbarLayout+FloatingActionButton 打造精美详情界面

太过爱你忘了你带给我的痛 2021-11-22 15:31 301阅读 0赞

> **博主声明：**
> 
> 转载请在开头附加本文链接及作者信息，并标记为转载。本文由博主 [威威喵][Link 1] 原创，请多支持与指教。
> 
> [本文首发于此][Link 2] [博主][Link 3]：[威威喵][Link 1] [|][Link 4] [博客主页][Link 5]：[https://blog.csdn.net/smile\_running][Link 5]
> 
> **感受 Material Design UI 魅力，你不能错过的 Material Design 全系列文章：**
> 
> [Material Design 之一 BottomNavigationView + ViewPager + Fragment 仿微信底部导航效果][Material Design _ BottomNavigationView _ ViewPager _ Fragment]
> 
> [Material Design 之二 Toolbar + DrawerLayout + NavigationView 实现QQ侧拉抽屉效果][Material Design _ Toolbar _ DrawerLayout _ NavigationView _QQ]
> 
> [Material Design 之三 TabLayout + ViewPager + Fragment 今日头条标题切换效果][Material Design _ TabLayout _ ViewPager _ Fragment]
> 
> [Material Design 之四 SwipeRefreshLayout + CardView + RecyclerView 精美瀑布流效果][Material Design _ SwipeRefreshLayout _ CardView _ RecyclerView]
> 
> [Material Design 之五 CoordinatorLayout + AppBarLayout 提供最佳浏览体验][Material Design _ CoordinatorLayout _ AppBarLayout]
> 
> [Material Design 之六 CollapsingToolbarLayout + FloatingActionButton 打造精美详情界面][Material Design _ CollapsingToolbarLayout _ FloatingActionButton]
> 
> [Material Design 之七 TextInputLayout+TextInputEditText 打造精美的登录界面][Material Design _ TextInputLayout_TextInputEditText]

这一篇文章可是 Material Design 大杂烩系列的重头戏，前面的几篇算是对 Material Design 的提供的几个 View 的基本使用，这一次呢，我们要把之前所使用过的几个 View 重新组合成一个精美的详情页面，使用的是 CollapsingToolbarLayout 撕裂效果NestedScrollView 滚动视图组合在一起，完成我们的详情页面的制作。

我在写这个布局界面的时候呢，一般是记不住这个属性的，什么鬼的一大堆，而且英文单词辣么辣么长，你在逗我吧，欺负我英语不好。所以呢，我一般都是写了忘，忘了再写一遍，我在写这篇文章的时候，又重新写了一遍，已经不知道是第几遍写这个界面了，反正还是记不住这几个单词。算了，下次自己来这里复制好了，机智如我。

### 1、CollapsingToolbarLayout 实现折叠效果 ###

看看我们今天要实现的效果图：

![20190724233351271.gif][]

因为这是基于我的上一篇文章：[CoordinatorLayout+AppBarLayout 提供最佳浏览体验][Material Design _ CoordinatorLayout _ AppBarLayout]

代码都是沿用之前的，我这个是一个系列的文章，要看的话，建议从第一篇开始，把代码复制下来，哈哈。这里就不再多说了，首先是我们 RecylerView 瀑布流那个页面点进去，然后到我们的动物详情界面，那么这样的话，我们就得从 RecylerView 瀑布流那个适配器中添加 item 点击事件开始了，点击事件代码很简单，如下：

@Override
        public void onBindViewHolder(@NonNull ViewHolder holder, int i) {
            Glide.with(context).load(data.get(i).get("pic")).into(holder.img);
            holder.name.setText(data.get(i).get("name").toString());
    
            Intent intent = new Intent(context, AnimalDetailActivity.class);
            intent.putExtra("pic", (Integer) data.get(i).get("pic"));
            intent.putExtra("name", (String) data.get(i).get("name"));
    
            holder.itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    context.startActivity(intent);
                }
            });
        }

这里呢，我们要把图片 id 和 动物名称给获取到，然后通过 Intent 传给详情 Activity，上面代码没什么难度。然后，我们得新建一个 AnimalDetailActivity 用于展示详情。首先写它的布局文件，这里就需要用到一个 design 包下的 CollapsingToolbarLayout 了，这个也是比较难用的，与其说难用，还不如说难记住，它的属性好长啊、好多啊。

来看我们的完整的布局代码：

<?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/appbar"
            android:layout_width="match_parent"
            android:layout_height="220dp">
    
            
            <android.support.design.widget.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar"
                app:contentScrim="#9966cc"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">
    
                <ImageView
                    android:id="@+id/img_animal_detail"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    app:layout_collapseMode="parallax" />
    
                <android.support.v7.widget.Toolbar
                    android:id="@+id/tool_bar_detail"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin" />
    
            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>
    
    
        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/img_animal_detail"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
    
            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@id/img_animal_detail">
    
                <TextView
                    android:id="@+id/tv_name_detail"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:textSize="20sp" />
            </android.support.v7.widget.CardView>
        </android.support.v4.widget.NestedScrollView>
    
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="8dp"
            android:backgroundTint="#9966cc"
            android:src="@drawable/ic_child_care_black_24dp"
            app:layout_anchor="@id/appbar"
            app:layout_anchorGravity="bottom|right"
            app:rippleColor="#a2c699" />
    
    </android.support.design.widget.CoordinatorLayout>

看上去好像有点多，而且嵌套又嵌套的，这谁记得住。哈哈，与其记住这个，还不自己复制来的快，而且记住并没什么实际意义。不过呢，我们还是要了解一下这几个 View 的嵌套情况和几个常用属性的设置，这个还是的知道的。

首先，来看它的嵌套结构，CoordinatorLayout 必须搞到最外一层，也不是说最外一层，反正是比 NestedScrollView 或 RecyclerView 大一级就可以了，因为要监听可以滚动的 view 的事件，旧得这么来。当然，你也可以给 CoordinatorLayout 包一层其他的 ViewGroup 都没什么问题的。

其次呢，AppBarLayout 要与 NestedScrollView 或 RecyclerView 平级，不平级也可以在 NestedScrollView 外面包 ViewGroup，只要能滑动就 Ok

最后这个 FloatingActionButton 放哪都没什么关系，就是一个定义了 style 的 button，放在这里应该比较好看，而且可以配合 AppBarLayout 的消失和显示行为。

NestedScrollView 下面的一个属性 **app:layout\_behavior="@string/appbar\_scrolling\_view\_behavior"** 用来联动 AppBarLayout 的行为，在我们上篇文章也具体讲了它的作用：[CoordinatorLayout+AppBarLayout 提供最佳浏览体验][Material Design _ CoordinatorLayout _ AppBarLayout]

CollapsingToolbarLayout 下面由这个属性 **app:layout\_scrollFlags="scroll|exitUntilCollapsed"** ，而 CollapsingToolbarLayout 是一个折叠效果的 View，它折叠后就和 Toolbar 一样了。折叠的话，反正我是很难用语言表述，看这个效果图就知道了：

![20190725113525297.gif][]

**app:layout\_scrollFlags="scroll|exitUntilCollapsed" 指定了**  NestedScrollView 关联的滑动的一系列行为组合，scroll 表示手指往上滑动时，AppBarLayout 中的图片会隐藏起来，**exitUntilCollapsed 表示它隐藏起来后，把 Toolbar 显示出来，并且停留在那里。**这个用语言难以描述，还是自己看看效果更容易懂。

CollapsingToolbarLayout 下面还有一个 **app:contentScrim="\#9966cc" 表示折叠后 Toolbar 显示的颜色，这里就传入颜色值可以了，简单明了。**

还有两个比较重要的属性，一个是 Toolbar 下面的 **app:layout\_collapseMode="pin" 折叠模式，这个意思指** Toolbar 在折叠过程中位置保持不变。

另一个是 ImageView 下面的 **app:layout\_collapseMode="parallax"** 属性，表示折叠过程中产生错位效果，一般都设置为这一种，可以让图片在折叠过程中持续的错位，效果就是感觉图片在上滑动的时候被挤压了，压扁了一样。

### 2、适应到状态栏上 ###

那么，到这一步的话，我们的 CollapsingToolbarLayout 的基本使用就已经掌握了，不过有一点还是可以优化的，比如看上面的效果图，状态栏那里始终是一篇绿绿的，即使再好看的图片也都被它影响了。

所以呢，我们要对它进行优化一下，让图片占到状态栏上面，效果会更好的。首先，我们是在 Activity 上面进行展示的，所以我们可以利用 Activity 的 theme 属性，把状态栏给透明化了，代码就是在 style 文件下面添加这样一个样式：

然后，在 manifest 中给需要的 Activity 设置样式主题：

然后，运行一下是这样的效果：

![20190725115610750.gif][]

这里的话，已经给状态栏设置了透明颜色了。不过还有一个至关重要的属性没有设置，那就是：

android:fitsSystemWindows="true"

它的意思是，适应到状态栏中。所以，我们要在布局文件中添加这样的一个属性，才能保证 View 也被适应到状态栏上。因为 View 是一层一层的，所以要从外面的一个个写上，一直到我们的 ImageView ，这样的话就可以让图片跑上去了。效果如下：

![2019072512020012.gif][]

这样的话，就比之前好看多了，而且状态栏还会根据滑动行为自己变。

### 3、FloatingActionButton 浮动按钮 ###

最后呢，我们看一个控件叫 FloatingActionButton，其实与普通 button 也没上面区别了，用法简单。如下面这样：

<android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="8dp"
            android:backgroundTint="#9966cc"
            android:src="@drawable/ic_child_care_black_24dp"
            app:layout_anchor="@id/appbar"
            app:layout_anchorGravity="bottom|right"
            app:rippleColor="#a2c699" />

app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom|right"

上面两个属性配合起来设置 FloatingActionButton 的位置，就是在 appbar 的 底部 | 右边，很好理解吧，还有要修改它的默认颜色的话，如下：

*  android:backgroundTint="\#9966cc" // 修改背景颜色
 *  app:rippleColor="\#a2c699" // 修改被点击时的颜色

被点击效果是这样的：  
![20190725120849429.gif][]

好了，到此为此，已经把这个效果都实现了，看起来确实是一个非常 nice 的界面。

### 4、共享元素动画 ###

还不够炫酷？好吧，我们给它加上一个过渡动画吧，其动画效果是共享元素的形式。不会没事，我之前有写过一篇 Activity 过渡动画的文章，一看就会了：**[Activity 过渡动画 — 让切换更加炫酷][Activity _ _]**

不过呢，接下来你只需要这样做就可以了。第一步，要添加两个属性，告知两个不同的界面里面谁是需要共享的，像上面这个情况，我们当然是图片拿来当共享元素了，因为两个界面的图片是一样的。所以，要在 RecyclerView 的 item 布局文件中的 ImageView 控件加一条属性代码：

android:transitionName="shared"

并且，在开启的详情页面 Activity 布局中的 ImageView 也同样加上这句代码。然后就需要修改我的 strarActivity 的方式了，因为是点击 item 启动详情 Activity 的，所以修改适配器的点击事件，代码如下：

关键代码是 Activity 的启动代码被我们修改了：

>     context.startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(activity,
>             Pair.create(holder.img, "shared")).toBundle());

代码就不解释了，可以看 **[Activity 过渡动画 — 让切换更加炫酷][Activity _ _] 我的这篇文章。**

这样的话，我们的元素共享动画就添加成功了，来看看效果吧：

![20190725130658762.gif][]

好了，就是这种切换效果，两个图片会进行共享的切换，对比之前的一点动画都没有的效果，又上升了不少体验。除了共享元素动画，还有其他几种动画也可以使用，我就不再多说了，可以看我之前的那篇文章，自己尝试吧。

[Link 1]: https://me.csdn.net/smile_Running
[Link 2]: https://blog.csdn.net/smile_Running/column/info/27169
[Link 3]: https://blog.csdn.net/smile_Running/column/info/27335
[Link 4]: https://blog.csdn.net/smile_Running/column/info/42011
[Link 5]: https://blog.csdn.net/smile_running
[Material Design _ BottomNavigationView _ ViewPager _ Fragment]: https://blog.csdn.net/smile_Running/article/details/96428330
[Material Design _ Toolbar _ DrawerLayout _ NavigationView _QQ]: https://blog.csdn.net/smile_Running/article/details/96985403
[Material Design _ TabLayout _ ViewPager _ Fragment]: https://blog.csdn.net/smile_Running/article/details/97013299
[Material Design _ SwipeRefreshLayout _ CardView _ RecyclerView]: https://blog.csdn.net/smile_Running/article/details/97113256
[Material Design _ CoordinatorLayout _ AppBarLayout]: https://blog.csdn.net/smile_Running/article/details/97137955
[Material Design _ CollapsingToolbarLayout _ FloatingActionButton]: https://blog.csdn.net/smile_Running/article/details/97183522
[Material Design _ TextInputLayout_TextInputEditText]: https://blog.csdn.net/smile_Running/article/details/97260032
[20190724233351271.gif]: /images/20211122/0794b53ca78d44f1ba8beb0d4c88edac.png
[20190725113525297.gif]: /images/20211122/9bb257af0b1e4d37b29a2750a56a6504.png
[20190725115610750.gif]: /images/20211122/c749bb75ec0445a393c3ddb6fe8b1bb0.png
[2019072512020012.gif]: /images/20211122/b3a9d2d1e9044d7080c0d8899b011819.png
[20190725120849429.gif]: /images/20211122/3ebccef608dc40efbc23b8e401f5dc8c.png
[Activity _ _]: https://blog.csdn.net/smile_Running/article/details/88181312
[20190725130658762.gif]: /images/20211122/a35800d3891448b58e05fab71f22ace3.png