Android Material Design

发表于 更新于 分类于 Waline： 阅读次数： 本文字数： 33k 阅读时长 ≈ 30 分钟

Toolbar

由 AndroidX 库提供的用来替代 ActionBar 的一个控件。

详细信息

ActionBar 即每个 Activity 最顶部的那个标题栏，任何新建的项目默认都会显示，但它被限定只能位于 Activity 的顶部，从而不能实现一些 Material Design 的效果，因此官方现在已经不再建议使用，可在 res/values/styles.xml 文件中设置为不带 ActionBar 的主题。更加推荐的是 Toolbar，它不仅继承了 ActionBar 的所有功能，而且灵活性很高，可配合其它控件完成一些 Material Design 的效果。

首先指定一个不带 ActionBar 的主题，常用的有两种：

  • Theme.AppCompat.NoActionBar。表示深色主题，它会将界面的主体颜色设为深色，陪衬颜色设为浅色。
  • Theme.AppCompat.Light.NoActionBar。表示浅色主体，它会将界面的主体颜色设为浅色，陪衬颜色设为深色。

在 XML 中添加控件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  
// 指定了一个新的命名空间，这是由于许多 Material 属性是在新系统中新增的，为了兼容老系统。
// 在 MD 的开发中会经常用到它  
// xmlns:app="http://schemas.android.com/apk/res-auto"  
// ----------------------------------------------------------------------------
// Toolbar 控件由 appcompat 库提供
// 高度设置为 actionBar 的高度 
// 让 Toolbar 单独使用深色主题。 
//（系统主题为浅色，Toolbar 也会是浅色主题，其上的元素会自动使用深色系，从而和主体颜色区别开，这样字体是黑色会很丑。）
// 单独将弹出的菜单项指定为浅色主题。
//（现在 Toolbar 为深色主题，如果包含了菜单项，那么弹出的菜单项也会是深色主题，会很丑。） 
  
    <androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"                            
        android:layout_height="?attr/actionBarSize"
        android:id="@+id/toolbar"
        android:background="@color/colorPrimary"                              
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"                            
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
    
</LinearLayout>

修改标题栏上显示的文字内容：给 Activity 增加了 label 属性，如果不指定，默认使用 application 中指定的 label 内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.material">

    <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/AppTheme">
        <activity android:name=".ToolbarActivity"
            android:label="Toolbar"/>
    </application>
</manifest>

添加 action 按钮：res 目录 -> menu 文件夹 -> 新建文件（选择 Menu resource file ）。

toolbar.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?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 标签定义 action 按钮
// ------------------------------------------------------------------------
// app:showAsAction 指定按钮的显示位置：（为了兼容低版本系统，同样使用了 app 命名空间）
// always：表示永远显示在 Toolbar 中，如果屏幕空间不够则不显示。
// ifRoom：表示屏幕空间足够的情况下显示在 Toolbar 中，否则就显示在菜单当中。
// never：表示永远显示在菜单当中。
// ------------------------------------------------------------------------
// 注意：Toolbar 的 action 按钮只会显示图标。而菜单中的 action 按钮只会显示文字。

    <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>

修改代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
class ToolbarActivity : AppCompatActivity(){

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

        // 调用 setSupportActionBar 并将 Toolbar 的实例传入。
        // 这样，既使用了 Toolbar，又让它的外观与功能都和 ActionBar 一致了。
        setSupportActionBar(toolbar)
    }

    /**
     * 在此方法中加载了 toolbar.xml 这个菜单文件
     */
    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,"You clicked Backup",Toast.LENGTH_SHORT).show()
            R.id.delete ->
                Toast.makeText(this,"You clicked Delete",Toast.LENGTH_SHORT).show()
            R.id.settings ->
                Toast.makeText(this,"You clicked Settings",Toast.LENGTH_SHORT).show()
        }
        return true
    }
}

滑动菜单

所谓的滑动菜单，就是将一些菜单选项隐藏起来，而不是放置在主屏幕上，然后可以通过滑动的方式将菜单显示出来。这种方式既节省了屏幕空间，又实现了非常好的动画效果。

DrawerLayout

它是一个布局，在布局中允许放入两个直接子控件。第一个子控件是主屏幕中显示的内容，第二个子控件是滑动菜单中显示的内容。

修改 XML 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:id="@+id/drawerLayout">

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

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

    </FrameLayout>

<!--  滑动菜单中显示的内容，其实使用什么都可以，DrawerLayout 并没有限制只能使用固定的控件。  -->
<!--  但是，android:layout_gravity 属性必须指定，因为要告诉 DrawerLayout 滑动菜单是在屏幕的左边还是右边。 -->
<!--  left：左边。 right：右边。 start：根据系统语言进行判断。   -->

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#FFF"
        android:text="This is menu"
        android:textSize="30sp" />

