Material Design总结

太过爱你忘了你带给我的痛 2022-07-13 03:20 224阅读 0赞

本文作为《第一行代码》第2版第12章的学习笔记，所有内容均为自己阅读实践后的总结思考。

**郭神在本章描述了Material Design提供的9个控件所呈现出来的一些UI效果，这些控件都是综合运用才能展现出最佳效果，类似于武术一样，一招一式的威力始终有限，而融会贯通之后才会展现出巨大威力。本文打算学习郭神，先描述出具体的控件，然后对各个控件的效果（不会讲解所有属性，只针对部分属性做讲解）做总结，以加深印象学为己用。**

1.  自定义ActionBar——Toolbar；
2.  类似于ViewGroup的专用滑动菜单——DrawerLayout；
3.  DrawerLayout控件下的滑动View——NavigationView；
4.  立体效果的悬浮按钮——FloatingActionButton;
5.  智能的加强版FrameLayout——CoordinatorLayout；
6.  卡片式布局——CardView;
7.  封装好滚动事件的LinerLayout——AppBarLayout;
8.  官方下载刷新控件——SwipeRefreshLayout；
9.  Toolbar助手——CollapsingToolbarLayout.

**工欲善其事必先利其器，所以我们得先做一些准备工作。首先得依赖一些库，后文中得用，如下：**

//版本号不一定非得25，但是android包下面的版本号必须一致
    //ToolBar需要
    compile 'com.android.support:appcompat-v7:25.0.1'
    //Recyclerview需要
    compile 'com.android.support:recyclerview-v7:25.0.1'
    
    //Material Design库
    compile 'com.android.support:design:25.0.1'
    //圆形图片
    compile 'de.hdodenhof:circleimageview:2.1.0'
    
    //卡片布局
    compile 'com.android.support:cardview-v7:25.0.1'
    //图片加载
    compile 'com.github.bumptech.glide:glide:3.7.0'

接下来，我们开始研究看见的使用

**1.自定义ActionBar——Toolbar：**

在引用ActionBar的Activity里面，我们首先得选一个没有ActionBar的主题，这样才能把Toolb设置为ActionBar。如果我们设置一个有ActionBar的主题，然后我们继续添加ActionBar控件到xml布局，代码如下：

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_test" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="cn.com.vicent.thesecondlneofcode.downloadutil.TestActivity">
    
        <android.support.v7.widget.Toolbar android:id="@+id/action_bar" android:layout_width="match_parent" android:layout_height="?actionBarSize" android:background="?attr/colorPrimary"/>
    
        <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="点击测试" android:onClick="doClick"/>
    </LinearLayout>

然后你会看见加载效果如图：

![这里写图片描述][SouthEast]

如果我们将ToolBar设置为ActionBar的话就会报错：java.lang.IllegalStateException: This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE\_SUPPORT\_ACTION\_BAR and set windowActionBar to false in your theme to use a Toolbar instead.

所以正确引用ToolBar应该是先选择将Activity的主题选择为一个NoActionBar的主题，如图：

![这里写图片描述][SouthEast 1]  
![这里写图片描述][SouthEast 2]

不要以为这样就OK了，既然是自定义的，总得给Android交代一声，让它将Toolb设置为ActionBar吧？否则就是这样的效果：

![这里写图片描述][SouthEast 3]

你也许会疑问：就是这个效果啊，没有发现什么异常呢？但是你看见Title了吗？ActionBar会默认一个App名称为Title，但是这里并没有。所以我们需要一行代码将Toolbar设置为ActionBar：

setSupportActionBar(toolbar);

现在效果就正常了！

![这里写图片描述][SouthEast 4]

当然，我们还可以支持标题居中，但是这种方法的适配就不是很好了！！

![这里写图片描述][SouthEast 5]

