2025 Android UI革命：Material Design 3组件全家桶实战指南-优快云博客

2025 Android UI革命：Material Design 3组件全家桶实战指南

【免费下载链接】MaterialDesign Material Design Samples。ConstraintLayout、MaterialButton、ShapeableImageView、TabLayout、SearchView... 项目地址: https://gitcode.com/gh_mirrors/mat/MaterialDesign

你是否还在为Android应用界面设计滞后而烦恼？是否想快速集成Material Design 3的现代UI组件却苦于官方文档零散？本文将系统讲解ConstraintLayout、MaterialButton、ShapeableImageView等28个核心组件的实战用法，提供可直接复用的代码模板与效果演示，帮助Android开发者在72小时内打造符合Material Design规范的高品质界面。

读完本文你将获得：

掌握15种常用MD3组件的XML配置与Kotlin交互逻辑
获取20+可直接复制的布局代码片段
学会5种高级动效实现方案（含拖拽排序、折叠工具栏）
规避8个常见的Material组件适配陷阱

项目架构概览

MaterialDesign项目采用模块化架构，每个UI组件对应独立的Activity，通过MainActivity作为入口统一展示。核心代码组织如下：

app/src/main/java/com/yechaoa/materialdesign/
├── activity/        # 组件演示页面
├── adapter/         # 列表适配器
├── dialog/          # 自定义对话框
├── fragment/        # 页面片段
└── widget/          # 自定义控件

资源文件按功能分类：

res/layout/：包含所有组件的XML布局文件
res/drawable/：自定义形状与选择器
gif/：组件效果动态演示图

项目环境要求：

Android Studio Giraffe | 2022.3.1+
Android Gradle Plugin 8.0+
Kotlin 1.7.10+

核心组件实战

MaterialButton（材料按钮）

MaterialButton是MD3中的基础交互组件，支持圆角、图标、描边等样式定制。以下是5种常见样式实现：

<!-- 基础样式 -->
<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="基础按钮"
    android:textAllCaps="false" />

<!-- 带图标按钮 -->
<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="带图标按钮"
    android:textAllCaps="false"
    app:icon="@mipmap/ic_launcher" />

<!-- 圆角图标按钮 -->
<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="圆角按钮"
    android:textAllCaps="false"
    app:cornerRadius="25dp"
    app:icon="@mipmap/ic_launcher"
    app:iconGravity="end" />

<!-- 描边按钮 -->
<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="描边按钮"
    android:textAllCaps="false"
    app:cornerRadius="25dp"
    app:strokeColor="@color/black"
    app:strokeWidth="3dp" />

<!-- 圆形按钮 -->
<com.google.android.material.button.MaterialButton
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:text="圆形"
    android:textAllCaps="false"
    android:textSize="20sp"
    app:cornerRadius="999dp"
    app:strokeColor="@color/orange"
    app:strokeWidth="5dp" />

完整布局文件：app/src/main/res/layout/activity_material_button.xml

实现效果：

TabLayout（标签布局）

TabLayout提供了页面切换的标签导航功能，支持自定义指示器、标签样式和滚动效果。基础实现需配合ViewPager2使用：

class TabLayoutActivity : AppCompatActivity() {
    private lateinit var binding: ActivityTabLayoutBinding
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityTabLayoutBinding.inflate(layoutInflater)
        setContentView(binding.root)
        
        // 设置ViewPager2适配器
        binding.viewPager.adapter = SimpleFragmentPagerAdapter(supportFragmentManager, lifecycle)
        
        // 关联TabLayout与ViewPager2
        TabLayoutMediator(binding.tabLayout, binding.viewPager) { tab, position ->
            tab.text = "标签 $position"
        }.attach()
    }
    
    class SimpleFragmentPagerAdapter(fm: FragmentManager, lifecycle: Lifecycle) :
        FragmentStateAdapter(fm, lifecycle) {
        
        override fun getItemCount(): Int = 4
        
        override fun createFragment(position: Int): Fragment {
            return when (position) {
                0 -> Fragment1()
                1 -> Fragment2()
                2 -> Fragment3()
                3 -> Fragment4()
                else -> Fragment1()
            }
        }
    }
}