</androidx.drawerlayout.widget.DrawerLayout>

默认只能在屏幕边缘进行拖动时才能将菜单拖出来。现在，在 Toolbar 的最左边添加一个导航按钮，点击按钮也会将滑动菜单的内容展示出来。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
class MainActivity : AppCompatActivity() {

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

        // 为滑动菜单添加导航按钮
        // 调用 getSupportActionBar() 得到 ActionBar 的实例，虽然这个 ActionBar 的具体实现是由 Toolbar 实现的。
        supportActionBar?.let {
            // 当 ActionBar 不为空时，进行如下操作。
            // 将导航按钮显示出来
            it.setDisplayHomeAsUpEnabled(true)
            // 设置导航按钮的图标。
            // 实际上，Toolbar 最左侧的这个按钮就叫做 Home 按钮，
            // 它默认的图标是一个返回的箭头，含义是返回上一个 Activity，这里将它默认的样式和功能都进行了修改。
            it.setHomeAsUpIndicator(R.drawable.ic_menu)
        }
    }

    ...

    /**
     * 处理各个按钮的点击事件
     */
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        when(item.itemId){
            // 对 Home 按钮的点击事件进行处理，它的 id 永远是 android.R.id.home。
            // 调用 DrawerLayout 的 openDrawer() 将滑动菜单展示出来，这里参数指定了和 XML 中的一致。
            android.R.id.home -> drawerLayout.openDrawer(GravityCompat.START)
            ...
        }
        return true
    }
}

NavigationView 是 Material 库中提供的一个控件，它不仅是严格按照 Material Design 的要求来设计的，而且可以将滑动菜单页面的实现变得非常简单。

首先添加依赖库：

1
2
3
    implementation 'com.google.android.material:material:1.1.0'
//    实现图片圆形化
    implementation 'de.hdodenhof:circleimageview:3.0.1'

然后在 res -> menu -> 新建文件（选择 Menu resource file ）：

nav_menu.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">

<!--   group 标签表示一个组，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/navLocation"
        android:icon="@drawable/nav_location"
        android:title="Location"/>

    <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>

准备 headerLayout，这是一个可随意定制的布局：

navheader.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?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="@color/colorPrimary">

    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:id="@+id/iconImage"
        android:src="@drawable/nav_icon"
        android:layout_centerInParent="true"/>
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/tvMailText"
        android:layout_alignParentBottom="true"
        android:text="tonygreendev@gmail.com"
        android:textColor="#FFF"
        android:textSize="14sp"/>
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/tvUserText"
        android:layout_above="@id/tvMailText"
        android:text="Tony Green"
        android:textColor="#FFF"
        android:textSize="14sp"/>

</RelativeLayout>

修改布局页面代码：

activity_main.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:id="@+id/drawerLayout">

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

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

    </FrameLayout>
    
<!-- 将之前的 TextView 替换成了 NavigationView -->
    
   <com.google.android.material.navigation.NavigationView
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:id="@+id/navView"
       android:layout_gravity="start"
       app:menu="@menu/nav_menu"
       app:headerLayout="@layout/navheader"/>

</androidx.drawerlayout.widget.DrawerLayout>

为 NavigationView 的菜单项处理点击事件：

MainActivity.kt
1
2
3
4
5
6
7
8
9
// 为 NavigationView 的菜单项处理点击事件
navView.setCheckedItem(R.id.navCall)
// 设置一个菜单项选中事件的监听器
navView.setNavigationItemSelectedListener {
    // 在这里处理菜单项选中的处理逻辑
    // 将滑动菜单关闭，并返回 true 表示此事件已被处理。
    drawerLayout.closeDrawers()
    true
}

悬浮按钮和可交互提示

立面设计是 MD 中一条非常重要的设计思想，而悬浮按钮是其中最简单且最具代表性的立面设计了。

FloatingActionButton

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

修改布局代码：

activity_main.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:id="@+id/drawerLayout">

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

        ...

<!-- end：根据系统语言，如果是从左往右，那么 end 表示在右边。反之，end 就表示在左边。     -->
<!-- app:elevation="8dp"：指悬浮的高度。值越大，投影的范围也越大，但是投影效果越淡。一般使用默认的即可。-->

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

    </FrameLayout>

  ...

</androidx.drawerlayout.widget.DrawerLayout>

处理点击事件：

1
2
3
4
// 为悬浮按钮处理点击事件，和普通的 Button 其实没什么两样。
fab.setOnClickListener{
    Toast.makeText(this,"FAB clicked",Toast.LENGTH_SHORT).show()
}

