Material Design 是一种 Google 推广的设计语言，旨在打造一种简洁、直观、明快的设计风格。在前端开发中，我们经常使用 CardView 来展示数据、内容等。但是，在使用 Material Design 风格时，我们发现默认的 CardView 并没有边框，可能会影响页面的美观程度。因此，本篇文章将为你介绍如何在 Material Design 风格下实现带边框的 CardView。
1. 实现原理
在实现带边框的 CardView 之前，我们需要了解一下其实现原理。通常来说，我们可以通过两种方式来实现边框：一种是使用 Android 自带的 elevation 属性，通过给 CardView 设置不同的值，实现阴影和边框的效果；另一种是使用自定义的 drawable，通过构建一个包含边框和阴影的视图，然后将其加载到 CardView 上，实现边框效果。本文介绍的是第二种方式。
2. 实现步骤
2.1 创建内部布局文件
我们需要先创建一个内部布局文件，使用 FrameLayout 布局，将需要展示的内容放在其内部。具体代码如下：
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- 需要展示的内容 -->
</FrameLayout>2.2 创建 CardView
创建一个 CardView，将内部布局文件添加到其中，并且将 CardView 的必要属性设置好，具体代码如下：
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:cardCornerRadius="4dp"
app:cardElevation="3dp"
app:cardPreventCornerOverlap="false">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="@layout/layout_card_internal" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>需要注意的是，我们将 CardView 的阴影值设置为了 3dp，即在 elevation 值为 3dp 时，阴影效果就相当于边框。在示例代码中，我们还设置了卡片圆角的大小为 4dp，并且设置了 app:cardPreventCornerOverlap="false"，可以避免卡片内部填充内容的四个角落与卡片的圆角重合，这样就不会对边框造成影响。
2.3 创建 Border View
创建一个自定义的 Border View，用于绘制边框和阴影效果，并将其加载到 CardView 上。具体代码如下：
class BorderView @JvmOverloads constructor(
context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : FrameLayout(context, attrs, defStyleAttr) {
private val borderPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
style = Paint.Style.STROKE
color = Color.parseColor("#C5C5C5")
strokeWidth = context.resources.getDimensionPixelSize(R.dimen.card_border_width).toFloat()
}
init {
setWillNotDraw(false)
val shadowSize = context.resources.getDimensionPixelSize(R.dimen.card_shadow_size)
val topShadow = PaintDrawable(Color.parseColor("#11000000"), shadowSize, Gravity.TOP)
setForeground(topShadow.createDrawableWithShadow(this))
val bottomShadow = PaintDrawable(Color.parseColor("#11000000"), shadowSize, Gravity.BOTTOM)
setBackground(bottomShadow.createDrawableWithShadow(this))
}
override fun dispatchDraw(canvas: Canvas?) {
super.dispatchDraw(canvas)
canvas?.drawRoundRect(
0f, 0f, width.toFloat(), height.toFloat(),
cornerRadius, cornerRadius, borderPaint
)
}
}我们在 Border View 的构造函数中，设置了边框 Paint 的样式、颜色、宽度等属性，同时在 view 的初始化中，创建了两个 PaintDrawable，分别用于绘制上部的阴影和底部阴影效果，并且使用 Foreground 和 Background 将其加载到 Border View 上。在重写 Border View 的 dispatchDraw() 方法中，我们手动绘制了一个圆角矩形的边框。
2.4 将 Border View 添加到 CardView
在 CardView 中，使用 ConstraintLayout 来放置 Border View 和内部布局文件。具体代码如下：
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:cardCornerRadius="4dp"
app:cardElevation="3dp"
app:cardPreventCornerOverlap="false">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.cardviewdemo.ui.BorderView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<include layout="@layout/layout_card_internal" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>在示例代码中，我们将 Border View 添加到了 ConstraintLayout 的最底层，并且使用 app:layout_constraintDimensionRatio="16:9" 设置了 Border View 的纵横比例为 16:9，适用于展示图片等比例内容的场景。
3. 总结
通过本篇文章的学习，我们了解了在 Material Design 风格下实现带边框的 CardView 的原理和具体步骤。需要注意的是，我们创建的自定义 Border View 是在 CardView 布局内部添加的，因此在确定好边框和阴影大小时，需要根据内部布局大小进行计算。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65bb01c2add4f0e0ff3971de