核心实现代码：app/src/main/java/com/yechaoa/materialdesign/activity/TabLayoutActivity.kt

TabLayout支持多种高级样式，如自定义指示器形状：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicatorHeight="4dp"
    app:tabIndicatorColor="@color/primary"
    app:tabIndicator="@drawable/shape_tab_indicator"
    app:tabSelectedTextColor="@color/primary"
    app:tabTextColor="@color/black" />

自定义指示器形状定义在app/src/main/res/drawable/shape_tab_indicator.xml：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="2dp" />
    <solid android:color="@color/primary" />
</shape>

实现效果对比：

基础样式	自定义指示器	滚动标签

BottomNavigationView（底部导航）

BottomNavigationView实现了符合MD规范的底部导航栏，支持图标与文字组合、选中状态动画等效果。

布局定义：app/src/main/res/layout/activity_bottom_navigation.xml

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomNavigationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:menu="@menu/navigation"
    app:labelVisibilityMode="labeled"
    app:itemIconTint="@color/selector_text_color"
    app:itemTextColor="@color/selector_text_color" />

菜单定义在app/src/main/res/menu/navigation.xml：

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/navigation_home"
        android:icon="@mipmap/ic_home_black_24dp"
        android:title="@string/title_home" />
    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@mipmap/ic_dashboard_black_24dp"
        android:title="@string/title_dashboard" />
    <item
        android:id="@+id/navigation_notifications"
        android:icon="@mipmap/ic_notifications_black_24dp"
        android:title="@string/title_notifications" />
</menu>

交互逻辑实现：

class BottomNavigationActivity : AppCompatActivity() {
    private lateinit var binding: ActivityBottomNavigationBinding
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityBottomNavigationBinding.inflate(layoutInflater)
        setContentView(binding.root)
        
        // 设置导航选中监听
        binding.bottomNavigationView.setOnItemSelectedListener { item ->
            when (item.itemId) {
                R.id.navigation_home -> {
                    replaceFragment(Fragment1())
                    true
                }
                R.id.navigation_dashboard -> {
                    replaceFragment(Fragment2())
                    true
                }
                R.id.navigation_notifications -> {
                    replaceFragment(Fragment3())
                    true
                }
                else -> false
            }
        }
        
        // 默认选中第一个
        binding.bottomNavigationView.selectedItemId = R.id.navigation_home
    }
    
    private fun replaceFragment(fragment: Fragment) {
        supportFragmentManager.beginTransaction()
            .replace(R.id.container, fragment)
            .commit()
    }
}

实现效果：

高级组件应用

ShapeableImageView（形状图片）

ShapeableImageView允许通过代码或XML定义图片的形状，支持圆角、圆形、切角等多种样式，无需自定义View。

基础使用方式：

<com.google.android.material.imageview.ShapeableImageView
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:src="@mipmap/ic_avatar"
    app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.CornerSize" />

样式定义：

<style name="ShapeAppearanceOverlay.App.CornerSize">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">16dp</item>
</style>

支持的形状效果：

圆角矩形	圆形	切角	椭圆形
			自定义实现

完整实现代码：app/src/main/java/com/yechaoa/materialdesign/activity/ShapeableImageViewActivity.kt

BottomSheetDialog（底部弹窗）

BottomSheetDialog实现了从底部滑入的弹窗效果，支持全屏展开、拖拽关闭等交互。

基础实现：

class BottomSheetActivity : AppCompatActivity() {
    private lateinit var binding: ActivityBottomSheetBinding
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityBottomSheetBinding.inflate(layoutInflater)
        setContentView(binding.root)
        
        binding.btnBottomSheet.setOnClickListener {
            val dialog = MyBottomSheetDialog(this)
            dialog.show()
        }
    }
    
    class MyBottomSheetDialog(context: Context) : BottomSheetDialog(context) {
        init {
            setContentView(R.layout.dialog_my_bottom_sheet)
            window?.setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT)
        }
    }
}

弹窗布局：app/src/main/res/layout/dialog_my_bottom_sheet.xml

