Material Design

一 Toolbar

任何一个新建项目，默认都是会显示ActionBar的，它是根据项目中指定的主题来显示的

<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.Kotlin_material_design">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

可以看到有个android:theme="@style/Theme.Kotlin_material_design"属性，这就是项目的主题，Theme.Kotlin_material_design这个主题又是在res/values/theme.xml文件中定义的。
它的默认主题是：

<style name="Theme.Kotlin_material_design" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>

这里定义了一个Theme.Kotlin_material_design主题，然后指定它的parent主题是Theme.MaterialComponents.DayNight.DarkActionBar，这个DarkActionBar是一个深色的ActionBar主题。

而现在我们准备使用Toolbar来替代ActionBar，因此需要指定一个不带ActionBar的主题，通常有Theme.MaterialComponents.NoActionBar和Theme.MaterialComponents.DayNight.NoActionBar这两种主题可选，其中Theme.MaterialComponents.NoActionBar表示深色主题，它会将界面的主体颜色设成深色，陪衬颜色设成浅色，而Theme.MaterialComponents.DayNight.NoActionBar表示浅色主题，它会将界面的主体颜色设成浅色，陪衬颜色设成深色

theme主题颜色对应表

现在我们已经将ActionBar隐藏起来了，那么接下来就使用Toolbar来替代ActionBar，修改activity_main.xml中代码：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    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"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/purple_500"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/Theme.AppCompat.Light"/>

</FrameLayout>

xmlns:app= "http://schemas.android.com/apk/res-auto"指定命名空间是由于许多Material属性是在新系统中新增的，老系统中并不存在，那么为了能够兼容老系统，我们就不能使用android:attribute这样的写法了，而是应该使用app:attribute

接下来定义一个Toolbar控件，高度设置为actionBar的高度，由于我们刚才在theme.xml中将程序的主题指定成了浅色主题，因此Toolbar现在也是浅色主题，那么Toolbar上面的各种元素就会自动使用深色系，从而和主体颜色区别开；但是之前默认的ActionBar文字都是白色的，现在变成黑色的会很难看，那么为了能让Toolbar单独使用深色主题，这里我们使用了android:theme属性指定深色主题，但是这样又有新问题，就是如果Toolbar中有菜单按钮，那么弹出的菜单项也会变成深色主题，所以这里又使用了app:popupTheme属性单独将弹出的菜单项指定成了浅色主题

现在给Toolbar增加一些按钮
新建menu文件夹并且新建toolbar.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/backup"
        android:icon="@drawable/ic_backup"
        android:title="Backup"
        app:showAsAction="always"/>

    <item
        android:id="@+id/delete"
        android:icon="@drawable/ic_delete"
        android:title="Delete"
        app:showAsAction="ifRoom"/>

    <item
        android:id="@+id/settings"
        android:icon="@drawable/ic_settings"
        android:title="Settings"
        app:showAsAction="never"/>

</menu>

使用app:showAsAction来指定按钮的显示位置，这里之所以再次使用了app命名空间，同样是为了兼容低版本的系统，app:showAsAction有以下几种值可以选：
1.always：表示永远显示在Toolbar中，如果屏幕空间不够则不显示
2.ifRoom：表示屏幕空间足够的情况下显示在Toolbar中，不够的话就显示在菜单当中
3.never：表示永远显示在菜单当中
注意：Toolbar中的action按钮只会显示图标，菜单中的action按钮只会显示文字

class MainActivity : AppCompatActivity() {

    private lateinit var toolbar: Toolbar

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        initView()
        setListener()
    }

    private fun initView() {
        toolbar = findViewById(R.id.toolBar)
        setSupportActionBar(toolbar)
    }

    private fun setListener() {
        Log.e("a","a")
    }

    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.toolbar, menu)
        return true
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        when(item.itemId){
            R.id.backup -> {
                Toast.makeText(this, "Backup",Toast.LENGTH_SHORT).show()
                finish()
            }
            R.id.delete -> {
                Toast.makeText(this, "delete",Toast.LENGTH_SHORT).show()
            }
            R.id.settings -> {
                Toast.makeText(this, "settings",Toast.LENGTH_SHORT).show()
            }
        }
        return true
    }
}

