如何设置CardView内所有图片为固定尺寸且位于divider上方

核心处理逻辑 #

• 固定图片尺寸：禁止给卡片内的ImageView设置wrap_content宽高，直接写死统一的尺寸值，搭配缩放属性避免图片变形
• 控制层级顺序：靠布局的排列顺序天然控制上下位置，不要写反向约束导致图片跑到分割线下方

具体实现 #

1. 图片尺寸固定配置 #

给所有卡片共用的ImageView设置统一的宽高值，比如宽度匹配卡片宽度、高度固定为150dp，同时配置缩放规则：

• centerCrop：裁剪图片多余部分，填满整个图片区域，不会出现拉伸变形，适合商品图、封面图场景
• fitCenter：完整展示整张图片，区域内剩余空间留空白，适合需要展示完整图片内容的场景

2. 位置控制 #

如果用LinearLayout做CardView的根布局，直接按「ImageView -> 分割线 -> 其他卡片内容」的垂直顺序排列即可，线性布局会按代码顺序从上到下摆放控件，天然保证图片在分割线上方。
如果用ConstraintLayout做根布局，只需要把ImageView的底部约束绑定到分割线的顶部，分割线的顶部约束绑定到ImageView的底部即可，不要给ImageView加绑定到卡片底部、或者分割线下方控件的约束。

参考代码 #

<com.google.android.material.card.MaterialCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="12dp"
    app:cardCornerRadius="8dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <!-- 固定尺寸图片，位于布局最顶部 -->
        <ImageView
            android:id="@+id/iv_card_cover"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:scaleType="centerCrop"
            android:src="@drawable/cover_demo"/>

        <!-- 分割线，紧跟在图片下方 -->
        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginHorizontal="12dp"
            android:background="#EEEEEE"/>

        <!-- 分割线下方的文本、按钮等内容 -->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="12dp"
            android:text="卡片示例标题"/>

    </LinearLayout>

</com.google.android.material.card.MaterialCardView>

避坑提示：如果是代码里动态加载图片，不要在加载回调里重新修改ImageView的布局参数，不然会覆盖XML里写的固定尺寸，导致图片大小不一致。

内容的提问来源于stack exchange，提问作者Alaa Hosnii