Android如何创建内嵌FrameLayout的自定义带边框CardView

这个需求太合理了——把重复的布局逻辑封装成自定义组件，既能减少冗余代码，还能统一样式规范。我之前也做过类似的封装，下面给你两种实现方案，都是基于你之前用的CardView+FrameLayout+Shape思路：

方案一：代码动态构建（推荐，更灵活） #

这种方式不需要额外的布局文件，直接在自定义View类里完成内部FrameLayout的创建和配置，还支持自定义属性让你在XML里灵活调整样式。

第一步：定义自定义属性（可选但实用） #

先在res/values/attrs.xml里添加自定义属性，方便在XML里直接设置边框颜色、宽度、圆角等：

<resources>
    <declare-styleable name="BorderedCardView">
        <attr name="borderColor" format="color" />
        <attr name="borderWidth" format="dimension" />
        <attr name="cornerRadius" format="dimension" />
        <attr name="contentPadding" format="dimension" />
    </declare-styleable>
</resources>

第二步：创建自定义View类 #

继承CardView，在构造方法里解析属性、创建内部FrameLayout并配置样式：

Kotlin版本

class BorderedCardView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = R.attr.cardViewStyle
) : CardView(context, attrs, defStyleAttr) {

    private val contentContainer: FrameLayout

    init {
        // 解析自定义属性，设置默认值
        val typedArray = context.obtainStyledAttributes(attrs, R.styleable.BorderedCardView)
        val borderColor = typedArray.getColor(R.styleable.BorderedCardView_borderColor, Color.GRAY)
        val borderWidth = typedArray.getDimensionPixelSize(R.styleable.BorderedCardView_borderWidth, 2)
        val cornerRadius = typedArray.getDimensionPixelSize(R.styleable.BorderedCardView_cornerRadius, 8)
        val contentPadding = typedArray.getDimensionPixelSize(R.styleable.BorderedCardView_contentPadding, 16)
        typedArray.recycle()

        // 创建内部的FrameLayout容器
        contentContainer = FrameLayout(context).apply {
            // 用代码创建带边框的Shape背景
            val shapeDrawable = GradientDrawable().apply {
                shape = GradientDrawable.RECTANGLE
                setStroke(borderWidth, borderColor)
                cornerRadius = cornerRadius.toFloat()
                // 如果需要背景色，取消下面注释并设置颜色
                // setBackgroundColor(Color.WHITE)
            }
            background = shapeDrawable

            // 设置内容与边框的内边距
            setPadding(contentPadding, contentPadding, contentPadding, contentPadding)

            // 让FrameLayout填充整个CardView
            layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
        }

        // 将容器添加到CardView中
        addView(contentContainer)
    }

    // 重写addView方法，让外部添加的子View自动进入内部容器
    override fun addView(child: View?) {
        contentContainer.addView(child)
    }

    override fun addView(child: View?, params: ViewGroup.LayoutParams?) {
        contentContainer.addView(child, params)
    }
}

Java版本

public class BorderedCardView extends CardView {
    private FrameLayout contentContainer;

    public BorderedCardView(Context context) {
        this(context, null);
    }

    public BorderedCardView(Context context, AttributeSet attrs) {
        this(context, attrs, R.attr.cardViewStyle);
    }

    public BorderedCardView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(attrs);
    }

    private void init(AttributeSet attrs) {
        // 解析自定义属性
        TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.BorderedCardView);
        int borderColor = typedArray.getColor(R.styleable.BorderedCardView_borderColor, Color.GRAY);
        int borderWidth = typedArray.getDimensionPixelSize(R.styleable.BorderedCardView_borderWidth, 2);
        int cornerRadius = typedArray.getDimensionPixelSize(R.styleable.BorderedCardView_cornerRadius, 8);
        int contentPadding = typedArray.getDimensionPixelSize(R.styleable.BorderedCardView_contentPadding, 16);
        typedArray.recycle();

        // 创建内部FrameLayout
        contentContainer = new FrameLayout(getContext());
        GradientDrawable shapeDrawable = new GradientDrawable();
        shapeDrawable.setShape(GradientDrawable.RECTANGLE);
        shapeDrawable.setStroke(borderWidth, borderColor);
        shapeDrawable.setCornerRadius(cornerRadius);
        contentContainer.setBackground(shapeDrawable);
        contentContainer.setPadding(contentPadding, contentPadding, contentPadding, contentPadding);

        // 设置布局参数
        LayoutParams layoutParams = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
        contentContainer.setLayoutParams(layoutParams);
        addView(contentContainer);
    }

    // 重写addView，让子View自动添加到内部容器
    @Override
    public void addView(View child) {
        contentContainer.addView(child);
    }

    @Override
    public void addView(View child, ViewGroup.LayoutParams params) {
        contentContainer.addView(child, params);
    }
}

第三步：在XML中使用自定义View #

就像使用普通CardView一样，直接添加内容即可：

<com.yourpackage.BorderedCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardElevation="4dp"
    app:borderColor="@color/your_custom_color"
    app:borderWidth="2dp"
    app:cornerRadius="12dp"
    app:contentPadding="16dp">

    <!-- 这里放你的内容，比如TextView、LinearLayout等 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="这是带边框的CardView内容"
        android:textSize="16sp" />

</com.yourpackage.BorderedCardView>

方案二：XML布局组合（适合复杂内部结构） #

如果以后需要给内部添加更多布局元素（比如头部、尾部），可以用merge标签定义组合布局：

第一步：创建组合布局文件 #

在res/layout/bordered_card_view.xml中：

<merge xmlns:android="http://schemas.android.com/apk/res/android">
    <FrameLayout
        android:id="@+id/content_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</merge>

第二步：修改自定义View类的初始化逻辑 #

把之前动态创建FrameLayout的代码替换成inflate这个布局：

// 替换init里的contentContainer创建代码
contentContainer = LayoutInflater.from(context).inflate(R.layout.bordered_card_view, this, false) as FrameLayout
// 后续的背景、padding设置和之前一样

注意事项 #

• 重写addView方法是关键：这样用户不需要关心内部结构，直接在自定义View里添加子View即可，和使用普通CardView完全一致。
• 如果需要支持背景色，可以在自定义属性里添加contentBackgroundColor，然后在GradientDrawable里调用setBackgroundColor。
• 自定义属性的默认值可以根据你的项目设计规范调整，比如把默认边框颜色改成你的主题色。

内容的提问来源于stack exchange，提问作者silvio.pereira