goodui.png

二滑动菜单

DrawerLayout

滑动菜单就是将一些菜单项隐藏起来，而不是放置在主屏幕上，然后可以通过滑动的方式将菜单显示出来，实现这一功能可以使用AndroidX库中提供的一个DrawerLayout控件
DrawerLayout是一个布局，在布局中允许放入两个直接子控件：
1.第一个子控件是主屏幕中显示的内容
2.第二个子控件是滑动菜单中显示的内容

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android = "http://schemas.android.com/apk/res/android"
    xmlns:app = "http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolBar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/purple_500"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/Theme.AppCompat.Light"/>

    </FrameLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:text="Hello"
        android:textSize="25sp"/>

</androidx.drawerlayout.widget.DrawerLayout>

可以看到，这里最外层的控件使用了DrawerLayout，DrawerLayout中放置了两个直接子控件；第一个子控件是FrameLayout，用于作为主屏幕中显示的内容；第二个子控件是一个TextView，用于作为滑动菜单中显示的内容，关于控件的使用类型没有限制，但是要注意第二个子控件，layout_gravity这个属性必须指定，因为我们需要告诉DrawerLayout滑动菜单是在屏幕的左边还是右边

在Toolbar的最左边加入一个导航按钮，点击按钮也会将滑动菜单的内容展示出来：

class MainActivity : AppCompatActivity() {
    private lateinit var drawerLayout: DrawerLayout

    ...

    private fun initView() {
        ...
        drawerLayout = findViewById(R.id.drawerLayout)
        ...
        supportActionBar?.let { 
            it.setDisplayHomeAsUpEnabled(true)
            it.setHomeAsUpIndicator(R.drawable.ic_menu)
        }
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        when(item.itemId){
            ...
            android.R.id.home -> {
                drawerLayout.openDrawer(GravityCompat.START)
            }
        }
        return true
    }
}

这里首先调用getSupportActionBar()方法得到了ActionBar的实例，虽然这个ActionBar的具体实现是由Toolbar来完成的。接着在ActionBar不为空的情况下调用setDisplayHomeAsUpEnabled(true)方法让导航按钮显示出来，调用setHomeAsUpIndicator()方法来设置一个导航按钮图标，实际上，Toolbar最左侧的这个按钮就叫做Home按钮，它默认的图标是一个返回的箭头，含义是返回上一个Activity，接下来在复写的方法里对Home按钮的点击事件进行处理，Home的id永远都是android.R.id.home，然后调用DrawerLayout的openDrawer()方法将滑动菜单展示出来，注意需要传入一个Gravity参数，保证行为和xml中的一致

三 NavigationView

事实上，你可以在滑动菜单页面定制任意的布局，不过Google给我们提供了一种更好的方法：使用NavigationView，它是Material库中提供的一个控件

首先，既然是Material库提供的，那么我们就需要将这个库引入项目中：

implementation 'com.google.android.material:material:1.1.0'
implementation 'de.hdodenhof:circleimageview:3.0.1'

在开始使用NavigationView之前，我们还需要准备好两个东西：menu和headerLayout

menu是用来在NavigationView中显示具体的菜单项的
headerLayout是用来在NavigationView中显示头部布局的

先来准备menu：

<?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/navCall"
            android:icon="@drawable/nav_call"
            android:title="Call"/>

        <item
            android:id="@+id/navFriends"
            android:icon="@drawable/nav_friends"
            android:title="Friends"/>

        <item
            android:id="@+id/navMail"
            android:icon="@drawable/nav_mail"
            android:title="Mail"/>

        <item
            android:id="@+id/navTask"
            android:icon="@drawable/nav_task"
            android:title="Tasks"/>

    </group>

</menu>

