CardView顶部圆角被ImageView遮挡不显示的问题求助

嘿，我来帮你搞定这个CardView顶部圆角被ImageView挡住的问题！其实核心原因是CardView的圆角默认不会裁剪内部的子View，所以ImageView会覆盖掉顶部的圆角区域。试试下面这几个方案，应该能解决你的问题：

方案一：开启CardView的裁剪功能（最简单有效） #

给你的CardView添加两个属性，让它把内部超出圆角的部分裁剪掉：

<android.support.v7.widget.CardView 
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/card_view"
    android:layout_width="wrap_content"
    android:layout_height="@dimen/_200sdp"
    android:layout_marginRight="@dimen/_15sdp"
    android:layout_marginLeft="15dp"
    android:layout_marginTop="15dp"
    card_view:cardCornerRadius="@dimen/_20sdp"
    card_view:cardBackgroundColor="@color/White"
    android:layout_marginBottom="@dimen/_10sdp"
    <!-- 添加这两个属性开启裁剪 -->
    android:clipToPadding="true"
    android:clipChildren="true">

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

        <ImageView 
            android:id="@+id/party_image"
            android:layout_width="@dimen/_160sdp"
            android:layout_height="@dimen/_140sdp"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop" />

        <TextView 
            android:id="@+id/party_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="13sp"
            android:text="John Doe"
            android:textColor="@color/colorPrimary"
            android:gravity="center"
            android:paddingBottom="8dp"
            android:paddingTop="8dp" />

    </LinearLayout>
</android.support.v7.widget.CardView>

添加android:clipToPadding="true"和android:clipChildren="true"后，CardView会自动裁剪内部View超出圆角的部分，顶部圆角就能正常显示了。

方案二：给ImageView单独设置顶部圆角（适配Material组件） #

如果你项目里用了Material Components库，可以直接用ShapeableImageView给ImageView设置和CardView一致的顶部圆角，这样两者完美匹配：

第一步：替换ImageView为ShapeableImageView #

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/party_image"
    android:layout_width="@dimen/_160sdp"
    android:layout_height="@dimen/_140sdp"
    android:adjustViewBounds="true"
    android:scaleType="centerCrop"
    app:shapeAppearanceOverlay="@style/RoundedTopCorners" />

第二步：在styles.xml中定义顶部圆角样式 #

<style name="RoundedTopCorners" parent="">
    <item name="cornerFamily">rounded</item>
    <!-- 和CardView的圆角大小保持一致 -->
    <item name="cornerSizeTopLeft">@dimen/_20sdp</item>
    <item name="cornerSizeTopRight">@dimen/_20sdp</item>
    <!-- 底部不需要圆角，设为0 -->
    <item name="cornerSizeBottomLeft">0dp</item>
    <item name="cornerSizeBottomRight">0dp</item>
</style>

方案三：自定义Drawable实现顶部圆角（兼容旧版本） #

如果不想依赖Material组件，可以自定义一个Drawable，专门给ImageView设置顶部圆角：

第一步：创建TopRoundedDrawable类 #

public class TopRoundedDrawable extends Drawable {
    private final Paint paint;
    private final RectF rectF;
    private final float radius;

    public TopRoundedDrawable(Bitmap bitmap, float radius) {
        this.radius = radius;
        paint = new Paint();
        paint.setAntiAlias(true);
        // 用BitmapShader让图片填充整个Drawable
        paint.setShader(new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));
        rectF = new RectF(0, 0, bitmap.getWidth(), bitmap.getHeight());
    }

    @Override
    protected void onBoundsChange(Rect bounds) {
        super.onBoundsChange(bounds);
        rectF.set(bounds);
    }

    @Override
    public void draw(Canvas canvas) {
        // 绘制顶部圆角矩形
        canvas.drawRoundRect(rectF, radius, radius, paint);
        // 绘制底部矩形，覆盖掉底部的圆角（如果不需要底部圆角的话）
        canvas.drawRect(0, rectF.height() - radius, rectF.width(), rectF.height(), paint);
    }

    @Override
    public void setAlpha(int alpha) {
        paint.setAlpha(alpha);
    }

    @Override
    public void setColorFilter(ColorFilter colorFilter) {
        paint.setColorFilter(colorFilter);
    }

    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }
}

第二步：在代码中给ImageView设置这个Drawable #

// 替换成你的图片资源
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.your_party_image);
float cornerRadius = getResources().getDimension(R.dimen._20sdp);
TopRoundedDrawable roundedDrawable = new TopRoundedDrawable(bitmap, cornerRadius);
ImageView partyImage = findViewById(R.id.party_image);
partyImage.setImageDrawable(roundedDrawable);

优先试试方案一，这个是最快捷的解决方式，如果遇到兼容性问题再考虑方案二或三～

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