xml代码：

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/activity_test" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">
    
        <android.support.v7.widget.Toolbar android:id="@+id/action_bar" android:layout_width="match_parent" //Toolbar高度等于ActionBar的高度 android:layout_height="?actionBarSize" //背景颜色为系统的colorPrimary android:background="?attr/colorPrimary" //刚刚的主题设置为标题深色，此处将Toolbar的主题也设置为同一个颜色 android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" //弹出菜单项为淡色主题，与主题内容一致 app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
            <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:gravity="center" android:text="@string/app_name" android:textSize="24sp" android:textColor="#fff"/>
        </android.support.v7.widget.Toolbar>
    
        <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="点击测试" android:onClick="doClick"/>
    </LinearLayout>

app属性是因为Material Design是5.0系统才出现的，之前的系统并不存在。为了兼容5.0以前的系统，所以这里会使用这种方式来使用Material Design的一些属性，后文同理。  
ToolBar添加菜单和ActionBar菜单完全一致，这里就不再赘述了！

**2.类似于ViewGroup的专用滑动菜单——DrawerLayout：**

把这段对于DrawerLayout看完以后，我想起了当年弘神写的[高仿QQ5.0 侧滑菜单效果][QQ5.0]，其实这个很相似，只是官方写的用起来更方便一些而已。在用之前，先看看原文的介绍：  
所谓的滑动菜单就是将一些菜单选项隐藏起来，而不是放置在主频幕上，然后可以通过滑动的方式将菜单显示出来。这种方式既节省了屏幕空间，又实现了非常好的动画效果，是Material Design中推荐的做法”；用法：“首先它是一个布局，在布局中允许放两个直接子控件，第一个子控件是主屏幕中显示的内容，第二个控件是滑动菜单中显示的内容

接下来看看布局：

运行效果：

![这里写图片描述][SouthEast 6]

结合上面的介绍及用法，然后看看运行效果，应该也知道怎么用了。这里需要强调的是菜单选项这个控件的layout\_gravity属性是必须指定的，因为DrawerLayout需要知道它应该在什么时候出现？是从屏幕的左边出现还是右边出现？也可指定start或者end，让系统判断系统语言是从左边开始还是右边开始，从而决定滑动从左边出现还是右边出现。  
写好以后滑动屏幕的左边缘（因为我上面已经指定了是从屏幕左边显示）,菜单就出来了，如上图。当我们点击菜单外面，菜单就会关闭。这些动画都是很流畅。当然了，这些也可通过java代码实现打开关闭：

@Override
        public boolean onCreateOptionsMenu(Menu menu) {
            getMenuInflater().inflate(R.menu.test_menu,menu);
            //返回true则显示菜单，否则不显示
            return true;
        }
    
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
            if(item.getItemId()==R.id.menu){
                //打开菜单
               drawerLayout.openDrawer(GravityCompat.START);
    
            }
            //测试返回true与返回false都没有关系
            return true;
        }
    
    
        public void doClick(View view){
            //关闭菜单
            drawerLayout.closeDrawers();
        }

布局也很简单，主要是一个菜单，一个button，如下：

test\_menu.xml

<?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">
    
        <item android:id="@+id/menu" android:icon="@mipmap/ic_menu" android:title="Backup" app:showAsAction="always"/>
    
    </menu>

布局：

代码非常简单，这里没有什么好解释的了！

**3.DrawerLayout控件下的滑动View——NavigationView：**

这个控件其实就是将NavigationView分为头部和选择项两部分，后者应该是一个LinerLayout，前者是一个消息头。个人感觉并没有什么高明的地方，但是既然google官方推荐的控件，应该是内部做好了一定的封装。

首先准备一个菜单布局和菜单头部。  
菜单布局：nav\_menu.xml

<?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
    
        <group android:checkableBehavior="single">
            <item android:id="@+id/nav_call" android:icon="@mipmap/nav_call" android:title="Call"/>
            <item android:id="@+id/nav_friends" android:icon="@mipmap/nav_friends" android:title="Frinds"/>
            <item android:id="@+id/nav_location" android:icon="@mipmap/nav_location" android:title="Location"/>
            <item android:id="@+id/nav_mail" android:icon="@mipmap/nav_mail" android:title="Mail"/>
            <item android:id="@+id/nav_task" android:icon="@mipmap/nav_task" android:title="Task"/>
        </group>
    
    </menu>