首先在<menu>中嵌套了一个<group>标签，然后将group的android:checkableBehavior属性指定为single。group表示一个组，android:checkableBehavior指定为single表示组中的所有菜单项只能单选

接下来准备headerLayout

这是一个可以随意定制的布局，在这里就放置头像、用户名、邮箱地址这三项内容吧，在layout文件夹下新建文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:padding="10dp"
    android:background="#8F8F8F">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/iconImage"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_centerInParent="true"
        android:src="@drawable/nav_icon">
        
    </de.hdodenhof.circleimageview.CircleImageView>

    <TextView
        android:id="@+id/mailText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="yangzhiyang@gomo.com"
        android:textColor="#FFF"
        android:textSize="14sp"/>
    
    <TextView
        android:id="@+id/userText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/mailText"
        android:text="Yang Zhi Yang"
        android:textColor="#FFF"
        android:textSize="14sp"/>

</RelativeLayout>

现在menu和headerLayout都准备好了，修改activity_main：

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android = "http://schemas.android.com/apk/res/android"
    xmlns:app = "http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolBar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/purple_500"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/Theme.AppCompat.Light"/>

    </FrameLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header"/>

</androidx.drawerlayout.widget.DrawerLayout>

可以看到，我们将之前的TextView换成了NavigationView，这样滑动菜单中显示的内容也就变成NavigationView了，这里又通过app:menu和app:headerLayout属性将我们刚才准备好的menu和headerLayout设置了进去，这样NavigationView就定义完成了

当然，还要处理一下NavigationView的菜单项的点击事件，在MainActivity里：

navigationView = findViewById(R.id.navView)
navigationView.setCheckedItem(R.id.navCall)
navigationView.setNavigationItemSelectedListener {
          drawerLayout.closeDrawers()
          true
}

首先调用NavigationView的setCheckedItem(R.id.navCall)方法将Call菜单项设置为默认选中，接着调用了setNavigationItemSelectedListener()方法来设置一个菜单项选中事件的监听器，当用户点击了任意菜单项时，就会回调到传入的Lambda表达式当中，我们这里调用了DrawerLayout的closeDrawers()方法将滑动菜单关闭，并返回true表示此事件已被处理

goodui2.png

四悬浮按钮和可交互提示

悬浮按钮

最简单且最具代表性的立面设计就是悬浮按钮了，这种按钮不属于主界面平面的一部分，而是位于另外一个维度的，因此就会给人一种悬浮的感觉

FloatingActionBar
FloatingActionBar是Material库中提供的一个控件，这个控件可以轻松地实现悬浮按钮的效果，它默认会使用colorAccent作为按钮的颜色，还可以通过给按钮指定一个图标来表明这个按钮的作用是什么

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android = "http://schemas.android.com/apk/res/android"
    xmlns:app = "http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolBar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/purple_500"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/Theme.AppCompat.Light"/>
        
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="16dp"
            android:src="@drawable/ic_done"
            app:elevation="8dp"/>

    </FrameLayout>

    ...
</androidx.drawerlayout.widget.DrawerLayout>

app:elevation="8dp"可以指定悬浮高度
点击事件和普通Button没有区别

fabButton.setOnClickListener { 
     Toast.makeText(this, "Fab click", Toast.LENGTH_SHORT).show()
}

五 Snackbar--提示工具

这是Material库提供的提示工具，与Toast有着不同的应用场景，Toast的作用是告诉用户现在发生了什么事情，但用户只能被动接收这个事情，因为没有什么办法能让用户进行选择；而Snackbar则在这个方面进行了扩展，它允许在提示中加入一个可交互按钮，当用户点击按钮的时候，可以执行一些额外的逻辑操作

Snackbar用法：
Snackbar的用法也非常简单，它和Toast是基本相似的，只不过可以额外增加一个按钮的点击事件：

fabButton.setOnClickListener {
      Snackbar.make(it, "Data delete", Snackbar.LENGTH_SHORT)
           .setAction("Undo"){
                 Toast.makeText(this, "Data restored", Toast.LENGTH_SHORT).show()
            }
           .show()
}

