✅作者简介:大家好,我是 Meteors., 向往着更加简洁高效的代码写法与编程方式,持续分享Java技术内容。
🍎个人主页:Meteors.的博客
💞当前专栏:知识分享
✨特色专栏:知识分享
🥭本文内容:安卓进阶------Material Design库
📚 ** ps ** :阅读文章如果有问题或者疑惑,欢迎在评论区提问或指出。
目录
[一. Toolbar](#一. Toolbar)
[二. NavigationView](#二. NavigationView)
[三. FloatingActionButton](#三. FloatingActionButton)
[四. Snackbar](#四. Snackbar)
[五. CardView](#五. CardView)
[六. BottomSheetBehavior](#六. BottomSheetBehavior)
[七. DrawerLayout](#七. DrawerLayout)
[八. CoordinatorLayout](#八. CoordinatorLayout)
[九. AppBarLayout](#九. AppBarLayout)
[十. CollapsingToolbarLayout](#十. CollapsingToolbarLayout)
[十一. TextInputLayout](#十一. TextInputLayout)
[十二. SwipeRefreshLayout](#十二. SwipeRefreshLayout)
[十三. TabLayout](#十三. TabLayout)
一. Toolbar
Toolbar 是在 Android 5.0(API level 21)中引入的一个功能强大的视图控件,用于替代传统的 ActionBar。你可以将它理解为应用的"顶部导航栏",但它比 ActionBar 更加灵活和强大。
简单来说,Toolbar 是一个可以放在布局中任何位置的、高度可定制的 ActionBar。
XML<androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" />
Kotlinprivate fun setupToolbar() { setSupportActionBar(toolbar) supportActionBar?.setDisplayHomeAsUpEnabled(true) supportActionBar?.setHomeAsUpIndicator(android.R.drawable.ic_menu_more) }
特性 ActionBar(旧版) Toolbar(现代推荐) 位置 固定在窗口顶部 可以放在布局的任何位置(如底部、中间,甚至多个Toolbar) 灵活性 定制性差,修改困难 高度可定制,可以像普通 View 一样添加子视图 控制权 由系统窗口管理 由你的布局文件管理,完全掌控 兼容性 需要依赖 Activity 主题 通过 AndroidX 库可完美兼容到低版本 [Toolbar 与旧版 ActionBar 的主要区别] 一个标准的 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(分组标题)(可选):对菜单项进行分组。
XML<com.google.android.material.navigation.NavigationView android:id="@+id/navigation_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:menu="@menu/navigation_menu" />
Kotlinprivate 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)
XML<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="@android:drawable/ic_dialog_email" />
Kotlinprivate 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
KotlinSnackbar.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) 效果。它可以让视图从屏幕底部滑出,支持 拖动交互,并可以停留在不同的状态(如展开、折叠、隐藏)。
XML<!-- Bottom Sheet --> <LinearLayout android: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"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="16dp" android:text="这是底部表单" android:textSize="18sp" android:textStyle="bold" android:gravity="center"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="16dp" android:text="你可以向上拖拽这个视图,或者点击下方按钮来显示它。" android:gravity="center"/> <Button android:id="@+id/btn_close_bottom_sheet" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="16dp" android:text="关闭底部表单" /> </LinearLayout>
Kotlinprivate fun setBottomSheetBehavior() { bottomSheetBehaviorBtn.setOnClickListener { // 显示 BottomSheet bottomSheetBehavior.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<?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)、错误提示、字符计数等功能,让表单输入更加直观和美观。
XML<com.google.android.material.textfield.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="16dp" android:hint="请输入文本"> <com.google.android.material.textfield.TextInputEditText android: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),监听用户下拉手势,触发数据刷新并显示加载动画。
XML<androidx.swiperefreshlayout.widget.SwipeRefreshLayout android:id="@+id/swipeRefreshLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <androidx.core.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent"> </androidx.core.widget.NestedScrollView> </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
Kotlinprivate fun setupSwipeRefreshLayout() { swipeRefreshLayout.setOnRefreshListener { // 模拟刷新操作 swipeRefreshLayout.postDelayed({ swipeRefreshLayout.isRefreshing = false Snackbar.make(coordinatorLayout, "刷新完成", Snackbar.LENGTH_SHORT).show() }, 2000) } }SwipeRefreshLayout 的核心特点
内置动画:默认显示圆形进度条(Material Design 风格)。
手势监听:自动检测用户下拉动作,触发刷新回调。
兼容性 :支持所有可滚动视图(
RecyclerView、ListView、NestedScrollView等)。自定义灵活:可修改加载动画颜色、禁用刷新等。
SwipeRefreshLayout 的常见使用场景
场景 说明 列表数据刷新 如新闻列表、社交动态的实时更新 内容重新加载 网络请求失败后手动下拉重试 自定义刷新样式 替换默认进度条为 Lottie 动画
十三. TabLayout
TabLayout 是 Material Design 组件库中的一个标签栏控件,用于实现 顶部或底部标签页切换 功能(类似 Chrome 浏览器的标签页)。它通常与
ViewPager或ViewPager2结合使用,提供滑动切换内容的效果。
XML<com.google.android.material.tabs.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="scrollable" />
Kotlinprivate 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 的"商品详情""评价""推荐"标签












