「一文搞懂 Material Design：Toolbar 到 CollapsingToolbar 全攻略」

「一文搞懂 Material Design：Toolbar 到 CollapsingToolbar 全攻略」

前言

Material Design 是 Google 推出的设计语言，提供了一套统一的 UI 组件和规范。本教程涵盖 Android 中最常用的 Material Design 组件。

┌─────────────────────────────────────────────────────────────┐ │ Material Design 组件全景 │ ├─────────────────────────────────────────────────────────────┤ │ │ │ Toolbar 标题栏（ActionBar 的进化） │ │ DrawerLayout 滑动菜单 │ │ FloatingActionButton 悬浮操作按钮 │ │ Snackbar 可交互提示 │ │ CardView 卡片式布局 │ │ SwipeRefreshLayout 下拉刷新 │ │ CollapsingToolbar 可折叠标题栏 │ │ CoordinatorLayout 协调布局 │ │ │ └─────────────────────────────────────────────────────────────┘

零、透明状态栏与沉浸式设计

0.1 fitsSystemWindows 属性

<!-- 让布局延伸到系统窗口区域 --><DrawerLayoutandroid:fitsSystemWindows="true"/>

0.2 透明状态栏设置

// Kotlin 中设置透明状态栏if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.R){window.insetsController?.setSystemBarsAppearance(0,WindowInsetsController.APPEARANCE_LIGHT_STATUS_BARS)}else{@Suppress("DEPRECATION")window.decorView.systemUiVisibility=View.SYSTEM_UI_FLAG_LAYOUT_STABLEorView.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN}

0.3 主题中配置

<!-- styles.xml --><stylename="Theme.App"parent="Theme.Material3.DayNight.NoActionBar"><item name="android:statusBarColor">@android:color/transparent</item> <item name="android:navigationBarColor">@android:color/transparent</item> <item name="android:fitsSystemWindows">true</item></style>

0.4 渐变遮罩效果

<!-- gradient_bottom.xml --><shapexmlns:android="http://schemas.android.com/apk/res/android"><gradientandroid:type="linear"android:angle="90"android:startColor="#AA000000"android:endColor="#00000000"/></shape>

一、Toolbar

1.1 基本用法

// layouts: activity_xxx.xml<androidx.appcompat.widget.Toolbar android:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:background="?attr/colorPrimary"app:popupTheme="@style/ThemeOverlay.MaterialComponents.Light"/>// Activity 中设置setSupportActionBar(toolbar)supportActionBar?.apply{title="标题"subtitle="副标题"setDisplayHomeAsUpEnabled(true)// 显示返回按钮}

1.2 菜单

// 创建菜单：res/menu/xxx_menu.xml<menu xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"><item android:id="@+id/action_search"android:icon="@android:drawable/ic_menu_search"android:title="搜索"app:showAsAction="ifRoom"/><item android:id="@+id/action_share"android:title="分享"app:showAsAction="never"/></menu>// Activity 中加载菜单overridefunonCreateOptionsMenu(menu:Menu?):Boolean{menuInflater.inflate(R.menu.xxx_menu,menu)returntrue}// 处理菜单点击overridefunonOptionsItemSelected(item:MenuItem):Boolean{when(item.itemId){android.R.id.home->{/* 处理返回 */}R.id.action_search->{/* 搜索 */}}returnsuper.onOptionsItemSelected(item)}

1.3 showAsAction 属性

二、DrawerLayout + NavigationView

2.1 布局结构

<androidx.drawerlayout.widget.DrawerLayoutandroid:id="@+id/drawerLayout"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"><!-- 主内容区域 --><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><!-- 内容 --></LinearLayout><!-- 滑动菜单（NavigationView） --><com.google.android.material.navigation.NavigationViewandroid:id="@+id/navigationView"android:layout_width="280dp"android:layout_height="match_parent"android:layout_gravity="start"android:fitsSystemWindows="true"app:headerLayout="@layout/nav_header"app:menu="@menu/nav_menu"/></androidx.drawerlayout.widget.DrawerLayout>

2.2 ActionBarDrawerToggle