该菜单为一组菜单，checkableBehavior为选择模式，

*  single为单选模式
 *  all为多选模式
 *  none为普通模式和一般菜单没有什么区别

然后是菜单头部：  
nav\_header.xml

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:padding="10dp" android:layout_height="180dp" android:background="?attr/colorPrimary">
    //这里是引用的第三方库的圆形图片，准备工作的时候有注释
        <de.hdodenhof.circleimageview.CircleImageView android:id="@+id/icon_image" android:layout_width="70dp" android:layout_height="70dp" android:src="@mipmap/nav_icon" android:layout_centerInParent="true"/>
    
        <TextView android:id="@+id/user_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:text="tonygreendev@gmail.com" android:textColor="#fff" android:textSize="14sp"/>
    
        <TextView android:id="@+id/mail" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@+id/user_name" android:text="Tony Green" android:textColor="#fff" android:textSize="14sp"/>
    </RelativeLayout>

将菜单布局和菜单头部准备好以后，我们可以“组装”NavigationView了，使用如下：

xml布局基本上不用注释，接下来看看java代码里面需要做些什么呢？

重写onCreate方法即可：

@Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_test);
            Toolbar toolbar = (Toolbar) findViewById(R.id.action_bar);
            setSupportActionBar(toolbar);
            drawerLayout = (DrawerLayout) findViewById(R.id.id_drawer_layout);
            NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
            navigationView.setCheckedItem(R.id.nav_call);
            navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(@NonNull MenuItem item) {
    
                    //TODO 待实现按钮点击事件
                    drawerLayout.closeDrawers();
                    //返回true则单选的状态有保存
                    //返回false则单选的状态未保存
                    return true;
                }
            });
        }

NavigationView差不多就这些内容了，至于菜单间距等进阶问题，请查阅[Android Design Support Library初探，NavigationView实践][Android Design Support Library_NavigationView]提问部分。

**4.立体效果的悬浮按钮——FloatingActionButton：**

这个按钮比较简单的，更普通的按钮的没有什么差别，只是外形设计得比较炫而已。先来看看布局怎么引用这个控件：

java使用的时候跟一般的Button完全一致，重写onCreateview方法如下：

**5.智能的加强版FrameLayout——CoordinatorLayout：**

在讲这个布局之前，先说一个由Design Support提供的提示工具——Snackbar。这个工具主要用来提示用户，并且可以再次跟用户确定的事件，比如上一个Toast：

另一个需要跟用户再次确认的情景，比如注销账户这样的事件，我们还可以这样写：

final FloatingActionButton flb = (FloatingActionButton) findViewById(R.id.fab);
            flb.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Snackbar.make(flb,"你确认注销账户？",Snackbar.LENGTH_SHORT).
                            setAction("确定",new View.OnClickListener(){
    
                                @Override
                                public void onClick(View view) {
                                    Toast.makeText(TestActivity.this,"你确定了点击悬浮按钮",Toast.LENGTH_SHORT).show();
                                }
                            }).
                            show();
                }
            });

这里需要注明的是，这种情景下只需要一个再次确认所以只能设置一个Action事件，如果设置两个事件的话，后者会覆盖前者的内容。

效果如下图：

![这里写图片描述][SouthEast 7]

细节有魔鬼啊！！看见没有，这个提示窗会覆盖住一点悬浮按钮。追求完美的Material Design设计肯定不会允许这样的事情发生，于是CoordinatorLayout闪亮登场了！！

郭神是这样解释这个控件的：  
CoordinatorLayout可以监听其所有子控件的各种事件，然后自动帮助我们做出最为合理的响应。既然如此，我们就来试试刚才这种情况，Snackbar遮挡FloatingActionButton的时候，它会怎么做？  
修改窗体布局，由FrameLayout改为CoordinatorLayout,代码如下：

接下来看看加载效果：

![这里写图片描述][SouthEast 8]

其实这些控件咋看用处不是很大，甚至有一些鸡肋。但是还是那句话，细节有魔鬼。只有把这些细节做好了，才能给用户最好的体验。

**6.卡片式布局——CardView：**

