安卓进阶——Material Design库
✅作者简介：大家好，我是 Meteors., 向往着更加简洁高效的代码写法与编程方式，持续分享Java技术内容。
🍎个人主页：Meteors.的博客
💞当前专栏：知识分享
✨特色专栏：知识分享
🥭本文内容：安卓进阶——Material Design库
📚 ** ps ** ：阅读文章如果有问题或者疑惑，欢迎在评论区提问或指出。
目录
一. Toolbar
三. FloatingActionButton
四. Snackbar
五. CardView
六. BottomSheetBehavior
七. DrawerLayout
八. CoordinatorLayout
九. AppBarLayout
十. CollapsingToolbarLayout
十一. TextInputLayout
十二. SwipeRefreshLayout
十三. TabLayout
一. Toolbar
Toolbar 是在 Android 5.0（API level 21）中引入的一个功能强大的视图控件，用于替代传统的 ActionBar。你可以将它理解为应用的“顶部导航栏”，但它比 ActionBar 更加灵活和强大。
简单来说，Toolbar 是一个可以放在布局中任何位置的、高度可定制的 ActionBar。
<androidx.appcompat.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"app:layout_collapseMode="pin" />private fun setupToolbar() {setSupportActionBar(toolbar)supportActionBar?.setDisplayHomeAsUpEnabled(true)supportActionBar?.setHomeAsUpIndicator(android.R.drawable.ic_menu_more)}
Toolbar 与旧版 ActionBar 的主要区别
特性 ActionBar（旧版） Toolbar（现代推荐） 位置 固定在窗口顶部 可以放在布局的任何位置（如底部、中间，甚至多个Toolbar） 灵活性 定制性差，修改困难 高度可定制，可以像普通 View 一样添加子视图 控制权 由系统窗口管理 由你的布局文件管理，完全掌控 兼容性 需要依赖 Activity 主题 通过 AndroidX 库可完美兼容到低版本 一个标准的 Toolbar 通常包含以下几个区域：
导航按钮（Navigation Icon）：通常是一个“返回”箭头或汉堡菜单图标，用于返回上一个页面或打开导航抽屉。
Logo 和标题（Logo & Title）：显示应用的 Logo 和当前页面的标题。标题（Title）和子标题（Subtitle）可以分别设置。
菜单项（Menu Items）：工具栏上的操作按钮，如搜索、设置、分享等。这些选项来自一个菜单资源文件。
内容区域（Content Area）：甚至可以嵌入自定义视图，比如一个搜索框或选项卡。
二. NavigationView
NavigationView 是 Android Material Design 组件库中的一个控件，通常用于实现 侧滑导航菜单（Drawer Navigation）。它通常与 DrawerLayout 配合使用，提供一种常见的应用导航模式（比如 Gmail、Google Play 等应用的左侧滑出菜单）。
NavigationView 的特点
Material Design 风格：遵循 Material Design 设计规范，提供美观的菜单样式。
菜单可定制：可以通过 XML 定义菜单项，支持分组、图标、标题等。
头部视图支持：可以在顶部添加一个自定义的头部布局（如用户信息、头像等）。
与 DrawerLayout 配合：通常作为
DrawerLayout的子视图，实现侧滑效果。兼容性好：通过 AndroidX 库支持旧版 Android（API 16+）。
NavigationView 的基本结构
一个典型的 NavigationView 通常包含：
Header（头部视图）（可选）：显示用户信息、头像等。
Menu（菜单项）：定义导航选项，如“主页”、“设置”、“个人资料”等。
Subheader（分组标题）（可选）：对菜单项进行分组。
<com.google.android.material.navigation.NavigationViewandroid:id="@+id/navigation_view"android:layout_width="wrap_content"android:layout_height="match_parent"android:layout_gravity="start"app:menu="@menu/navigation_menu" />private fun setupNavigationView() {navigationView.setNavigationItemSelectedListener { menuItem ->when (menuItem.itemId) {R.id.nav_home -> {Toast.makeText(this, "首页", Toast.LENGTH_SHORT).show()true}R.id.nav_settings -> {Toast.makeText(this, "设置", Toast.LENGTH_SHORT).show()true}R.id.nav_about -> {Toast.makeText(this, "关于", Toast.LENGTH_SHORT).show()true}else -> false}drawerLayout.closeDrawers()true}}
三. FloatingActionButton
FloatingActionButton（FAB） 是 Material Design 中的一个重要组件，它是一个圆形的悬浮按钮，通常位于屏幕的右下角，用于触发应用的主要操作（如“新建”、“发送”、“添加”等）。它的设计特点是：
醒目且易于点击：悬浮在 UI 之上，吸引用户注意。
代表主要操作：通常用于应用中最常用的功能（如 Gmail 的“写邮件”按钮）。
支持多种交互：可以点击、长按，甚至扩展为多个子按钮（FAB Menu）。
FAB 的基本属性
属性
说明
app:srcCompat设置 FAB 的图标（推荐使用
VectorDrawable）
app:backgroundTint设置 FAB 的背景颜色
app:tint设置图标的颜色
app:elevation设置阴影高度（默认 6dp）
app:fabSize设置大小（
normal或mini）
app:layout_anchor设置锚点（用于与其他视图对齐）
app:layout_anchorGravity设置锚点位置（如
bottom\|end）
<com.google.android.material.floatingactionbutton.FloatingActionButtonandroid:id="@+id/fab"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom|end"android:layout_margin="16dp"android:src="@android:drawable/ic_dialog_email" />private fun setupFab() {fab.setOnClickListener {Snackbar.make(coordinatorLayout, "这是一个 Snackbar", Snackbar.LENGTH_LONG).setAction("撤销") {Toast.makeText(this, "已撤销", Toast.LENGTH_SHORT).show()}.show()}}
四. Snackbar
Snackbar 是 Android Material Design 中的一个轻量级提示控件，用于在屏幕底部显示简短的消息，并提供可选的操作按钮。它的特点是：
非阻塞式提示：不会像 Dialog 那样打断用户操作。
自动消失：默认短暂显示后自动关闭（可手动控制）。
支持交互：可以添加一个操作按钮（如“撤销”）。
与 FAB 联动：在显示时会自动调整位置，避免遮挡 FloatingActionButton。
Material Design 风格：遵循 Material 设计规范，外观统一。
典型场景：
提示“消息已发送”（自动消失）。
提供“删除文件”后的“撤销”选项。
显示网络请求失败，并提供“重试”按钮。
Snackbar 的基本属性
属性/方法
说明
make()创建 Snackbar（必须指定一个父视图）
setText()设置提示文本
setDuration()设置显示时长（
LENGTH_SHORT/LENGTH_LONG/LENGTH_INDEFINITE）
setAction()添加操作按钮及点击事件
setActionTextColor()设置操作按钮文字颜色
setBackgroundTint()设置背景颜色
show()显示 Snackbar
dismiss()手动关闭 Snackbar
Snackbar.make(coordinatorLayout, "这是一个 Snackbar", Snackbar.LENGTH_LONG).setAction("撤销") {Toast.makeText(this, "已撤销", Toast.LENGTH_SHORT).show()}.show()
五. CardView
CardView 是 Android Material Design 中的一个重要组件，用于显示卡片式布局，常用于展示图片、文本、按钮等内容，并提供阴影、圆角等视觉效果。它继承自
FrameLayout，但提供了更丰富的样式控制。CardView 的特点
Material Design 风格：默认带有阴影和圆角，符合 Material Design 设计规范。
可定制性强：可以调整圆角大小、阴影高度、背景颜色等。
兼容性好：通过 AndroidX 库支持旧版 Android（API 9+）。
常用场景：
商品卡片（如电商 App）
新闻卡片（如新闻 App）
用户资料卡片（如社交 App）
设置项卡片（如设置界面）
CardView 的基本属性
属性
说明
app:cardCornerRadius设置卡片的圆角半径
app:cardElevation设置卡片的阴影高度（影响阴影大小）
app:cardBackgroundColor设置卡片的背景颜色
app:cardMaxElevation设置卡片的最大阴影高度
app:contentPadding设置卡片内部内容的内边距
app:cardPreventCornerOverlap防止圆角被内容覆盖（API 21+）
app:cardUseCompatPadding在旧设备上启用兼容模式（确保阴影可见）
六. BottomSheetBehavior
BottomSheetBehavior 是 Android Material Design 组件库中的一个行为类（Behavior），用于实现 底部弹窗（Bottom Sheet） 效果。它可以让视图从屏幕底部滑出，支持 拖动交互，并可以停留在不同的状态（如展开、折叠、隐藏）。
<!-- Bottom Sheet --><LinearLayoutandroid:id="@+id/bottom_sheet"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"android:background="@android:color/white"app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"app:behavior_hideable="true"app:behavior_peekHeight="0dp"><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:padding="16dp"android:text="这是底部表单"android:textSize="18sp"android:textStyle="bold"android:gravity="center"/><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:padding="16dp"android:text="你可以向上拖拽这个视图，或者点击下方按钮来显示它。"android:gravity="center"/><Buttonandroid:id="@+id/btn_close_bottom_sheet"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_margin="16dp"android:text="关闭底部表单" /></LinearLayout>private fun setBottomSheetBehavior() {bottomSheetBehaviorBtn.setOnClickListener {// 显示 BottomSheetbottomSheetBehavior.state = BottomSheetBehavior.STATE_EXPANDED}}典型应用场景：
显示更多操作选项（类似微信的“发送图片”底部菜单）。
展示详细信息（如地图 App 的地点卡片）。
替代 Dialog，提供更流畅的用户体验。
BottomSheetBehavior 的 3 种状态
状态
说明
STATE_EXPANDED完全展开（高度充满屏幕或达到
peekHeight）
STATE_COLLAPSED折叠状态（仅显示
peekHeight的高度）
STATE_HIDDEN完全隐藏（滑出屏幕底部）
七. DrawerLayout
Android 中的 DrawerLayout 介绍与使用
DrawerLayout 是 Android 支持库（现为 AndroidX）提供的一个布局容器，用于实现 侧滑菜单（Navigation Drawer），即从屏幕边缘滑出的抽屉式导航栏。它通常用于应用的主导航菜单（如 Gmail、YouTube 的左侧菜单）。我的根布局用的是这种布局，所以可以屏幕边缘滑出或点击菜单按钮来显示导航菜单。
<?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:id="@+id/drawer_layout"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"tools:context=".MainActivity">DrawerLayout 的核心特点
支持左右两侧抽屉：
左侧抽屉（最常见，用于主导航）。
右侧抽屉（较少用，可用于辅助功能）。
手势滑动触发：
用户可以从屏幕边缘滑出菜单。
也可以通过按钮点击打开/关闭。
Material Design 兼容：
与
NavigationView结合，提供标准的菜单样式。灵活的内容结构：
主内容区域 + 抽屉菜单区域。
八. CoordinatorLayout
CoordinatorLayout 是 Android Material Design 中的一个 超级 FrameLayout，专门用于协调子视图之间的交互行为。它通过
Behavior机制，让子视图之间可以相互响应（如滑动、折叠、联动等），是实现复杂交互动画的核心容器。
CoordinatorLayout 的核心特点
子视图联动：通过
Behavior实现视图之间的交互（如 FAB 随 Snackbar 上移）。Material Design 兼容：完美支持
AppBarLayout、FloatingActionButton、BottomSheetBehavior等组件。手势协调：处理滚动、拖动、嵌套滑动等复杂手势。
灵活布局：可以嵌套任意视图，但通常与
AppBarLayout、RecyclerView等配合使用。CoordinatorLayout 的常见使用场景
场景
说明
FAB + Snackbar 联动
Snackbar 弹出时，FAB 自动上移避免遮挡
折叠工具栏（CollapsingToolbarLayout）
图片工具栏随滚动折叠/展开
底部弹窗（BottomSheetBehavior）
视图从底部滑出，支持拖动交互
视差滚动（Parallax Scrolling）
不同视图以不同速度滚动
九. AppBarLayout
AppBarLayout 是 Material Design 组件库中的一个垂直线性布局（继承自
LinearLayout），专门用于实现 可折叠的工具栏（Collapsing Toolbar） 效果。它通常与CoordinatorLayout、CollapsingToolbarLayout和可滚动视图（如RecyclerView、NestedScrollView）配合使用，让应用栏（App Bar）能够响应滚动事件，实现动态展开/折叠的视觉效果。
AppBarLayout 的核心特点
响应滚动行为：根据关联的可滚动视图（如
RecyclerView）的滚动，自动调整高度或位置。支持多种折叠模式：
完全展开：显示完整内容（如图片、大标题）。
折叠固定：仅显示工具栏（如
Toolbar）。视差效果：子视图以不同速度折叠（如图片渐隐）。
Material Design 兼容：完美配合
Toolbar、TabLayout、CollapsingToolbarLayout等组件。AppBarLayout 的常见使用场景
场景
说明
折叠式标题栏
如新闻详情页，滚动时图片折叠，标题保留
带背景图的工具栏
如个人资料页，头像随滚动缩小
动态隐藏的 TabLayout
结合
TabLayout，滚动时隐藏/显示标签栏
十. CollapsingToolbarLayout
CollapsingToolbarLayout 是 Material Design 组件库中的一个布局容器，专门用于实现 可折叠的标题栏（Collapsing Toolbar） 效果。它必须作为
AppBarLayout的直接子视图使用，通过协调滚动视图（如RecyclerView）的滑动事件，实现动态折叠/展开的视觉效果，常见于详情页（如新闻、商品详情）或个人主页。
CollapsingToolbarLayout 的核心特点
动态折叠动画：
背景图或大标题随滚动逐渐折叠，最终仅保留标准
Toolbar。多种折叠模式：
视差效果（Parallax）：子视图以不同速度折叠（如图片渐隐）。
固定模式（Pin）：部分内容（如
Toolbar）始终固定在顶部。Material Design 风格：
支持标题文字缩放、颜色渐变等效果。
依赖关系：
必须嵌套在
AppBarLayout内，并与CoordinatorLayout配合使用。CollapsingToolbarLayout 的常见使用场景
场景
说明
详情页头部折叠
如新闻详情页，滚动时图片折叠成标题栏
个人资料页
用户头像随滚动缩小，最终显示固定工具栏
带背景的搜索栏
搜索框随滚动上移并固定在顶部
十一. TextInputLayout
TextInputLayout 是 Material Design 组件库中的一个布局容器，专门用于增强
EditText的输入体验。它通过浮动标签（Floating Label）、错误提示、字符计数等功能，让表单输入更加直观和美观。
<com.google.android.material.textfield.TextInputLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginBottom="16dp"android:hint="请输入文本"><com.google.android.material.textfield.TextInputEditTextandroid:layout_width="match_parent"android:layout_height="wrap_content" /></com.google.android.material.textfield.TextInputLayout>TextInputLayout 的核心特点
浮动标签（Floating Label）：默认显示提示文字（Hint），输入时标签上浮。
错误提示：可显示错误消息，并自定义样式。
字符计数：实时显示已输入字符数/最大长度。
密码可见性切换：内置图标切换密码明文/密文。
Material Design 风格：支持自定义颜色、形状和动画。
TextInputLayout 的常见使用场景
场景
说明
登录/注册表单
用户名、密码输入框
数据验证
显示格式错误提示（如邮箱无效）
字符限制输入
显示剩余可输入字符数
十二. SwipeRefreshLayout
SwipeRefreshLayout 是 Android 官方提供的下拉刷新组件，用于实现 “下拉刷新” 功能（类似微信朋友圈、微博的下拉刷新效果）。它包裹一个可滚动视图（如
RecyclerView、ListView、ScrollView），监听用户下拉手势，触发数据刷新并显示加载动画。
<androidx.swiperefreshlayout.widget.SwipeRefreshLayoutandroid:id="@+id/swipeRefreshLayout"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior"><androidx.core.widget.NestedScrollViewandroid:layout_width="match_parent"android:layout_height="match_parent"></androidx.core.widget.NestedScrollView></androidx.swiperefreshlayout.widget.SwipeRefreshLayout>private fun setupSwipeRefreshLayout() {swipeRefreshLayout.setOnRefreshListener {// 模拟刷新操作swipeRefreshLayout.postDelayed({swipeRefreshLayout.isRefreshing = falseSnackbar.make(coordinatorLayout, "刷新完成", Snackbar.LENGTH_SHORT).show()}, 2000)}}SwipeRefreshLayout 的核心特点
内置动画：默认显示圆形进度条（Material Design 风格）。
手势监听：自动检测用户下拉动作，触发刷新回调。
兼容性：支持所有可滚动视图（
RecyclerView、ListView、NestedScrollView等）。自定义灵活：可修改加载动画颜色、禁用刷新等。
SwipeRefreshLayout 的常见使用场景
场景
说明
列表数据刷新
如新闻列表、社交动态的实时更新
内容重新加载
网络请求失败后手动下拉重试
自定义刷新样式
替换默认进度条为 Lottie 动画
十三. TabLayout
TabLayout 是 Material Design 组件库中的一个标签栏控件，用于实现 顶部或底部标签页切换 功能（类似 Chrome 浏览器的标签页）。它通常与
ViewPager或ViewPager2结合使用，提供滑动切换内容的效果。
<com.google.android.material.tabs.TabLayoutandroid:id="@+id/tabLayout"android:layout_width="match_parent"android:layout_height="wrap_content"app:tabMode="scrollable" />private fun setupTabs() {for (i in 1..5) {tabLayout.addTab(tabLayout.newTab().setText("标签 $i"))}tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {override fun onTabSelected(tab: TabLayout.Tab?) {Toast.makeText(this@MainActivity, "选择了标签: ${tab?.text}", Toast.LENGTH_SHORT).show()}override fun onTabUnselected(tab: TabLayout.Tab?) {}override fun onTabReselected(tab: TabLayout.Tab?) {Toast.makeText(this@MainActivity, "重新选择了标签: ${tab?.text}", Toast.LENGTH_SHORT).show()}})}TabLayout 的核心特点
Material Design 风格：支持图标、文字、自定义标签样式。
两种显示模式：
MODE_FIXED：标签均分宽度（适合少量标签）。
MODE_SCROLLABLE：标签可横向滚动（适合多标签）。与 ViewPager2 无缝集成：通过
TabLayoutMediator自动同步标签和页面。灵活定制：可修改标签颜色、指示器、字体等。
TabLayout 的常见使用场景
场景
说明
主页分类导航
如新闻 App 的“推荐”“热点”“体育”标签
多页表单切换
如注册流程的分步骤标签
内容分类展示
如电商 App 的“商品详情”“评价”“推荐”标签