valtoggle=ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.drawer_open,R.string.drawer_close)drawerLayout.addDrawerListener(toggle)toggle.syncState()// 处理菜单项点击navigationView.setNavigationItemSelectedListener{menuItem->when(menuItem.itemId){R.id.nav_home->{/* 首页 */}R.id.nav_settings->{/* 设置 */}}drawerLayout.closeDrawer(GravityCompat.START)true}// 处理返回键overridefunonBackPressed(){if(drawerLayout.isDrawerOpen(GravityCompat.START)){drawerLayout.closeDrawer(GravityCompat.START)}else{super.onBackPressed()}}

2.3 NavigationView 菜单

<!-- res/menu/nav_menu.xml --><menu><groupandroid:checkableBehavior="single"><itemandroid:id="@+id/nav_home"android:icon="@android:drawable/ic_menu_view"android:title="首页"/><itemandroid:id="@+id/nav_favorites"android:icon="@android:drawable/btn_star"android:title="收藏"/></group><itemandroid:title="其他"><menu><itemandroid:id="@+id/nav_settings"android:title="设置"/></menu></item></menu><!-- res/layout/nav_header.xml --><LinearLayoutandroid:layout_width="match_parent"android:layout_height="160dp"android:background="@color/purple_500"android:gravity="bottom"android:padding="16dp"><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="Header"android:textColor="@android:color/white"/></LinearLayout>

三、FloatingActionButton

3.1 基本用法

<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_add"app:backgroundTint="@color/purple_500"app:tint="@android:color/white"app:fabSize="normal"/>

3.2 属性

3.3 点击事件