Snackbar

提示工具中：

  • Toast 的作用是告诉用户现在发生了什么事情，但用户只能被动接收这个事情。
  • Snackbar 则允许在提示中加入一个可交互的按钮。（比如可以撤回用户当下进行的操作，如误删数据。）
1
2
3
4
5
6
7
// 可交互式提示工具
// 调用 make() 创建一个 Snackbar 对象。
// 第一个参数只要是当前界面布局的任意一个 View 都可以，Snackbar 会使用这个 View 自动查找最外层的布局，用于展示提示信息。
// 调用 setAction() 设置一个动作
Snackbar.make(view,"Data deleted",Snackbar.LENGTH_SHORT).setAction("Undo"){
          Toast.makeText(this,"Data restored",Toast.LENGTH_SHORT).show()
    }.show()

CoordinatorLayout

它可以说是一个加强版的 FrameLayout，由 AndroidX 库提供。它在普通情况下的作用和 FrameLayout 基本一致，但它拥有一些额外的 Material 能力。

事实上，CoordinatorLayout 可以监听所有子控件的各种事件，并自动做出最为合理的响应。比如，上面的 Snackbar 提示将悬浮按钮遮挡住了，而如果能让 CoordinatorLayout 监听到 Snackbar 的弹出事件，那么它会自动将内部的 FloatingActionButton 向上偏移。(虽然 Snackbar 不是它的子控件，但 Snackbar 接收的第一个参数 view 就是用来指定 Snackbar 是基于哪个 View 触发的，而我们传入了 FloatingActionButton 本身，而 FloatingActionButton 是 CoordinatorLayout 的子控件，因此这个事件就能被监听到了。)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:id="@+id/drawerLayout">

<!-- 将 FrameLayout 替换掉，而且 CoordinatorLayout 本身就是一个加强版的 FrameLayout，所以这种替换也不会有任何的副作用。 -->
    
    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

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

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

    ...

</androidx.drawerlayout.widget.DrawerLayout>

卡片式布局

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

MaterialCardView

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

1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_margin="5dp"
    app:cardCornerRadius="4dp">

<!-- app:cardCornerRadius:指定卡片圆角的弧度   -->
<!-- app:elevation：指定卡片的高度   -->
    
</com.google.android.material.card.MaterialCardView>

接下来结合 RecyclerView 和 Glide 来做展示：

首先添加依赖：

1
2
implementation 'androidx.recyclerview:recyclerview:1.1.0'
implementation 'com.github.bumptech.glide:glide:4.9.0'

接着定义一个实体类：

1
class Fruit(val name: String,val imageId:Int)

然后为 RecyclerView 的子项指定一个自定义的布局：

item_cardview.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_margin="5dp"
    app:cardCornerRadius="4dp">

<!-- app:cardCornerRadius:指定卡片圆角的弧度   -->
<!-- app:elevation：指定卡片的高度   -->

<!-- MaterialCardView 是一个 FrameLayout，没有什么方便的定位方式，这里嵌套 LinearLayout 来定位。   -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

<!--   scaleType 指图片的缩放模式，centerCrop 指让图片保持原有比例填充满 ImageView，并将超出屏幕的部分裁减掉。     -->

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

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

    </LinearLayout>

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

再为 RecyclerView 准备一个适配器：

FruitAdapter.kt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class FruitAdapter(val mContext: Context,val mList:List<Fruit>):RecyclerView.Adapter<FruitAdapter.ViewHolder>() {

    inner class ViewHolder(view: View):RecyclerView.ViewHolder(view){
        val iv:ImageView = view.findViewById(R.id.iv)
        val tv:TextView = view.findViewById(R.id.tv)
    }

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

    override fun getItemCount() = mList.size

    override fun onBindViewHolder(holder: FruitAdapter.ViewHolder, position: Int) {
        val fruit = mList[position]
        holder.tv.text = fruit.name
        Glide.with(mContext).load(fruit.imageId).into(holder.iv)
    }
}

最后修改 MainActivity 中的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
class MainActivity : AppCompatActivity() {

    val fruits = mutableListOf(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))

    val fruitList = ArrayList<Fruit>()

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

        initView()
        initData()
    }

    private fun initData() {
        initFruits()
        val layoutManager = GridLayoutManager(this, 2)
        recyclerView.layoutManager = layoutManager
        val adapter = FruitAdapter(this,fruitList)
        recyclerView.adapter = adapter
    }

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

    private fun initView() {
     ...
    }
    ...
}

