使用CoordinatorLayout打造一个炫酷的详情页

古城微笑少年丶 2022-07-13 08:16 200阅读 0赞

原文链接：[http://www.jianshu.com/p/5287d090e777][http_www.jianshu.com_p_5287d090e777]

开发中如果能恰当的使用material design的一些设计，不仅能让你的APP更炫酷，最重要的是开发起来easy多了。这里介绍下material design里一个很重要的控件：CoordinatorLayout，以及配合其子view的一些用法。

我们在创建Activity的时候，有一个Activity模板叫Scrolling Activity，它实现的就是简单的可折叠工具栏，我们在创建Activity的时候选择此模板，然后并不需要添加任何代码，跑起来就是下图的样子，有没有很漂亮。这个模板一般来说比较适用于App的详情页，比如商品详情，个人详情，视频详情之类的。

![Scrolling Activity.gif][]

<?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:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context="test.com.scrollactivity.ScrollingActivity">
    
        <android.support.design.widget.AppBarLayout android:id="@+id/app_bar" android:fitsSystemWindows="true" android:layout_height="@dimen/app_bar_height" android:layout_width="match_parent" android:theme="@style/AppTheme.AppBarOverlay">
    
            <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/toolbar_layout" android:fitsSystemWindows="true" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_scrollFlags="scroll|exitUntilCollapsed" app:contentScrim="?attr/colorPrimary">
    
                <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_height="?attr/actionBarSize" android:layout_width="match_parent" app:layout_collapseMode="pin" app:popupTheme="@style/AppTheme.PopupOverlay" />
    
            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>
    
        <include layout="@layout/content_scrolling" />
    
        <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="@dimen/fab_margin" app:layout_anchor="@id/app_bar" app:layout_anchorGravity="bottom|end" android:src="@android:drawable/ic_dialog_email" />
    
    </android.support.design.widget.CoordinatorLayout>

这是上面布局引用的NestedScrollView

<?xml version="1.0" encoding="utf-8"?>
    <android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:showIn="@layout/activity_scrolling" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="test.com.scrollactivity.ScrollingActivity">
    
        <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="@dimen/text_margin" android:text="@string/large_text" />
    
    </android.support.v4.widget.NestedScrollView>

我们先对上面出现的这些布局控件做个简单的介绍吧，估计多数同学会觉得比较陌生。

## **CoordinatorLayout** ##

CoordinatorLayout，音：靠迪内特雷奥特；意：协调者布局。它是support.design包中的控件，所以使用的时候要导入compile ‘com.android.support:design:23.3.0’包。简单来说，CoordinatorLayout是用来协调其子view并以触摸影响布局的形式产生动画效果的一个super-powered FrameLayout，其典型的子View包括：FloatingActionButton，SnackBar。注意：CoordinatorLayout是一个顶级父View。

## **AppBarLayout** ##

AppBarLayout是一个实现了很多材料设计特性的垂直的LinearLayout，它能响应滑动事件。必须在它的子view上设置app:layout\_scrollFlags属性或者是在代码中调用setScrollFlags()设置这个属性。这个类的特性强烈依赖于它是否是一个CoordinatorLayout的直接子view，如果不是，那么它的很多特性不能够使用。AppBarLayout需要一个具有滑动属性的兄弟节点view，并且在这个兄弟节点View中指定behavior属性为AppBarLayout.ScrollingViewBehavior的类实例，可以使用一个内置的string表示这个默认的实例@string/appbar\_scrolling\_view\_behavior。

AppBarLayout的子布局有5种滚动标识(上面代码CollapsingToolbarLayout中配置的app:layout\_scrollFlags属性)：

scroll：所有想滚动出屏幕的view都需要设置这个flag， 没有设置这个flag的view将被固定在屏幕顶部。  
enterAlways：这个flag让任意向下的滚动都会导致该view变为可见，启用快速“返回模式”。  
enterAlwaysCollapsed：假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。  
exitUntilCollapsed：当你定义了一个minHeight，此布局将在滚动到达这个最小高度的时候折叠。  
snap：当一个滚动事件结束，如果视图是部分可见的，那么它将被滚动到收缩或展开。例如，如果视图只有底部25%显示，它将折叠。相反，如果它的底部75%可见，那么它将完全展开。

## **CollapsingToolbarLayout** ##

CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar，它继承自FrameLayout，给它设置layout\_scrollFlags，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在响应layout\_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。CollapsingToolbarLayout可以通过app:contentScrim设置折叠时工具栏布局的颜色，通过app:statusBarScrim设置折叠时状态栏的颜色。默认contentScrim是colorPrimary的色值，statusBarScrim是colorPrimaryDark的色值。

CollapsingToolbarLayout，音：克莱普辛。  
CollapsingToolbarLayout的子布局有3种折叠模式（Toolbar中设置的app:layout\_collapseMode）

off：默认属性，布局将正常显示，无折叠行为。  
pin：CollapsingToolbarLayout折叠后，此布局将固定在顶部。  
parallax：CollapsingToolbarLayout折叠时，此布局也会有视差折叠效果。  
当CollapsingToolbarLayout的子布局设置了parallax模式时，我们还可以通过app:layout\_collapseParallaxMultiplier设置视差滚动因子，值为：0~1。

## **NestedScrollView** ##

在新版的support-v4兼容包里面有一个NestedScrollView控件，这个控件其实和普通的ScrollView并没有多大的区别，这个控件其实是Meterial Design中设计的一个控件，目的是跟MD中的其他控件兼容。应该说在MD中，RecyclerView代替了ListView，而NestedScrollView代替了ScrollView，他们两个都可以用来跟ToolBar交互，实现上拉下滑中ToolBar的变化。在NestedScrollView的名字中其实就可以看出他的作用了，Nested是嵌套的意思，而ToolBar基本需要嵌套使用。

## **FloatingActionButton** ##

FloatingActionButton就比较简单了，就是一个漂亮的按钮，其本质是一个ImageVeiw。有一点要注意，Meterial Design引入了海拔（或者说高度）的概念，就是所有的view都有了高度，他们像贴纸一样，一层一层贴在手机屏幕上，而FloatingActionButton的海拔最高，它贴在所有view的最上面，没有view能覆盖它。

## **Behavior** ##

Behavior是Android新出的Design库里新增的布局概念。Behavior只有是CoordinatorLayout的直接子View才有意义。只要将Behavior绑定到CoordinatorLayout的直接子元素上，就能对触摸事件（touch events）、window insets、measurement、layout以及嵌套滚动（nested scrolling）等动作进行拦截。Design Library的大多功能都是借助Behavior的大量运用来实现的。当然，Behavior无法独立完成工作，必须与实际调用的CoordinatorLayout子视图相绑定。具体有三种方式：通过代码绑定、在XML中绑定或者通过注释实现自动绑定。上面NestedScrollView中app:layout\_behavior=”@string/appbar\_scrolling\_view\_behavior”的Behavior是系统默认的，我们也可以根据自己的需求来自定义Behavior。

但实际的开发中，详情页NestedScrollView中不可能只简单的包了一个TextView，那样的话产品经理也太便宜你了，这么大片的区域呢，怎么着也要来个列表吧，一个不够，给我放仨，可以左右切换。于是乎真正的详情页做出来可能是这个样子的。那所以我们可能还要在上面的代码基础上做些修改，FloatingActionButton就不要了，NestedScrollView和RecyclerView一块用据说是有问题的，但我这里很明显是需要一个Viewpager，然后里面放几个Fragment，Fragment里放一个RecyclerView完事。Tab指示栏呢就用系统自带的TabLayout，这个控件也在design包里，最新的design包甚至还贴心的提供了TabLayout的子View：TabItem，开发真的是变得越来越easy了。

![strip][]

贴一下上图的Layout

<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:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context="com.example.administrator.myapplication.MainActivity">
    
            <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/collapsing_toolbar_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:collapsedTitleTextAppearance="@style/ToolBarTitleText" app:contentScrim="#46a8ba" app:expandedTitleMarginEnd="48dp" app:expandedTitleMarginStart="48dp" app:expandedTitleTextAppearance="@style/transparentText" app:layout_scrollFlags="scroll|exitUntilCollapsed" android:fitsSystemWindows="true">
    
                    <LinearLayout android:id="@+id/login_layout" android:layout_width="match_parent" android:layout_height="240dp" android:background="@mipmap/profile_bg" android:orientation="vertical" android:paddingBottom="10dp" app:layout_collapseMode="pin" app:layout_collapseParallaxMultiplier="0.7">
    
                            <de.hdodenhof.circleimageview.CircleImageView android:id="@+id/head_img" android:layout_width="60dp" android:layout_height="60dp" android:layout_marginTop="60dp" android:layout_centerInParent="true" android:layout_gravity="center" android:src="@mipmap/ic_launcher" app:border_color="@android:color/white" app:border_width="2dp" />
                            <TextView android:id="@+id/nick_name" android:layout_width="match_parent" android:layout_height="wrap_content" android:ellipsize="end" android:gravity="center" android:maxLength="24" android:text="Star" android:layout_marginTop="10dp" android:singleLine="true" android:textColor="#ffffff" android:textSize="14sp"/>
    
                            <TextView android:id="@+id/sign" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:ellipsize="end" android:gravity="center" android:maxLength="70" android:maxLines="2" android:text="吹牛逼的都是年轻人" android:textColor="#ffffff" android:textSize="14sp" android:visibility="visible"/>
                        </LinearLayout>
    
                    <android.support.v7.widget.Toolbar android:id="@+id/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="?attr/actionBarSize" android:layout_gravity="bottom" android:background="#ffffff" android:fillViewport="false" app:layout_scrollFlags="scroll" app:tabIndicatorColor="#0835f8" app:tabIndicatorHeight="2.0dp" app:tabSelectedTextColor="#0835f8" app:tabTextColor="#ced0d3">
    
                    <android.support.design.widget.TabItem android:layout_width="match_parent" android:layout_height="match_parent" android:text="A" />
    
                    <android.support.design.widget.TabItem android:layout_width="match_parent" android:layout_height="match_parent" android:text="B" />
    
                    <android.support.design.widget.TabItem android:layout_width="match_parent" android:layout_height="match_parent" android:text="C" />
    
                </android.support.design.widget.TabLayout>
            </android.support.design.widget.AppBarLayout>
    
            <android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ffffff" app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
    
        </android.support.design.widget.CoordinatorLayout>

需要代码的自取：[GitHub][]

有同学希望能加上下拉刷新，上拉加载，其实也是简单的。我们还是用SwipeRefreshLayout吧。但我们现在面临一个问题，这个SwipeRefreshLayout加在哪？我见过案例是把SwipeRefreshLayout做为顶级View包在CoordinatorLayout的外面，我觉得这个做法还是很糟糕的，首先CoordinatorLayout推荐做为顶级View使用，现在又在外面套了个刷新，不伦不类的；其次，如上面的案例就会出现一个SwipeRefreshLayout会对应三个子列表的刷新，处理起来还是麻烦。我们是不是可以把SwipeRefreshLayout套在ViewPager外面呢？也是可以的，但还是麻烦。我们就把下拉刷新这件事交给Fragment自己来做好了。

<?xml version="1.0" encoding="utf-8"?>
    <android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/swipeLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">
            <android.support.v7.widget.RecyclerView android:id="@+id/list_view" android:layout_width="match_parent" android:layout_height="match_parent"/>
    </android.support.v4.widget.SwipeRefreshLayout>

完了效果就是酱婶滴，至于上拉加载也是很easy了，后面有时间换个主题再谈loadingmore！

![strip 1][]

[http_www.jianshu.com_p_5287d090e777]: http://www.jianshu.com/p/5287d090e777
[Scrolling Activity.gif]: /images/20220713/36c4639adc9846898734b3f2e602b612.png
[strip]: /images/20220713/fb33399c4c1c4d97a2ce874f8e7164f3.png
[GitHub]: https://github.com/stayinxing/CoordinatorLayout
[strip 1]: /images/20220713/fdae0d8c7857456885e0ecf6db650606.png