实现效果：

高级交互实现

ItemTouchHelper（拖拽排序）

通过ItemTouchHelper实现RecyclerView的拖拽排序功能，核心代码在app/src/main/java/com/yechaoa/materialdesign/activity/DragRecyclerViewActivity.kt

// 初始化拖拽帮助类
val callback = object : ItemTouchHelper.Callback() {
    override fun getMovementFlags(recyclerView: RecyclerView, viewHolder: RecyclerView.ViewHolder): Int {
        // 允许上下拖拽
        val dragFlags = ItemTouchHelper.UP or ItemTouchHelper.DOWN
        // 不允许左右滑动
        val swipeFlags = 0
        return makeMovementFlags(dragFlags, swipeFlags)
    }
    
    override fun onMove(recyclerView: RecyclerView, viewHolder: RecyclerView.ViewHolder, target: RecyclerView.ViewHolder): Boolean {
        // 交换数据位置
        val fromPosition = viewHolder.adapterPosition
        val toPosition = target.adapterPosition
        Collections.swap(mList, fromPosition, toPosition)
        // 通知适配器数据变化
        adapter.notifyItemMoved(fromPosition, toPosition)
        return true
    }
    
    override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {
        // 不需要实现滑动删除
    }
    
    override fun onSelectedChanged(viewHolder: RecyclerView.ViewHolder?, actionState: Int) {
        super.onSelectedChanged(viewHolder, actionState)
        // 选中时改变背景色
        if (actionState == ItemTouchHelper.ACTION_STATE_DRAG) {
            viewHolder?.itemView?.setBackgroundColor(Color.LTGRAY)
        }
    }
    
    override fun clearView(recyclerView: RecyclerView, viewHolder: RecyclerView.ViewHolder) {
        super.clearView(recyclerView, viewHolder)
        // 清除选中状态
        viewHolder.itemView.setBackgroundColor(Color.WHITE)
    }
}

// 绑定RecyclerView
val itemTouchHelper = ItemTouchHelper(callback)
itemTouchHelper.attachToRecyclerView(binding.recyclerView)

实现效果：

Dynamic Color（动态颜色）

Android 12及以上支持根据壁纸颜色动态调整应用主题色，实现代码在app/src/main/java/com/yechaoa/materialdesign/App.kt

class App : Application() {
    override fun onCreate() {
        super.onCreate()
        
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
            // 获取系统动态颜色
            val dynamicColor = DynamicColors.isDynamicColorAvailable()
            if (dynamicColor) {
                DynamicColors.applyToActivitiesIfAvailable(this)
            }
        }
    }
}

实现效果：

项目使用指南

快速开始

克隆仓库：

git clone https://gitcode.com/gh_mirrors/mat/MaterialDesign.git

使用Android Studio打开项目
编译并运行

组件索引

组件类别	组件名称	演示Activity
基础控件	MaterialButton	MaterialButtonActivity.kt
基础控件	TextInputLayout	TextInputLayoutActivity.kt
布局组件	ConstraintLayout	GuideLineActivity.kt
布局组件	CardView	CardViewActivity.kt
导航组件	TabLayout	TabLayoutActivity.kt
导航组件	BottomNavigationView	BottomNavigationActivity.kt
反馈组件	Snackbar	SnackbarActivity.kt
反馈组件	SwipeRefreshLayout	SwipeRefreshLayoutActivity.kt

总结与扩展

MaterialDesign项目提供了28个MD3组件的完整实现，涵盖了现代Android应用开发所需的大部分UI元素。通过本文介绍的核心组件使用方法，开发者可以快速构建符合Material Design规范的高品质应用界面。

项目仍在持续更新中，最新功能可关注：

组件实现代码：app/src/main/java/com/yechaoa/materialdesign/activity/
布局资源文件：app/src/main/res/layout/
样式定义：app/src/main/res/values/themes.xml

建议开发者根据实际需求选择性集成组件代码，并关注Android Material Components库的官方更新，及时应用新特性。

提示：所有代码示例均已在Android 12/13设备上测试通过，低版本适配需额外添加兼容代码。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考