注意：当引入 Material 库后，还需要将 res/values/style.xml 中 AppTheme 的 parent 主题改为 Theme.MaterialComponents.Light.NoActionBar，否则在使用接下来的一些控件可能会遇到崩溃问题。

1
2
3
4
5
6
7
8
9
10
11
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

AppBarLayout

在上面例子中，最终呈现的效果是 RecyclerView 会把 Toolbar 遮挡住，因为它们都是放置在 CoordinatorLayout 中的，而 CoordinatorLayout 就是一个加强版的 FrameLayout，FrameLayout 中的控件都是默认位于左上角，从而产生了遮挡的现象。也正是因为 CoordinatorLayout，因此有一些更加巧妙的解决办法。

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

这里要解决上面例子的问题只需要两步：

  • 将 Toolbar 嵌套在 AppBarLayout 中
  • 给 RecyclerView 指定一个布局行为
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:id="@+id/drawerLayout">

    <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">
            // 将 Toolbar 嵌套在 AppBarLayout 中
            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:id="@+id/toolbar"
                android:background="@color/colorPrimary"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
            
        </com.google.android.material.appbar.AppBarLayout>
        

        <androidx.recyclerview.widget.RecyclerView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/recyclerView"
            // 给 RecyclerView 指定一个布局行为                                     
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
      
       ...
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
    ...
</androidx.drawerlayout.widget.DrawerLayout>

事实上，当 RecyclerView 滚动时就已经将滚动事件通知给 AppBarLayout 了，当 AppBarLayout 接收到滚动事件时，它内部的子控件其实是可以指定如何去响应这些事件的，通过 app:layout_scrollFlags 属性实现。

1
2
3
4
5
6
7
8
9
10
11
<androidx.appcompat.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:id="@+id/toolbar"
    android:background="@color/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
// srcoll：表示当 RV 向上滚动时，Toolbar 会跟随向上滚动并隐藏。
// enterAlways：表示当 RV 向下滚动时，Toolbar 会跟随向下滚动并重新显示。
// snap：表示当 Toolbar 还没有完全隐藏或显示时，会根据当前滑动的距离，自动选择是隐藏还是显示。
    app:layout_scrollFlags="scroll|enterAlways|snap"/>

下拉刷新

SwipeRefreshLayout 是用于实现下拉刷新功能的核心类。

首先添加依赖：

1
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0'

修改布局文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
    android:id="@+id/swipeRefresh"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    // 由于 RecyclerView 变成了子类，因此 app:layout_behavior 声明的布局行为也要移过来。                                                   
    app:layout_behavior="@string/appbar_scrolling_view_behavior">
    
    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/recyclerView"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
    
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

修改 MainActivity 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
private fun initView() {
    // 设置下拉刷新进度条的颜色
    swipeRefresh.setColorSchemeResources(R.color.colorPrimary)
    // 设置下拉刷新的监听器
    swipeRefresh.setOnRefreshListener {
        refreshFruits(adapter)
    }
}

private fun refreshFruits(adapter: FruitAdapter) {
    thread {
        // 本地刷新操作速度非常快，这里为了看到刷新效果，所以将线程沉睡两秒。
        Thread.sleep(2000)
        // 切换回主线程
        runOnUiThread{
            initFruits()
            adapter.notifyDataSetChanged()
            // 调用 setRefreshing() 并传入 false，表示刷新事件结束，并隐藏刷新进度条。
            swipeRefresh.isRefreshing = false
        }
    }
}

可折叠式标题栏

CollapsingToolbarLayout

它是由 Material 库提供的一个作用于 Toolbar 基础之上的布局。它可以让 Toolbar 的效果变得更加丰富，不仅仅是展示一个标题栏，而且能够实现非常华丽的效果。

注意：CollapsingToolbarLayout 是不能独立存在的，它在设计时就被限定只能作为 AppBarLayout 的直接子布局来使用。而 AppBarLayout 又必须是 CoordinatorLayout 的子布局。

示例（Kotlin）：

首先为 RecyclerView 的 item 项创建一个详情页：

activity_fruit.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".FruitActivity">

<!--  标题栏  -->
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="250dp">

<!--  android:theme 属性指定一个主题，其实与之前 Toolbar 的意思一样，只不过这里要实现更加高级的 Toolbar 效果，因此需要将这个主题的指定提到上一层来。-->
<!--  app:contentScrim 属性用于指定 CollapsingToolbarLayout 在趋于折叠状态以及折叠之后的背景色。其实折叠后就是一个普通的 Toolbar。-->
<!--  app:layout_scrollFlags 中 scroll 表示随内容一起滚动，exitUntilCollapsed 表示折叠后保留在界面上，不在移出屏幕。 -->
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/collapsingToolbar"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