fab.setOnClickListener{// 处理点击}

四、Snackbar

4.1 基本用法

Snackbar.make(view,// CoordinatorLayout 或任意 View"消息内容",Snackbar.LENGTH_LONG).show()

4.2 带操作按钮

Snackbar.make(drawerLayout,"是否删除？",Snackbar.LENGTH_LONG).setAction("删除"){// 执行删除操作}.setActionTextColor(Color.YELLOW).show()

4.3 自定义样式

valsnackbar=Snackbar.make(view,"消息",Snackbar.LENGTH_SHORT)valsnackbarView=snackbar.view snackbarView.setBackgroundColor(Color.DKGRAY)valtextView=snackbarView.findViewById<TextView>(com.google.android.material.R.id.snackbar_text)textView.setTextColor(Color.WHITE)snackbar.show()

4.4 Snackbar 与 FAB 配合

<!-- 必须使用 CoordinatorLayout 作为根布局 --><androidx.coordinatorlayout.widget.CoordinatorLayout><LinearLayout.../><FloatingActionButton.../><!-- Snackbar 会自动上浮，不会遮挡 FAB --></androidx.coordinatorlayout.widget.CoordinatorLayout>

五、CardView

5.1 基本用法

<com.google.android.material.card.MaterialCardViewandroid:id="@+id/cardView"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_margin="8dp"app:cardCornerRadius="12dp"app:cardElevation="4dp"app:rippleColor="@color/purple_200"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"android:padding="16dp"><ImageView.../><TextView.../><TextView.../></LinearLayout></com.google.android.material.card.MaterialCardView>

5.2 属性详解

六、SwipeRefreshLayout

6.1 基本用法

<androidx.swiperefreshlayout.widget.SwipeRefreshLayoutandroid:id="@+id/swipeRefresh"android:layout_width="match_parent"android:layout_height="match_parent"><androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/recyclerView"android:layout_width="match_parent"android:layout_height="match_parent"/></androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

6.2 配置

swipeRefresh.setColorSchemeResources(R.color.purple_500,R.color.purple_700,R.color.teal_200)swipeRefresh.setOnRefreshListener{// 执行刷新操作// 完成后设置 swipeRefresh.isRefreshing = false}

七、CollapsingToolbarLayout

7.1 基本结构

<com.google.android.material.appbar.AppBarLayoutandroid:layout_width="match_parent"android:layout_height="200dp"android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar"><com.google.android.material.appbar.CollapsingToolbarLayoutandroid:id="@+id/collapsingToolbar"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_scrollFlags="scroll|exitUntilCollapsed"app:contentScrim="?attr/colorPrimary"app:expandedTitleMarginStart="16dp"app:expandedTitleMarginBottom="16dp"><ImageViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:scaleType="centerCrop"app:layout_collapseMode="parallax"/><androidx.appcompat.widget.Toolbarandroid: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>

7.2 layout_scrollFlags

7.3 layout_collapseMode

7.4 Kotlin 配置

collapsingToolbar.title="标题"collapsingToolbar.setExpandedTitleColor(Color.WHITE)collapsingToolbar.setCollapsedTitleTextColor(Color.WHITE)

八、CoordinatorLayout

8.1 作用

CoordinatorLayout 是超级布局协调器，让子 View 可以协调工作：

┌─────────────────────────────────────────────────────────────┐ │ CoordinatorLayout 工作原理 │ ├─────────────────────────────────────────────────────────────┤ │ │ │ CoordinatorLayout │ │ ├── 协调子 View 的 Behavior │ │ ├── FAB 与 Snackbar 交互（FAB 自动上浮） │ │ ├── AppBarLayout 与 RecyclerView 交互（标题栏折叠） │ │ └── BottomSheet 与 FAB 交互 │ │ │ └─────────────────────────────────────────────────────────────┘

8.2 配合 AppBarLayout

<CoordinatorLayout><AppBarLayout><CollapsingToolbarLayout><!-- 标题栏内容 --></CollapsingToolbarLayout></AppBarLayout><androidx.recyclerview.widget.RecyclerViewapp:layout_behavior="@string/appbar_scrolling_view_behavior"/></CoordinatorLayout>

九、完整布局结构

┌─────────────────────────────────────────────────────────────┐ │ 完整布局结构图 │ ├─────────────────────────────────────────────────────────────┤ │ │ │ DrawerLayout (根布局) │ │ ├── CoordinatorLayout (主内容) │ │ │ ├── AppBarLayout │ │ │ │ └── CollapsingToolbarLayout │ │ │ │ ├── ImageView (parallax) │ │ │ │ └── Toolbar (pin) │ │ │ │ │ │ │ ├── SwipeRefreshLayout │ │ │ │ └── RecyclerView │ │ │ │ └── MaterialCardView │ │ │ │ │ │ │ └── FAB │ │ │ │ │ └── NavigationView (滑动菜单) │ │ ├── Header │ │ └── Menu │ │ │ └─────────────────────────────────────────────────────────────┘

十、主题和样式

10.1 Material Components 主题

<!-- styles.xml --><stylename="Theme.App"parent="Theme.MaterialComponents.Light.NoActionBar"><item name="colorPrimary">@color/purple_500</item> <item name="colorPrimaryVariant">@color/purple_700</item> <item name="colorOnPrimary">@android:color/white</item> <item name="colorSecondary">@color/teal_200</item> <item name="colorSecondaryVariant">@color/teal_700</item></style>

10.2 Toolbar 样式

<androidx.appcompat.widget.Toolbarandroid:background="?attr/colorPrimary"app:titleTextColor="@android:color/white"app:subtitleTextColor="@android:color/white"/>

总结

┌────────────────────────────────────────────────────────────┐ │ Material Design 全景图 │ ├────────────────────────────────────────────────────────────┤ │ │ │ Toolbar: │ │ ├── setSupportActionBar() - 设为 ActionBar │ │ ├── onCreateOptionsMenu() - 加载菜单 │ │ └── onOptionsItemSelected() - 处理菜单点击 │ │ │ │ DrawerLayout + NavigationView: │ │ ├── layout_gravity="start" - 左侧菜单 │ │ ├── ActionBarDrawerToggle - 同步汉堡按钮状态 │ │ └── setNavigationItemSelectedListener() - 菜单项点击 │ │ │ │ FAB + Snackbar: │ │ ├── CoordinatorLayout 自动协调 FAB 上浮 │ │ ├── setAction() - 添加操作按钮 │ │ └── setActionTextColor() - 自定义按钮颜色 │ │ │ │ CardView: │ │ ├── cardCornerRadius - 圆角 │ │ ├── cardElevation - 阴影 │ │ └── rippleColor - 点击波纹 │ │ │ │ SwipeRefreshLayout: │ │ ├── setColorSchemeResources() - 进度颜色 │ │ └── setOnRefreshListener() - 刷新回调 │ │ │ │ CollapsingToolbarLayout: │ │ ├── layout_scrollFlags - 滚动行为 │ │ ├── layout_collapseMode - 折叠模式 │ │ └── appbar_scrolling_view_behavior - 关联滚动 │ │ │ └────────────────────────────────────────────────────────────┘