安卓进阶——Material Design库

✅作者简介:大家好,我是 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" />
Kotlin 复制代码
    private fun setupToolbar() {
        setSupportActionBar(toolbar)
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        supportActionBar?.setHomeAsUpIndicator(android.R.drawable.ic_menu_more)
    }
特性 ActionBar(旧版) Toolbar(现代推荐)
位置​ 固定在窗口顶部 可以放在布局的任何位置​​(如底部、中间,甚至多个Toolbar)
灵活性​ 定制性差,修改困难 高度可定制​​,可以像普通 View 一样添加子视图
控制权​ 由系统窗口管理 由你的布局文件管理​​,完全掌控
兼容性​ 需要依赖 Activity 主题 通过 AndroidX 库可完美兼容到低版本
[Toolbar 与旧版 ActionBar 的主要区别]

一个标准的 Toolbar 通常包含以下几个区域:

  1. ​导航按钮(Navigation Icon)​​:通常是一个"返回"箭头或汉堡菜单图标,用于返回上一个页面或打开导航抽屉。

  2. ​Logo 和标题(Logo & Title)​​:显示应用的 Logo 和当前页面的标题。标题(Title)和子标题(Subtitle)可以分别设置。

  3. ​菜单项(Menu Items)​​:工具栏上的操作按钮,如搜索、设置、分享等。这些选项来自一个菜单资源文件。

  4. ​内容区域(Content Area)​​:甚至可以嵌入自定义视图,比如一个搜索框或选项卡。


NavigationView​ ​ 是 Android Material Design 组件库中的一个控件,通常用于实现 ​​侧滑导航菜单(Drawer Navigation)​ ​。它通常与 ​​DrawerLayout​​ 配合使用,提供一种常见的应用导航模式(比如 Gmail、Google Play 等应用的左侧滑出菜单)。

​NavigationView 的特点​

  1. ​Material Design 风格​​:遵循 Material Design 设计规范,提供美观的菜单样式。

  2. ​菜单可定制​​:可以通过 XML 定义菜单项,支持分组、图标、标题等。

  3. ​头部视图支持​​:可以在顶部添加一个自定义的头部布局(如用户信息、头像等)。

  4. ​与 DrawerLayout 配合​ ​:通常作为 DrawerLayout的子视图,实现侧滑效果。

  5. ​兼容性好​ ​:通过 ​​AndroidX​​ 库支持旧版 Android(API 16+)。

​NavigationView 的基本结构​

一个典型的 NavigationView 通常包含:

  1. ​Header(头部视图)​​(可选):显示用户信息、头像等。

  2. ​Menu(菜单项)​​:定义导航选项,如"主页"、"设置"、"个人资料"等。

  3. ​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" />
Kotlin 复制代码
    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 设置大小(normalmini
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" />
Kotlin 复制代码
    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
Kotlin 复制代码
            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)​ ​ 效果。它可以让视图从屏幕底部滑出,支持 ​​拖动交互​​,并可以停留在不同的状态(如展开、折叠、隐藏)。

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>
Kotlin 复制代码
    private 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 的核心特点​

  1. ​子视图联动​ ​:通过 Behavior实现视图之间的交互(如 FAB 随 Snackbar 上移)。

  2. ​Material Design 兼容​ ​:完美支持 AppBarLayoutFloatingActionButtonBottomSheetBehavior等组件。

  3. ​手势协调​​:处理滚动、拖动、嵌套滑动等复杂手势。

  4. ​灵活布局​ ​:可以嵌套任意视图,但通常与 AppBarLayoutRecyclerView等配合使用。

​CoordinatorLayout 的常见使用场景​

场景 说明
​FAB + Snackbar 联动​ Snackbar 弹出时,FAB 自动上移避免遮挡
​折叠工具栏(CollapsingToolbarLayout)​ 图片工具栏随滚动折叠/展开
​底部弹窗(BottomSheetBehavior)​ 视图从底部滑出,支持拖动交互
​视差滚动(Parallax Scrolling)​ 不同视图以不同速度滚动