CardView的优点可以使用一句话来表达：它只是一个Farmelayout，只是额外提供了圆角和阴影等效果，看上去有立体的感觉。

先看xml里面怎么使用：

这里讲解用到的两个属性，cardElevation属性制定卡片的高度，高度值越大，投影范围越大，投影效果越淡，同FloatingActionButton一样。cardCornerRadius顺译为卡片角度半径，这里也是也是一样。（郭神写的第二行代码关于Elevation属性和这里不一样，也许是版本不一致，但是API为25.0.1的版本里面没有这个属性，是作者笔误还是新版本问题都不重要，只要大家知道就好。另外，“cardCornerRadius”作者描述为圆角弧度，但是该属性英文翻译为卡片圆角半径，且该属性值的单位为dp，说明这个值应该是长度单位，而不应该是弧度，故应该是圆角半径。）

然后看看效果图：

![这里写图片描述][SouthEast 9]

圆角大家看得明白，但是卡片高度可能有一点模糊，不知道是什么意思。因为卡片布局是立体效果，所以这个高度看起来就是类似于Padding值一样，如上图。这样看起来，CardView的效果或许不怎么样，那看看这种效果呢？

![这里写图片描述][SouthEast 10]

CardView的立体效果更明显了，且没有覆盖Toolbar，那我们接下来看看这种不覆盖ToolBar的效果应该怎么实现呢？在回答问题之前，需要先了解布局中的LinerLayout为什么覆盖了ToolBar。这是因为ToolBar和LinerLayout同在CoordinatorLayout布局中，而CoordinatorLayout根本上也只是一个Farmelayout，所以LinerLayout就覆盖了ToolBar。当然，我们也可以使用外边距等熟悉或者动画等效果来实现不覆盖，但是Material Design有更好的布局。

**7.封装好滚动事件的LinerLayout——AppBarLayout：**

APPBarLayout如上面介绍的一样，属于Design 库中提供的一个布局，它实际上就是一个垂直方向的LinerLayout，应用了Material Design的设计理念，且在内部做了很多滚动事件的封装。用法为2步，缺一不可。

首先将ToolBar使用AppBarLayout包裹起来，然后在LinerLayout的属性里面添加一句app:layout\_behavior=”@string/appbar\_scrolling\_view\_behavior”，布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
    <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/id_drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
    
            <android.support.v7.widget.Toolbar
                android:id="@+id/action_bar"
                android:layout_width="match_parent"
                android:layout_height="?actionBarSize"
                android:background="?attr/colorPrimary"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                />
    
        </android.support.design.widget.AppBarLayout>
    
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
    
            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cardCornerRadius="4dp"
                app:cardElevation="5dp">
                <Button
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="按钮"/>
            </android.support.v7.widget.CardView>
    
            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cardCornerRadius="4dp"
                app:cardElevation="5dp">
                <Button
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="按钮"/>
            </android.support.v7.widget.CardView>
    
            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cardCornerRadius="4dp"
                app:cardElevation="5dp">
                <Button
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="按钮"/>
            </android.support.v7.widget.CardView>
    
            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cardCornerRadius="4dp"
                app:cardElevation="5dp">
                <Button
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="按钮"/>
            </android.support.v7.widget.CardView>
    
            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cardCornerRadius="4dp"
                app:cardElevation="5dp">
                <Button
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="按钮"/>
            </android.support.v7.widget.CardView>
    
            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cardCornerRadius="4dp"
                app:cardElevation="5dp">
                <Button
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="按钮"/>
            </android.support.v7.widget.CardView>
    
            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cardCornerRadius="4dp"
                app:cardElevation="5dp">
                <Button
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="按钮"/>
            </android.support.v7.widget.CardView>
    
            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cardCornerRadius="4dp"
                app:cardElevation="5dp">
                <Button
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="按钮"/>
            </android.support.v7.widget.CardView>
    
            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cardCornerRadius="4dp"
                app:cardElevation="5dp">
                <Button
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="按钮"/>
            </android.support.v7.widget.CardView>
    
            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cardCornerRadius="4dp"
                app:cardElevation="5dp">
                <Button
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="按钮"/>
            </android.support.v7.widget.CardView>
    
            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cardCornerRadius="4dp"
                app:cardElevation="5dp">
                <Button
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="按钮"/>
            </android.support.v7.widget.CardView>
    
            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cardCornerRadius="4dp"
                app:cardElevation="5dp">
                <Button
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="按钮"/>
            </android.support.v7.widget.CardView>
    
            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cardCornerRadius="4dp"
                app:cardElevation="5dp">
                <Button
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="按钮"/>
            </android.support.v7.widget.CardView>
    
    
            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cardCornerRadius="4dp"
                app:cardElevation="5dp">
                <Button
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="按钮"/>
            </android.support.v7.widget.CardView>
    
            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cardCornerRadius="4dp"
                app:cardElevation="5dp">
                <Button
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="按钮"/>
            </android.support.v7.widget.CardView>
    
        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:cardCornerRadius="4dp"
            app:cardElevation="5dp">
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="按钮"/>
        </android.support.v7.widget.CardView>
    
        </LinearLayout>
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:layout_gravity="bottom|end"
            app:elevation="8dp"
            android:src="@mipmap/ic_done"/>
    </android.support.design.widget.CoordinatorLayout>
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header"/>
    
    </android.support.v4.widget.DrawerLayout>