<!--   这个高级版的标题栏是由普通的标题栏加上图片组合而成   -->
<!--   app:layout_collapseMode 属性指定当前控件在 CollapsingToolbarLayout 折叠过程中的折叠模式，
pin 表示位置始终不变，parallax 表示在折叠过程中会产生一定的错位偏移。 -->

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

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

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

<!-- 内容部分   -->
<!-- NestedScrollView 在 ScrollView 的基础上还增加了嵌套响应滚动事件的功能   -->
<!-- 由于 CoordinatorLayout 本身已经可以响应滚动事件了，因此在它的内部就需要使用 NestedScrollView 或 RecyclerView 这样的布局。 -->
    <androidx.core.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="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:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/tvFruitContent"
                    android:layout_margin="10dp"/>

            </com.google.android.material.card.MaterialCardView>
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>

<!--  使用 app:layout_anchor 设置一个锚点，这样悬浮按钮会出现在标题栏区域内。 -->
    <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/appBar"
        app:layout_anchorGravity="bottom|end"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

修改 FruitActivity 中的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
class FruitActivity : AppCompatActivity() {

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

    private var fruitName = ""
    private var fruitImageId = 0

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

        initView()
        initData()
    }

    private fun initData() {
        fruitName = intent.getStringExtra(FRUIT_NAME)?:""
        fruitImageId = intent.getIntExtra(FRUIT_IMAGE_ID,0)
        collapsingToolbar.title = fruitName
        Glide.with(this).load(fruitImageId).into(ivFruit)
        tvFruitContent.text = generateFruitContent(fruitName)
    }

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

    private fun generateFruitContent(fruitName: String) = fruitName.repeat(500)

    private fun initView() {
        setSupportActionBar(toolbar)
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
    }
}

修改 FruitAdapter 中代码，添加点击事件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
class FruitAdapter(val mContext: Context,val mList:List<Fruit>):RecyclerView.Adapter<FruitAdapter.ViewHolder>() {

    inner class ViewHolder(view: View):RecyclerView.ViewHolder(view){
        val iv:ImageView = view.findViewById(R.id.iv)
        val tv:TextView = view.findViewById(R.id.tv)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): FruitAdapter.ViewHolder {
        val view =LayoutInflater.from(mContext).inflate(R.layout.item_cardview,parent,false)
        val holder = ViewHolder(view)
        holder.itemView.setOnClickListener{
            val position = holder.adapterPosition
            val fruit = mList[position]
            val intent = Intent(mContext,FruitActivity::class.java).apply {
                putExtra(FruitActivity.FRUIT_NAME,fruit.name)
                putExtra(FruitActivity.FRUIT_IMAGE_ID,fruit.imageId)
            }
            mContext.startActivity(intent)
        }
        return holder
    }

    override fun getItemCount() = mList.size

    override fun onBindViewHolder(holder: FruitAdapter.ViewHolder, position: Int) {
        val fruit = mList[position]
        holder.tv.text = fruit.name
        Glide.with(mContext).load(fruit.imageId).into(holder.iv)
    }
}

充分利用系统状态栏空间

在 Android 5.0 系统之后，可通过 android:fitsSystemWindows 属性来对状态栏的背景或颜色进行操作。

在 CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout 这种嵌套结构的布局中，将控件的 android:fitsSystemWindows 属性指定成 true，就表示该控件会出现在系统状态栏里，并且还要将此控件布局结构中的所有父布局都设置上这个属性。

修改布局代码：

activity_fruit.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".FruitActivity"
    // 添加属性                                                 
    android:fitsSystemWindows="true">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        // 添加属性                                               
        android:fitsSystemWindows="true">

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

        <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/ivFruit"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                // 添加属性     
                android:fitsSystemWindows="true"/>

            ...
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>
   ...
</androidx.coordinatorlayout.widget.CoordinatorLayout>

接下来在程序的主题中将状态栏颜色指定成透明：

res/values/styles.xml
1
2
3
4
5
6
7
8
9
<resources>
    ...
  
    // 定义一个专门给 FruitActivity 使用的主题。它继承了父主题和其中的所有特性，并在此基础上自定义。
    <style name="FruitActivityTheme" parent="AppTheme">
       // 将状态栏的颜色指定成透明色
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
</resources>

最后使用这个主题：

AndroidManifest.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.material">

    <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/AppTheme">
        ...
        <activity
            android:name=".FruitActivity"
            android:theme="@style/FruitActivityTheme">
        </activity>
    </application>
</manifest>

备注

参考资料：

第一行代码(第3版)

传送门：GitHub