九. AppBarLayout

​AppBarLayout​ ​ 是 Material Design 组件库中的一个垂直线性布局(继承自 LinearLayout),专门用于实现 ​​可折叠的工具栏(Collapsing Toolbar)​ ​ 效果。它通常与 CoordinatorLayoutCollapsingToolbarLayout和可滚动视图(如 RecyclerViewNestedScrollView)配合使用,让应用栏(App Bar)能够响应滚动事件,实现动态展开/折叠的视觉效果。

​AppBarLayout 的核心特点​

  • ​响应滚动行为​ ​:根据关联的可滚动视图(如 RecyclerView)的滚动,自动调整高度或位置。

  • 支持多种折叠模式​​:

    • ​完全展开​​:显示完整内容(如图片、大标题)。

    • ​折叠固定​ ​:仅显示工具栏(如 Toolbar)。

    • ​视差效果​​:子视图以不同速度折叠(如图片渐隐)。

    • ​Material Design 兼容​ ​:完美配合 ToolbarTabLayoutCollapsingToolbarLayout等组件。

​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 官方提供的下拉刷新组件,用于实现 ​​"下拉刷新"​ ​ 功能(类似微信朋友圈、微博的下拉刷新效果)。它包裹一个可滚动视图(如 RecyclerViewListViewScrollView),监听用户下拉手势,触发数据刷新并显示加载动画。

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>
Kotlin 复制代码
    private fun setupSwipeRefreshLayout() {
        swipeRefreshLayout.setOnRefreshListener {
            // 模拟刷新操作
            swipeRefreshLayout.postDelayed({
                swipeRefreshLayout.isRefreshing = false
                Snackbar.make(coordinatorLayout, "刷新完成", Snackbar.LENGTH_SHORT).show()
            }, 2000)
        }
    }

​SwipeRefreshLayout 的核心特点​

  1. ​内置动画​​:默认显示圆形进度条(Material Design 风格)。

  2. ​手势监听​​:自动检测用户下拉动作,触发刷新回调。

  3. ​兼容性​ ​:支持所有可滚动视图(RecyclerViewListViewNestedScrollView等)。

  4. ​自定义灵活​​:可修改加载动画颜色、禁用刷新等。

​SwipeRefreshLayout 的常见使用场景​

场景 说明
​列表数据刷新​ 如新闻列表、社交动态的实时更新
​内容重新加载​ 网络请求失败后手动下拉重试
​自定义刷新样式​ 替换默认进度条为 Lottie 动画

十三. TabLayout

TabLayout​ ​ 是 Material Design 组件库中的一个标签栏控件,用于实现 ​​顶部或底部标签页切换​ ​ 功能(类似 Chrome 浏览器的标签页)。它通常与 ViewPagerViewPager2结合使用,提供滑动切换内容的效果。

XML 复制代码
            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tabLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabMode="scrollable" />
Kotlin 复制代码
    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 的"商品详情""评价""推荐"标签
相关推荐
佳哥的技术分享3 小时前
kotlin基于MVVM架构构建项目
android·开发语言·kotlin
折翅鵬3 小时前
Flutter兼容性问题:Could not get unknown property ‘flutter‘ for extension ‘android‘
android·flutter
2501_916007474 小时前
免费iOS加固方案指南
android·macos·ios·小程序·uni-app·cocoa·iphone
毕设源码-邱学长8 小时前
【开题答辩全过程】以 基于Android的综合社交系统为例,包含答辩的问题和答案
android
雨白13 小时前
玩转 Flow 操作符(二):时间控制、聚合与组合
android·kotlin
Jerry13 小时前
Compose 基础知识章节合集
android
Jerry13 小时前
Compose 布局、主题设置和动画测试
android
Zender Han14 小时前
Flutter 状态管理详解:深入理解与使用 Bloc
android·flutter·ios
Meteors.14 小时前
安卓进阶——UI控件
ui·安卓