这里需要说一下这个layout\_behavior这个属性，因为书中只是一笔带过。首先说一下，这个String字符串内容如下：

appbar_scrolling_view_behavior(Android.support.design.widget.AppBarLayout$ScrollingViewBehavior)

它和AppBarLayout.ScrollingViewBehavior相匹配，用来通知AppBarLayout 这个特殊的view何时发生了滚动事件，这个behavior需要设置在触发事件（滚动）的view之上。当CoordinatorLayout发现RecyclerView中定义了这个属性，它会搜索自己所包含的其他view，看看是否有view与这个behavior相关联。AppBarLayout.ScrollingViewBehavior描述了RecyclerView与AppBarLayout之间的依赖关系。RecyclerView的任意滚动事件都将触发AppBarLayout或者AppBarLayout里面view的改变。

说了这么多，就是想说一下这个原理：AppBarlayout下面的View我们可以设置任意View（理论成立，但未测试）然后通过上面这个属性和字符串，就可以实现把View放到AppBarLayout的下面，而且向上滑动可以从顶部穿透过去。为了增加滑动效果我们把LinerLayout嵌进ScrollView里面，然后将这个layout\_behavior属性只赋值给ScrollView，然后看效果：

![这里写图片描述][SouthEast 11]

既然有下拉的控件了，很容易联想到下拉刷新这个功能，其实Android V4包早就有了这个控件了。

**8.官方下载刷新控件——SwipeRefreshLayout:**

这个控件的使用方法都非常简单，我们需要先修改布局，将SwipeRefreshLayout控件引入。由于需要下拉刷新的控件是ScrollView，所以我们包裹这个控件即可，然后将其属性layout\_behavior也一并赋值给SwipeRefreshLayout，代码如下：

现在我们下拉就会有下拉刷新的效果了，但是有一个问题，下拉刷新需要执行上面业务？上面时候结束刷新？所以我们得在java代码中添加几句代码，代码如下：

final SwipeRefreshLayout swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swipe_refersh);
            swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
                @Override
                public void onRefresh() {
                    freresh(swipeRefreshLayout);
                }
            });

private void freresh(final SwipeRefreshLayout swipeRefreshLayout) { new Thread(){ @Override public void run() { try { Thread.sleep(2000); } catch (InterruptedException e) { e.printStackTrace(); } runOnUiThread(new Runnable() { @Override public void run() { Snackbar.make(swipeRefreshLayout,"刷新结束",Snackbar.LENGTH_SHORT).show(); swipeRefreshLayout.setRefreshing(false); } }); } }.start(); }

我们在代码中执行的是下拉的时候暂停两秒然后做出一个Snackbar，作为刷新业务的过程，然后将刷新结束。为什么一定要开线程和在线程中还要调到主线程来关闭刷新，开线程的时候主要是休眠的时候不影响刷新效果，且在子线程不能修改UI界面，所以得调用到主线程中来，否则不能实现这个效果。