这里调用Snackbar的make()方法来创建一个Snackbar对象，make()方法的第一个参数需要传入一个View，只要是当前界面布局的任意一个View都可以，Snackbar会使用这个View自动查找最外层的布局，用于展示提示信息；第二个参数就是Snackbar中显示的内容；第三个参数是Snackbar显示的时长，这些都和Toast类似。
接着这里又调用了一个setAction()方法来设置一个动作，从而让Snackbar不仅仅是一个提示，而是可以和用户进行交互的

bt.png

可以看到，Snackbar从屏幕底部出现了，上面有我们设置的提示文字，还有一个Undo按钮，按钮是可以点击的，过一段时间Snackbar会自动从屏幕消失；
当然这里有个bug，提示遮挡了悬浮按钮，这个问题可以借助CoordinatorLayout就可以轻松解决

六 CoordinatorLayout

CoordinatorLayout可以说是一个加强版的FrameLayout，由AndroidX库提供；它在普通情况下的作用和FrameLayout基本一致，但是它拥有一些额外的Material能力；
事实上，CoordinatorLayout可以监听其所有子控件的各种事件，并自动帮助我们做出最为合理的响应，例如，刚才弹出的Snackbar提示将悬浮按钮遮挡住了，而如果我们能让CoordinatorLayout监听到Snackbar的弹出事件，那么它会自动将内部的FloatingActionButtonr向上偏移，从而确保不会被Snackbar遮挡

使用，只需将原来的FrameLayout替换一下就可以了：

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android = "http://schemas.android.com/apk/res/android"
    xmlns:app = "http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolBar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/purple_500"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/Theme.AppCompat.Light"/>

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="16dp"
            android:src="@drawable/ic_done"
            app:elevation="8dp"/>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header"/>

</androidx.drawerlayout.widget.DrawerLayout>

bt2.png

可以看到，悬浮按钮自动向上偏移了Snackbar的同等高度，从而确保不会被遮挡，当Snackbar消失的时候，悬浮按钮会自动向下偏移回到原来的位置；思考一下，刚才说的是CoordinatorLayout可以监听其所有子控件的各种事件，但是Snackbar好像并不是CoordinatorLayout的子控件吧，为什么它可以被监听到呢？其实道理很简单，我们在Snackbar的make()方法中传入的第一个参数就是用来指定Snackbar是基于哪个View触发的，刚才我们传入的是FloatingActionButton本身，而FloatingActionButton是CoordinatorLayout中的子控件，因此这个事件就理所应当能被监听到了

七卡片式布局

卡片式布局也是Material Design中提出的一个新概念，它可以让页面中的元素看起来就像在卡片中一样，并且还能拥有圆角和投影

MaterialCardView

MaterialCardView是用于实现卡片式布局效果的重要控件，有Material库提供。实际上，MaterialCardView也是一个FrameLayout，只是额外提供了圆角和阴影等效果，看上去会有立体的感觉

这里以加载水果图片为例：
activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android = "http://schemas.android.com/apk/res/android"
    xmlns:app = "http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolBar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/purple_500"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/Theme.AppCompat.Light"/>

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="16dp"
            android:src="@drawable/ic_done"
            app:elevation="8dp"/>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header"/>

</androidx.drawerlayout.widget.DrawerLayout>

接着定义一个实体类
class Fruit(val name: String, val imageId: Int)
定义RecyclerView子项布局

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView
    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="wrap_content"
    android:layout_margin="5dp"
    app:cardCornerRadius="4dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/fruitImage"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:scaleType="centerCrop"/>

        <TextView
            android:id="@+id/fruitName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_margin="5dp"
            android:textSize="16sp"/>

    </LinearLayout>

</com.google.android.material.card.MaterialCardView>

这里使用了MaterialCardView来作为子项的最外层布局，从而使得RecyclerView中的每个元素都是在卡片中的，由于MaterialCardView是一个FrameLayout，因此它没有什么方便的定位方式，这里就在MaterialCardView中再嵌套一个LinearLayout；这里MaterialCardView布局的属性：通过app:cardCornerRadius="4dp"属性指定卡片圆角的弧度，还可以通过app:elevation="5dp"属性来指定卡片的高度，高度的效果影响投影

