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

「一文搞懂 Material DesignToolbar 到 CollapsingToolbar 全攻略」前言Material Design 是 Google 推出的设计语言提供了一套统一的 UI 组件和规范。本教程涵盖 Android 中最常用的 Material Design 组件。┌─────────────────────────────────────────────────────────────┐ │ Material Design 组件全景 │ ├─────────────────────────────────────────────────────────────┤ │ │ │ Toolbar 标题栏ActionBar 的进化 │ │ DrawerLayout 滑动菜单 │ │ FloatingActionButton 悬浮操作按钮 │ │ Snackbar 可交互提示 │ │ CardView 卡片式布局 │ │ SwipeRefreshLayout 下拉刷新 │ │ CollapsingToolbar 可折叠标题栏 │ │ CoordinatorLayout 协调布局 │ │ │ └─────────────────────────────────────────────────────────────┘零、透明状态栏与沉浸式设计0.1 fitsSystemWindows 属性!-- 让布局延伸到系统窗口区域 --DrawerLayoutandroid:fitsSystemWindowstrue/0.2 透明状态栏设置// Kotlin 中设置透明状态栏if(Build.VERSION.SDK_INTBuild.VERSION_CODES.R){window.insetsController?.setSystemBarsAppearance(0,WindowInsetsController.APPEARANCE_LIGHT_STATUS_BARS)}else{Suppress(DEPRECATION)window.decorView.systemUiVisibilityView.SYSTEM_UI_FLAG_LAYOUT_STABLEorView.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN}0.3 主题中配置!-- styles.xml --stylenameTheme.AppparentTheme.Material3.DayNight.NoActionBaritem nameandroid:statusBarColorandroid:color/transparent/item item nameandroid:navigationBarColorandroid:color/transparent/item item nameandroid:fitsSystemWindowstrue/item/style0.4 渐变遮罩效果!-- gradient_bottom.xml --shapexmlns:androidhttp://schemas.android.com/apk/res/androidgradientandroid:typelinearandroid:angle90android:startColor#AA000000android:endColor#00000000//shape一、Toolbar1.1 基本用法// layouts: activity_xxx.xmlandroidx.appcompat.widget.Toolbar android:idid/toolbarandroid:layout_widthmatch_parentandroid:layout_height?attr/actionBarSizeandroid:background?attr/colorPrimaryapp:popupThemestyle/ThemeOverlay.MaterialComponents.Light/// Activity 中设置setSupportActionBar(toolbar)supportActionBar?.apply{title标题subtitle副标题setDisplayHomeAsUpEnabled(true)// 显示返回按钮}1.2 菜单// 创建菜单res/menu/xxx_menu.xmlmenu xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:apphttp://schemas.android.com/apk/res-autoitem android:idid/action_searchandroid:iconandroid:drawable/ic_menu_searchandroid:title搜索app:showAsActionifRoom/item android:idid/action_shareandroid:title分享app:showAsActionnever//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 属性属性行为ifRoom有空间时显示图标否则显示在菜单中always始终显示图标never从不显示总是在菜单中withText配合 ifRoom/always显示文字二、DrawerLayout NavigationView2.1 布局结构androidx.drawerlayout.widget.DrawerLayoutandroid:idid/drawerLayoutandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:fitsSystemWindowstrue!-- 主内容区域 --LinearLayoutandroid:layout_widthmatch_parentandroid:layout_heightmatch_parent!-- 内容 --/LinearLayout!-- 滑动菜单NavigationView --com.google.android.material.navigation.NavigationViewandroid:idid/navigationViewandroid:layout_width280dpandroid:layout_heightmatch_parentandroid:layout_gravitystartandroid:fitsSystemWindowstrueapp:headerLayoutlayout/nav_headerapp:menumenu/nav_menu//androidx.drawerlayout.widget.DrawerLayout2.2 ActionBarDrawerTogglevaltoggleActionBarDrawerToggle(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 --menugroupandroid:checkableBehaviorsingleitemandroid:idid/nav_homeandroid:iconandroid:drawable/ic_menu_viewandroid:title首页/itemandroid:idid/nav_favoritesandroid:iconandroid:drawable/btn_starandroid:title收藏//groupitemandroid:title其他menuitemandroid:idid/nav_settingsandroid:title设置//menu/item/menu!-- res/layout/nav_header.xml --LinearLayoutandroid:layout_widthmatch_parentandroid:layout_height160dpandroid:backgroundcolor/purple_500android:gravitybottomandroid:padding16dpTextViewandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:textHeaderandroid:textColorandroid:color/white//LinearLayout三、FloatingActionButton3.1 基本用法com.google.android.material.floatingactionbutton.FloatingActionButtonandroid:idid/fabandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_gravitybottom|endandroid:layout_margin16dpandroid:srcandroid:drawable/ic_addapp:backgroundTintcolor/purple_500app:tintandroid:color/whiteapp:fabSizenormal/3.2 属性属性说明app:fabSizenormal / mini / autoapp:backgroundTint背景颜色app:tint图标颜色app:rippleColor点击波纹颜色app:elevation阴影高度3.3 点击事件fab.setOnClickListener{// 处理点击}四、Snackbar4.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 自定义样式valsnackbarSnackbar.make(view,消息,Snackbar.LENGTH_SHORT)valsnackbarViewsnackbar.view snackbarView.setBackgroundColor(Color.DKGRAY)valtextViewsnackbarView.findViewByIdTextView(com.google.android.material.R.id.snackbar_text)textView.setTextColor(Color.WHITE)snackbar.show()4.4 Snackbar 与 FAB 配合!-- 必须使用 CoordinatorLayout 作为根布局 --androidx.coordinatorlayout.widget.CoordinatorLayoutLinearLayout.../FloatingActionButton.../!-- Snackbar 会自动上浮不会遮挡 FAB --/androidx.coordinatorlayout.widget.CoordinatorLayout五、CardView5.1 基本用法com.google.android.material.card.MaterialCardViewandroid:idid/cardViewandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:layout_margin8dpapp:cardCornerRadius12dpapp:cardElevation4dpapp:rippleColorcolor/purple_200LinearLayoutandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:orientationverticalandroid:padding16dpImageView.../TextView.../TextView...//LinearLayout/com.google.android.material.card.MaterialCardView5.2 属性详解属性说明app:cardCornerRadius圆角半径app:cardElevation阴影高度app:cardBackgroundColor背景颜色app:rippleColor点击波纹颜色app:strokeWidth边框宽度app:strokeColor边框颜色六、SwipeRefreshLayout6.1 基本用法androidx.swiperefreshlayout.widget.SwipeRefreshLayoutandroid:idid/swipeRefreshandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroidx.recyclerview.widget.RecyclerViewandroid:idid/recyclerViewandroid:layout_widthmatch_parentandroid:layout_heightmatch_parent//androidx.swiperefreshlayout.widget.SwipeRefreshLayout6.2 配置swipeRefresh.setColorSchemeResources(R.color.purple_500,R.color.purple_700,R.color.teal_200)swipeRefresh.setOnRefreshListener{// 执行刷新操作// 完成后设置 swipeRefresh.isRefreshing false}七、CollapsingToolbarLayout7.1 基本结构com.google.android.material.appbar.AppBarLayoutandroid:layout_widthmatch_parentandroid:layout_height200dpandroid:themestyle/ThemeOverlay.MaterialComponents.Dark.ActionBarcom.google.android.material.appbar.CollapsingToolbarLayoutandroid:idid/collapsingToolbarandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentapp:layout_scrollFlagsscroll|exitUntilCollapsedapp:contentScrim?attr/colorPrimaryapp:expandedTitleMarginStart16dpapp:expandedTitleMarginBottom16dpImageViewandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:scaleTypecenterCropapp:layout_collapseModeparallax/androidx.appcompat.widget.Toolbarandroid:idid/toolbarandroid:layout_widthmatch_parentandroid:layout_height?attr/actionBarSizeapp:layout_collapseModepin//com.google.android.material.appbar.CollapsingToolbarLayout/com.google.android.material.appbar.AppBarLayout7.2 layout_scrollFlagsFlag行为scroll跟随滚动enterAlways上滑时先隐藏下滑时立即显示enterAlwaysCollapsed上滑时先隐藏下滑时等 Toolbar 到达最小高度才显示exitUntilCollapsed折叠到最小高度后保持直到完全离开7.3 layout_collapseModeMode行为parallax视差滚动图片与内容不同步pin固定不动Toolbar 固定在顶部none正常滚动7.4 Kotlin 配置collapsingToolbar.title标题collapsingToolbar.setExpandedTitleColor(Color.WHITE)collapsingToolbar.setCollapsedTitleTextColor(Color.WHITE)八、CoordinatorLayout8.1 作用CoordinatorLayout 是超级布局协调器让子 View 可以协调工作┌─────────────────────────────────────────────────────────────┐ │ CoordinatorLayout 工作原理 │ ├─────────────────────────────────────────────────────────────┤ │ │ │ CoordinatorLayout │ │ ├── 协调子 View 的 Behavior │ │ ├── FAB 与 Snackbar 交互FAB 自动上浮 │ │ ├── AppBarLayout 与 RecyclerView 交互标题栏折叠 │ │ └── BottomSheet 与 FAB 交互 │ │ │ └─────────────────────────────────────────────────────────────┘8.2 配合 AppBarLayoutCoordinatorLayoutAppBarLayoutCollapsingToolbarLayout!-- 标题栏内容 --/CollapsingToolbarLayout/AppBarLayoutandroidx.recyclerview.widget.RecyclerViewapp:layout_behaviorstring/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 --stylenameTheme.AppparentTheme.MaterialComponents.Light.NoActionBaritem namecolorPrimarycolor/purple_500/item item namecolorPrimaryVariantcolor/purple_700/item item namecolorOnPrimaryandroid:color/white/item item namecolorSecondarycolor/teal_200/item item namecolorSecondaryVariantcolor/teal_700/item/style10.2 Toolbar 样式androidx.appcompat.widget.Toolbarandroid:background?attr/colorPrimaryapp:titleTextColorandroid:color/whiteapp:subtitleTextColorandroid:color/white/总结┌────────────────────────────────────────────────────────────┐ │ Material Design 全景图 │ ├────────────────────────────────────────────────────────────┤ │ │ │ Toolbar: │ │ ├── setSupportActionBar() - 设为 ActionBar │ │ ├── onCreateOptionsMenu() - 加载菜单 │ │ └── onOptionsItemSelected() - 处理菜单点击 │ │ │ │ DrawerLayout NavigationView: │ │ ├── layout_gravitystart - 左侧菜单 │ │ ├── ActionBarDrawerToggle - 同步汉堡按钮状态 │ │ └── setNavigationItemSelectedListener() - 菜单项点击 │ │ │ │ FAB Snackbar: │ │ ├── CoordinatorLayout 自动协调 FAB 上浮 │ │ ├── setAction() - 添加操作按钮 │ │ └── setActionTextColor() - 自定义按钮颜色 │ │ │ │ CardView: │ │ ├── cardCornerRadius - 圆角 │ │ ├── cardElevation - 阴影 │ │ └── rippleColor - 点击波纹 │ │ │ │ SwipeRefreshLayout: │ │ ├── setColorSchemeResources() - 进度颜色 │ │ └── setOnRefreshListener() - 刷新回调 │ │ │ │ CollapsingToolbarLayout: │ │ ├── layout_scrollFlags - 滚动行为 │ │ ├── layout_collapseMode - 折叠模式 │ │ └── appbar_scrolling_view_behavior - 关联滚动 │ │ │ └────────────────────────────────────────────────────────────┘