实现效果：

![这里写图片描述][SouthEast 12]

这里再说说ToolBar，到了这里我们还可以将，因为到目前来看，这个ToolBar还没有体现出特别好的效果！我们对ToolBar增加一个属性app:layout\_scrollFlags=”scroll|enterAlways|snap”，然后看看运行效果：

![这里写图片描述][SouthEast 13]

APPBarLayout接收到滚动事件的时候，它内部的子控件通过layout\_scrollFlags属性来影响事件。上面的属性值共用到三个属性，其实它一共有5个属性的，分别是

*  scroll——ToolBar随着事件滚动而滚动，不可或缺；
 *  enterAlways——快速返回模式；

![这里写图片描述][strip]

*  snap——当状态不清晰的时候，由系统自行判断ToolBar是隐藏还是显示？需要配合其他属性使用

![这里写图片描述][SouthEast 12]

*  enterAlwaysCollapsed——enterAlways的附加值。  
    这里涉及到Child View的高度和最小高度，向下滚动时，Child View先向下滚动最小高度值，然后Scrolling View开始滚动，到达边界时，Child View再向下滚动，直至显示完全;

![这里写图片描述][strip 1]

*  exitUntilCollapsed——这里也涉及到最小高度。  
    发生向上滚动事件时，Child View向上滚动退出直至最小高度，然后Scrolling View开始滚动。也就是，Child View不会完全退出屏幕。

![这里写图片描述][strip 2]

这里需要注意的是，recylerview和NestedScrollView才可以配合ToolBar的layout\_scrollFlags属性，如ListView等支持嵌套滚动的控件依然不能支持这个属性。未查询到官方文档。

**9.Toolbar助手——CollapsingToolbarLayout：**

终于写到最后一个控件了！CollapsingToolbarLayout是不能单独使用的，它必须作为AppBarLayout的直接子布局来使用，而AppBarLayout又必须作为CoordinatorLayout的子布局。所以我们的布局应该是这样的：

<?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout
        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"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        tools:context=".MainActivity">
    
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="256dp"
            android:fitsSystemWindows="true">
    
            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorPrimary"
                app:expandedTitleMarginStart="38dp"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">
    
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:fitsSystemWindows="true"
                    android:scaleType="centerCrop"
                    android:src="@mipmap/h"
                    app:layout_collapseMode="parallax"
                    app:layout_collapseParallaxMultiplier="0.7"/>
    
    
                <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.design.widget.CollapsingToolbarLayout>
    
        </android.support.design.widget.AppBarLayout>
    
        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scrollbars="vertical"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
    
            <WebView
                android:id="@+id/webview"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
    
            </WebView>
        </android.support.v4.widget.NestedScrollView>
    
    </android.support.design.widget.CoordinatorLayout>

这个布局比上面的那些个所有的布局糅合在一起的看上去要简洁一些了，大部分属性都能看的明白了。但是有几个地方还是需要看看的。  
首先，我们将原来放置在ToolBar里面的属性：

*  app:contentScrim=”?attr/colorPrimary”  
    这个属性是指CollapsingToolbarLayout趋于折叠状态或者是折叠状态的时候的背景颜色，因为此时的CollapsingToolbarLayout就是一个简单的ToolBar形状，所以背景色我们还是设置系统默认的背景颜色。
 *  app:expandedTitleMarginStart=”38dp”  
    这个属性是指设置扩张时候(还没有收缩时)title与左边的距离，不设置的时候有一个默认距离，个人感觉默认距离或许会更好。
 *  app:layout\_scrollFlags=”scroll|exitUntilCollapsed”  
    这个属性之前已经解释过是什么意思，这里将它从ToolBar给贴到CollapsingToolbarLayout里，是因为它现在做为AppBarLayout的唯一子布局了，所以这个属性就应该上一层赋值。

然后我们对CollapsingToolbarLayout内的ToolBar和ImageView的同一个属性layout\_collapseMode赋予了不同的值，这个属性其实有三个值：