为RecyclerView准备适配器

class FruitAdapter(val context: Context, val fruitList: List<Fruit>)
    : RecyclerView.Adapter<FruitAdapter.ViewHolder>(){

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(context).inflate(R.layout.fruit_item,parent,false)
        return ViewHolder(view)
    }

    override fun getItemCount() = fruitList.size

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val fruit = fruitList[position]
        Glide.with(context).load(fruit.imageId).into(holder.fruitImage)
        holder.fruitName.text = fruit.name
    }

    inner class ViewHolder(itemView: View): RecyclerView.ViewHolder(itemView) {
        val fruitImage: ImageView = itemView.findViewById(R.id.fruitImage)
        val fruitName: TextView = itemView.findViewById(R.id.fruitName)
    }
}

MainActivity

class MainActivity : AppCompatActivity() {

    private lateinit var toolbar: Toolbar
    private lateinit var drawerLayout: DrawerLayout
    private lateinit var navigationView: NavigationView
    private lateinit var fabButton: FloatingActionButton
    private val fruitList = ArrayList<Fruit>()
    private lateinit var recyclerView: RecyclerView
    private lateinit var fruitAdapter: FruitAdapter
    val fruits = mutableListOf<Fruit>(Fruit("Apple",R.drawable.apple), Fruit("Banana",R.drawable.banana),
                                    Fruit("Orange",R.drawable.orange), Fruit("Watermelon",R.drawable.watermelon),
                                    Fruit("Pear",R.drawable.pear),Fruit("Grape",R.drawable.grape),
                                    Fruit("Pineapple",R.drawable.pineapple),Fruit("Strawberry",R.drawable.strawberry),
                                    Fruit("Cherry",R.drawable.cherry),Fruit("Mango",R.drawable.mango)
    )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        initView()
        initFruits()
        setListener()
    }

    private fun initFruits() {
        fruitList.clear()
        repeat(50){
            val index = (0 until fruits.size).random()
            fruitList.add(fruits[index])
        }
        fruitAdapter.notifyDataSetChanged()
    }

    private fun initView() {
       ...
        recyclerView = findViewById(R.id.recyclerView)
        fruitAdapter = FruitAdapter(this,fruitList)
        val layouManager = GridLayoutManager(this,2)
        recyclerView.layoutManager = layouManager
        recyclerView.adapter = fruitAdapter
        ...
    }

    ...
}

goodui3.png

是不是忽略了一个细节，Toolbar被RecyclerView给挡住了，我们该怎么解决呢？借助AppBarLayout

AppBarLayout

AppBarLayout是Material库提供的一个工具，它实际上是一个垂直方向的LinearLayout，它在内部做了很多滚动事件的封装，并应用了一些Material Design的设计理念

要解决上面的遮挡问题，除了传统的偏移法外，还可以通过AppBarLayout，如下两步：

将Toolbar嵌套到AppBarLayout中
给RecyclerView指定一个布局行为

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android = "http://schemas.android.com/apk/res/android"
    xmlns:app = "http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolBar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/purple_500"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:popupTheme="@style/Theme.AppCompat.Light"/>

        </com.google.android.material.appbar.AppBarLayout>

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"/>

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="16dp"
            android:src="@drawable/ic_done"
            app:elevation="8dp"/>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header"/>

</androidx.drawerlayout.widget.DrawerLayout>

布局文件并没有什么太大变化，首先定义一个AppBarLayout，并将Toolbar放置在AppBarLayout里面，然后在RecyclerView中使用app:layout_behavior属性指定了一个布局行为，现在已经使用AppBarLayout解决了RecyclerView遮挡Toolbar的问题，并且当RecyclerView滚动时就已经将滚动事件通知给AppBarLayout了，而它内部的子控件其实是可以指定如何去响应这些事件的，接下来我们进行处理，继续优化：

