FrameLayout中ImageView设centerCrop首次加载拉伸，如何避免？

嘿，我来帮你搞定这个首次加载图片拉伸的问题～你现在用双层ImageView嵌套FrameLayout实现圆角的方式，本质上是因为首次布局测量阶段，图片的尺寸还没完全确定，导致centerCrop的缩放计算出了偏差，等页面刷新后布局稳定下来，缩放逻辑就正常了。下面给你几个靠谱的解决思路，按推荐程度排序：

方法一：用Material组件的ShapeableImageView（首推） #

AndroidX的Material库自带了ShapeableImageView，可以直接设置圆角，不用搞复杂的布局嵌套，从根源上避免布局测量带来的问题，代码还简洁。

1. 先确保项目引入了Material依赖（如果还没加的话）：

implementation 'com.google.android.material:material:1.9.0' // 可以换成最新版本

2. 把你原来的FrameLayout+双层ImageView替换成这个组件：

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/image"
    android:layout_width="@dimen/dp_80"
    android:layout_height="@dimen/dp_80"
    android:src="@drawable/dummypost1"
    android:scaleType="centerCrop"
    app:shapeAppearanceOverlay="@style/RoundedImageViewStyle"/>

3. 在styles.xml里定义你想要的圆角样式：

<style name="RoundedImageViewStyle">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">@dimen/dp_8</item> <!-- 换成你需要的圆角大小 -->
</style>

这种方式是官方维护的组件，不仅不会有首次拉伸的问题，后续如果要调整圆角或者加其他形状（比如切角）都很方便。

方法二：修正你当前的双层ImageView布局 #

如果你不想引入Material库，可以调整现有布局的尺寸设置，让首次布局时就能确定图片的大小：

• 首先，把FrameLayout的宽高从wrap_content改成固定的@dimen/dp_80，然后让两个ImageView都用match_parent填充FrameLayout，同时底层ImageView不需要设置background（原来的background会干扰缩放计算）：

<FrameLayout
    android:id="@+id/imageframe"
    android:layout_width="@dimen/dp_80"
    android:layout_height="@dimen/dp_80">

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/dummypost1"
        android:scaleType="centerCrop"/>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/image_rounded"
        android:scaleType="centerCrop"/>

</FrameLayout>

• 另外要注意，你的image_rounded得是一个中间透明、边缘为页面背景色的圆角遮罩，这样才能让底层图片透过透明区域显示，看起来像是有圆角。如果原来的image_rounded是白色圆角shape，那可以改成这样：

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/your_page_background_color"/> <!-- 换成你页面的背景色 -->
    <corners android:radius="@dimen/dp_16"/> <!-- 圆角大小 -->
</shape>

调整后，FrameLayout尺寸固定，ImageView的大小也能提前确定，首次加载时centerCrop就能正确计算缩放比例，不会出现拉伸。

方法三：自定义一个圆角ImageView #

如果上面两种方法都不适用，你可以自己写个自定义View，在绘制阶段直接裁剪圆角，这种方式也能避免布局嵌套的问题：

public class RoundedImageView extends AppCompatImageView {
    private Path mClipPath;
    private RectF mRectF;
    private float mCornerRadius;

    public RoundedImageView(Context context) {
        super(context);
        init();
    }

    public RoundedImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        // 读取自定义的圆角属性
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.RoundedImageView);
        mCornerRadius = ta.getDimension(R.styleable.RoundedImageView_corner_radius, 0);
        ta.recycle();
        init();
    }

    private void init() {
        mClipPath = new Path();
        mRectF = new RectF();
        // 强制设置centerCrop（也可以让用户自己设置）
        setScaleType(ScaleType.CENTER_CROP);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        // 每次尺寸变化时更新裁剪路径
        mRectF.set(0, 0, w, h);
        mClipPath.reset();
        mClipPath.addRoundRect(mRectF, mCornerRadius, mCornerRadius, Path.Direction.CW);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // 裁剪画布后再绘制图片
        canvas.clipPath(mClipPath);
        super.onDraw(canvas);
    }
}

然后在attrs.xml里添加自定义属性：

<declare-styleable name="RoundedImageView">
    <attr name="corner_radius" format="dimension"/>
</declare-styleable>

最后在布局里使用：

<com.yourpackage.RoundedImageView
    android:id="@+id/image"
    android:layout_width="@dimen/dp_80"
    android:layout_height="@dimen/dp_80"
    android:src="@drawable/dummypost1"
    app:corner_radius="@dimen/dp_8"/>

这种自定义View的方式直接在绘制时处理圆角，没有布局嵌套的测量问题，首次加载就能正常显示。

总的来说，最推荐用ShapeableImageView，省心又稳定。如果不能用Material库，调整现有布局是最快的方案，自定义View则适合需要更多定制化的场景。

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