Android MaterialCardView实战：5分钟搞定商品卡片UI（附完整代码）

Android MaterialCardView实战5分钟搞定商品卡片UI附完整代码在电商应用开发中商品卡片的视觉效果直接影响用户点击率和转化率。MaterialCardView作为Android Material Components库中的明星控件凭借其内置的阴影、圆角和水波纹效果能够快速构建符合Material Design规范的卡片式UI。本文将带你从零开始用最短时间实现一个专业级的商品卡片。1. 环境准备与基础配置首先确保项目已引入Material Components库。在模块级build.gradle文件中添加最新依赖dependencies { implementation com.google.android.material:material:1.9.0 }同步完成后我们创建一个基础的商品卡片布局。MaterialCardView的核心优势在于它预置了符合Material Design规范的视觉效果开发者无需手动实现复杂的阴影和状态动画。2. 商品卡片布局实现2.1 XML布局构建创建一个典型的电商商品卡片需要包含商品图片、名称、价格和收藏按钮。以下是完整的布局代码com.google.android.material.card.MaterialCardView xmlns:androidhttp://schemas.android.com/apk/res/android xmlns:apphttp://schemas.android.com/apk/res-auto android:layout_width160dp android:layout_height240dp android:layout_margin8dp app:cardCornerRadius12dp app:cardElevation4dp app:strokeColorcolor/card_stroke app:strokeWidth1dp app:rippleColorcolor/ripple_light LinearLayout android:layout_widthmatch_parent android:layout_heightmatch_parent android:orientationvertical ImageView android:idid/product_image android:layout_widthmatch_parent android:layout_height120dp android:scaleTypecenterCrop android:srcdrawable/product_placeholder/ TextView android:idid/product_name android:layout_widthmatch_parent android:layout_heightwrap_content android:layout_marginStart12dp android:layout_marginTop8dp android:layout_marginEnd12dp android:text商品名称 android:textColorandroid:color/black android:textSize14sp/ TextView android:idid/product_price android:layout_widthmatch_parent android:layout_heightwrap_content android:layout_marginStart12dp android:layout_marginTop4dp android:text¥99.00 android:textColorcolor/price_red android:textSize16sp android:textStylebold/ ImageButton android:idid/favorite_button android:layout_width24dp android:layout_height24dp android:layout_marginStart12dp android:layout_marginTop8dp android:layout_marginBottom8dp android:background?attr/selectableItemBackgroundBorderless android:srcdrawable/ic_favorite_border/ /LinearLayout /com.google.android.material.card.MaterialCardView关键属性说明属性作用推荐值cardCornerRadius设置卡片圆角半径8-12dpcardElevation控制阴影深度2-6dpstrokeColor边框颜色浅灰色rippleColor点击水波纹颜色半透明色2.2 动态效果增强要让卡片更具交互感我们可以添加点击状态变化// 在Activity或Fragment中 val cardView findViewByIdMaterialCardView(R.id.product_card) cardView.setOnClickListener { // 模拟收藏操作 cardView.isChecked !cardView.isChecked } // 通过setChecked改变卡片状态 cardView.addOnCheckedChangeListener { card, isChecked - card.strokeColor ContextCompat.getColorStateList( this, if (isChecked) R.color.card_checked_stroke else R.color.card_stroke ) }3. 高级定制技巧3.1 形状自定义MaterialCardView支持通过ShapeAppearanceModel进行更复杂的外观定制val shapeAppearanceModel ShapeAppearanceModel.builder( context, R.style.ShapeAppearance_MaterialComponents_MediumComponent, 0 ).build() materialCardView.shapeAppearanceModel shapeAppearanceModel3.2 动态阴影控制根据交互状态调整阴影深度materialCardView.setOnTouchListener { v, event - when (event.action) { MotionEvent.ACTION_DOWN - { v.translationZ 8f // 按下时提升阴影 true } MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL - { v.translationZ 0f // 恢复原始状态 false } else - false } }3.3 列表性能优化在RecyclerView中使用时建议设置固定大小提升性能com.google.android.material.card.MaterialCardView android:layout_width160dp android:layout_height240dp android:layout_margin4dp app:cardPreventCornerOverlaptrue4. 完整商品卡片实现结合以上技术点我们实现一个功能完善的商品卡片组件class ProductCardView JvmOverloads constructor( context: Context, attrs: AttributeSet? null, defStyleAttr: Int 0 ) : MaterialCardView(context, attrs, defStyleAttr) { private val binding ProductCardBinding.inflate( LayoutInflater.from(context), this, true ) init { // 初始化点击效果 isClickable true isFocusable true rippleColor ColorStateList.valueOf( ContextCompat.getColor(context, R.color.ripple_light) ) // 设置形状外观 shapeAppearanceModel ShapeAppearanceModel.builder( context, R.style.ShapeAppearance_MaterialComponents_MediumComponent, 0 ).build() } fun setProduct(item: Product) { binding.productName.text item.name binding.productPrice.text ¥${item.price} Glide.with(context) .load(item.imageUrl) .into(binding.productImage) } }配套的XML布局(product_card.xml):layout xmlns:androidhttp://schemas.android.com/apk/res/android xmlns:apphttp://schemas.android.com/apk/res-auto data variable nameproduct typecom.example.model.Product / /data com.google.android.material.card.MaterialCardView android:layout_width160dp android:layout_height240dp app:cardCornerRadius12dp app:cardElevation4dp app:strokeColorcolor/card_stroke app:strokeWidth1dp !-- 内容布局同上 -- /com.google.android.material.card.MaterialCardView /layout5. 实际应用建议阴影优化在浅色背景上使用4-6dp的阴影深色背景建议2-4dp性能平衡避免在单个屏幕使用过多不同圆角半径的卡片状态保存通过setChecked和isChecked管理卡片选中状态主题适配为深色模式提供不同的边框和阴影颜色配置// 深色模式适配示例 val nightModeFlags resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK when (nightModeFlags) { Configuration.UI_MODE_NIGHT_YES - { card.setCardBackgroundColor(Color.DKGRAY) card.strokeColor ColorStateList.valueOf(Color.LTGRAY) } else - { card.setCardBackgroundColor(Color.WHITE) card.strokeColor ColorStateList.valueOf(Color.DKGRAY) } }通过MaterialCardView构建的商品卡片不仅视觉效果专业还能自动适配不同Android版本和设备特性。相比自定义View方案它大幅减少了代码量且维护成本更低。