goodui4.png

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android = "http://schemas.android.com/apk/res/android"
    xmlns:app = "http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolBar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/purple_500"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:popupTheme="@style/Theme.AppCompat.Light"
                app:layout_scrollFlags="scroll|enterAlways|snap"/>

        </com.google.android.material.appbar.AppBarLayout>

        ...
</androidx.drawerlayout.widget.DrawerLayout>

这里在Toolbar中添加了一个app:layout_scrollFlags属性，scroll表示当向上滚动时，Toolbar会跟着一起向上滚动并实现隐藏；enterAlways表示当向下滚动时，Toolbar会跟着一起向下滚动并重新显示；snap表示当Toolbar还没有完全隐藏或显示的时候，会根据当前滚动的距离，自动选择是隐藏还是显示

goodui5.png

下拉刷新

Google为了让Android的下拉刷新风格能有一个统一的标准，提供了一个现成的控件：SwipeRefreshLayout，我们把想要实现下拉刷新功能的控件放置到SwipeRefreshLayout中，就可以迅速让这个控件支持下拉刷新

这里让RecyclerView支持下拉刷新
依赖：
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.0.0'

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android = "http://schemas.android.com/apk/res/android"
    xmlns:app = "http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        。。。
        <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
            android:id="@+id/swipeRefresh"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/recyclerView"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
            
        </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
        。。。
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

</androidx.drawerlayout.widget.DrawerLayout>

在RecyclerView外面嵌套了一层SwipeRefreshLayout，这样RecyclerView就拥有下拉刷新功能了

接下来在代码里处理具体的刷新逻辑

swipeRefreshLayout.setColorSchemeColors(resources.getColor(R.color.purple_700))
swipeRefreshLayout.setOnRefreshListener { 
     //请求新数据
    swipeRefreshLayout.isRefreshing = false
}

首先调用SwipeRefreshLayout的setColorSchemeColors方法设置下拉刷新进度条的颜色，接着设置下拉刷新监听器，当请求完新数据后，调用SwipeRefreshLayout的setRefreshing()方法并传入false，表示刷新事件结束，并隐藏刷新进度条

可折叠式标题栏
CollapsingToolbarLayout

CollapsingToolbarLayout是一个作用于Toolbar基础之上的布局，也是由Material库提供的；不过，CollapsingToolbarLayout不能独立存在，它的设计被限定只能作为AppBarLayout的直接子布局来使用，而AppBarLayout又必须是CoordinatorLayout的子布局，这里以编写水果详情页来展示

activity_fruit.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="250dp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="@color/purple_700"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/fruitImage"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"/>

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"/>

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <com.google.android.material.card.MaterialCardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="15dp"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginTop="35dp"
                app:cardCornerRadius="4dp">

                <TextView
                    android:id="@+id/fruitContent"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="10dp"/>

            </com.google.android.material.card.MaterialCardView>

        </LinearLayout>

    </androidx.core.widget.NestedScrollView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@drawable/ic_comment"
        app:layout_anchor="@id/appBarLayout"
        app:layout_anchorGravity="bottom|end">

    </com.google.android.material.floatingactionbutton.FloatingActionButton>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

FruitActivity

package com.example.kotlin_material_design

import android.os.Bundle
import android.view.MenuItem
import android.widget.ImageView
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import androidx.appcompat.widget.Toolbar
import com.bumptech.glide.Glide
import com.google.android.material.appbar.CollapsingToolbarLayout

class FruitActivity : AppCompatActivity() {

    companion object{
        const val FRUIT_NAME = "fruit_name"
        const val FRUIT_IMAGE_ID = "fruit_image_id"
    }