*  none  
    none：有该标志位的View在页面滚动的过程中会如同普通的Toolbar一样，就是简单的显示与隐藏效果
 *  pin  
    pin：有该标志位的View在页面滚动的过程中会一直停留在顶部，比如Toolbar可以被固定在顶部
 *  parallax  
    parellax：有该标志位的View在页面滚动的过程中会产生位移，最后隐藏（这个位移不是垂直方向的直线运动）

NestedScrollView这个控件我们在之前讲解这个属性layout\_scrollFlags的时候说过，这里做个示例。最后再讲解一个平时很少见的android系统内的属性，

android:fitsSystemWindows="true"

这个属性在布局中共出现了四次，分别是ImageView、CollapsingToolbarLayout、AppBarLayout、CoordinatorLayout。使用这个属性的目的是实现沉浸式状态栏，要实现这个效果单单在ImageView使用该属性是不能实现的，必须在ImageView的所有父布局上面使用才行。

当然了，实现沉浸式状态栏还不是这么简单的，还需要自定义主题，并将该Activity的主题设置为自定义主题。所以首先得建一个主题：

效果图：

![这里写图片描述][SouthEast 14]

上面这个效果只支持Api21及以上的Android系统，在21以下的就不能这样干了，所以我们得把上面这个文件放到values-v21文件夹下的styles.xml(?上面，这个文件没有？没有你就自己new一个啊！！！！）然后在values文件夹下的styles.xlm文件里，我们还得写一个ImmersionStatus主题，或者5.0以下的手机一打开就崩了。这个主题就很简单了，代码如下：

其实看见这个主题就知道，5.0以前的手机不能实现图片在顶部的沉浸式状态栏。千万不要像我一样傻乎乎的到处找人问这个效果怎么还有黑色的状态栏？

![这里写图片描述][SouthEast 15]

到这里，本章算是结束了！有描述不对的地方，请各位指正，谢谢！

[SouthEast]: /images/20220713/0105ad898b4549dfa06d9e7f1a4ddf4d.png
[SouthEast 1]: /images/20220713/0b5cac14e4ae4f308e1384a6a7212368.png
[SouthEast 2]: /images/20220713/a744a84af5aa4c84820b04da1974c8dd.png
[SouthEast 3]: /images/20220713/f9d88a2f62294655bc04b611d020c5f0.png
[SouthEast 4]: /images/20220713/49c601c0332e4e449d37b1ea12fd48a0.png
[SouthEast 5]: /images/20220713/9bcdbff0a15a4232b6ab116b420492db.png
[QQ5.0]: http://blog.csdn.net/lmj623565791/article/details/39257409
[SouthEast 6]: /images/20220713/0b389f91ee6f4d499e6dfaa10eb2f8cd.png
[Android Design Support Library_NavigationView]: http://www.jianshu.com/p/76e30f87a4ed#
[SouthEast 7]: /images/20220713/58c5e61ff30e46b39f94ddea527df106.png
[SouthEast 8]: /images/20220713/9d236fca6d504664b23dece457d246d3.png
[SouthEast 9]: /images/20220713/54c173a44910476f985c14eb9419a5e5.png
[SouthEast 10]: /images/20220713/6265d8689844482eac19475aa51a48bc.png
[SouthEast 11]: /images/20220713/eddc060aae024e23999b5b9bbbd52667.png
[SouthEast 12]: /images/20220713/bdb5ce909d8c409d8653252cbedeb680.png
[SouthEast 13]: /images/20220713/1381cb221af34eaba0280128840d5f02.png
[strip]: /images/20220713/e3a614356b9d435dbc5a50e35c3f17d5.png
[strip 1]: /images/20220713/0a2b727b0bdc4641ba60aef7c163729e.png
[strip 2]: /images/20220713/17d3bada94784a97beeb1d27b52a98d5.png
[SouthEast 14]: /images/20220713/cd3c61fda34f4ec9a3c45e4e58ece8e2.png
[SouthEast 15]: /images/20220713/13d93d4b2884460ba1359344b8494954.png