    private lateinit var toolbar: Toolbar
    private lateinit var collapsingToolbarLayout: CollapsingToolbarLayout
    private lateinit var fruitImageView: ImageView
    private lateinit var fruitContent: TextView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_fruit)
        initView()
        val fruitName = intent.getStringExtra(FRUIT_NAME) ?: ""
        val fruitImageId = intent.getIntExtra(FRUIT_IMAGE_ID, 0)

        setSupportActionBar(toolbar)
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        collapsingToolbarLayout.title = fruitName
        Glide.with(this).load(fruitImageId).into(fruitImageView)
        fruitContent.text = getFruitContent(fruitName)
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        when(item.itemId){
            android.R.id.home -> {
                finish()
                return true
            }
        }
        return super.onOptionsItemSelected(item)
    }

    private fun getFruitContent(fruitName: String): CharSequence? {
        return fruitName.repeat(50)
    }

    private fun initView() {
        toolbar = findViewById(R.id.toolbar)
        collapsingToolbarLayout = findViewById(R.id.collapsingToolbar)
        fruitImageView = findViewById(R.id.fruitImage)
        fruitContent = findViewById(R.id.fruitContent)
    }

}

FruitAdapter

package com.example.kotlin_material_design

import android.content.Context
import android.content.Intent
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView
import com.bumptech.glide.Glide

class FruitAdapter(val context: Context, val fruitList: List<Fruit>)
    : RecyclerView.Adapter<FruitAdapter.ViewHolder>(){

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(context).inflate(R.layout.fruit_item,parent,false)
        return ViewHolder(view)
    }

    override fun getItemCount() = fruitList.size

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val fruit = fruitList[position]
        Glide.with(context).load(fruit.imageId).into(holder.fruitImage)
        holder.fruitName.text = fruit.name
        holder.itemView.setOnClickListener {
            val intent = Intent(holder.itemView.context, FruitActivity::class.java).apply {
                putExtra(FruitActivity.FRUIT_NAME, fruit.name)
                putExtra(FruitActivity.FRUIT_IMAGE_ID, fruit.imageId)
            }
            holder.fruitImage.context.startActivity(intent)
        }
    }

    inner class ViewHolder(itemView: View): RecyclerView.ViewHolder(itemView) {
        val fruitImage: ImageView = itemView.findViewById(R.id.fruitImage)
        val fruitName: TextView = itemView.findViewById(R.id.fruitName)
    }
}

app:contentScrim属性用于指定CollapsingToolbarLayout在趋于折叠状态以及折叠之后的背景色；app:layout_scrollFlags="scroll|exitUntilCollapsed"表示CollapsingToolbarLayout会随着水果内容详情的滚动一起滚动，exitUntilCollapsed表示当CollapsingToolbarLayout随着滚动完成折叠之后就保留在界面上，不再移出屏幕；app:layout_collapseMode属性用于指定当前控件在CollapsingToolbarLayout折叠过程中的折叠模式，其中Toolbar指定成pin，表示在折叠的过程中位置始终保持不变，ImageView指定成parallax，表示在折叠过程中产生一定的错位偏移。NestedScrollView在普通的ScrollView基础上增加了嵌套响应滚动事件的功能，内部只允许存在一个直接子布局和以前一样，app:layout_anchor属性指定了一个锚点，我们将锚点设置为AppBarLayout，这样悬浮按钮就会出现在水果标题栏区域内，又使用app:layout_anchorGravity属性将悬浮按钮定位在标题栏区域的右下角。

进一步改进，将背景图和状态栏融合到一起，在Android5.0系统前，我们是无法对状态栏的背景或颜色进行操作的，那个时候也没有Material Design的概念，但是5.0系统之后都是支持这个功能的
要让背景图能够和系统状态栏融合，需要借助android:fitsSystemWindows这个属性来实现，在CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout这种嵌套结构的布局中，将控件的android:fitsSystemWindows属性指定成true，就表示该控件会出现在系统状态栏里，对应到我们程序，那就是水果标题栏中的ImageView应该设置这个属性了，当然还必须将它的所有父布局都设置上这个属性才可以，但是，即使我们将这个属性设置好了也没有用，因为还必须在程序的主题中将状态栏颜色指定成透明色才行，即在主题中将android:statusBarColor属性的值指定成@android:color/transparent