安卓应用中如何依据下方图片尺寸裁剪上方图片？使用ClipDrawable遇困惑

我懂你用ClipDrawable时的困惑——它默认是按百分比或固定值裁剪，直接关联另一张图片的尺寸确实需要点小技巧，我来一步步拆解实现思路，帮你搞定这个需求：

核心思路 #

ClipDrawable的裁剪范围由level值控制（范围0-10000，0代表完全裁剪，10000代表完全显示），所以我们需要先获取下方参考图片的实际尺寸，再动态计算上方图片需要保留的比例，最后把这个比例转换成ClipDrawable的level值即可。

步骤1：布局与ClipDrawable配置 #

首先在布局里放置两张图片，上方图片使用ClipDrawable作为图源：

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 下方的参考图片，用来获取裁剪尺寸 -->
    <ImageView
        android:id="@+id/bottom_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/bottom_reference_pic"
        android:layout_alignParentBottom="true"/>

    <!-- 上方需要裁剪的图片，关联ClipDrawable -->
    <ImageView
        android:id="@+id/top_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/clip_top_image"/>
</RelativeLayout>

接着在res/drawable目录下创建ClipDrawable的配置文件（比如clip_top_image.xml），这里以垂直方向裁剪、保留底部和参考图等高区域为例：

<clip xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/your_top_original_pic" <!-- 替换成你要裁剪的原图 -->
    android:clipOrientation="vertical" <!-- 垂直裁剪，水平裁剪改horizontal -->
    android:gravity="bottom"/> <!-- 从底部开始保留区域，顶部裁剪 -->

步骤2：动态获取尺寸并设置裁剪比例 #

注意：图片加载可能是异步的，必须等下方图片完全加载、尺寸确定后再计算比例。这里分两种场景处理：

场景1：本地资源图片（用ViewTreeObserver监听） #

ImageView bottomImage = findViewById(R.id.bottom_image);
ImageView topImage = findViewById(R.id.top_image);

bottomImage.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
        // 移除监听，避免重复触发
        bottomImage.getViewTreeObserver().removeOnGlobalLayoutListener(this);

        // 获取下方图片的实际高度（水平裁剪则取getWidth()）
        int bottomImgHeight = bottomImage.getHeight();
        // 获取上方图片的总高度
        int topImgTotalHeight = topImage.getHeight();

        // 计算保留比例，转换成ClipDrawable的level值（0-10000）
        float clipRatio = (float) bottomImgHeight / topImgTotalHeight;
        int clipLevel = (int) (clipRatio * 10000);

        // 给ClipDrawable设置level，完成裁剪
        ClipDrawable clipDrawable = (ClipDrawable) topImage.getDrawable();
        clipDrawable.setLevel(clipLevel);
    }
});

场景2：网络图片（用图片加载库的回调） #

如果下方图片是网络图，用Glide等库加载时，要在加载完成的回调里获取尺寸：

Glide.with(this)
    .load("https://your-bottom-image-url.com")
    .listener(new RequestListener<Drawable>() {
        @Override
        public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {
            return false;
        }

        @Override
        public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
            // 获取图片的原始尺寸
            int bottomImgHeight = resource.getIntrinsicHeight();
            int topImgTotalHeight = topImage.getHeight();

            // 同样计算比例并设置level
            float clipRatio = (float) bottomImgHeight / topImgTotalHeight;
            int clipLevel = (int) (clipRatio * 10000);

            ClipDrawable clipDrawable = (ClipDrawable) topImage.getDrawable();
            clipDrawable.setLevel(clipLevel);
            return false;
        }
    })
    .into(bottomImage);

额外调整技巧 #

• 如果需要水平裁剪，把ClipDrawable的clipOrientation改成horizontal，gravity改成left或right，计算时用宽度替代高度即可。
• 要是上方图片的尺寸和屏幕不匹配，可以先设置android:scaleType为centerCrop或fitXY，确保图片填充后再计算比例。

这样就能让上方图片精准匹配下方图片的尺寸完成裁剪啦，要是还有细节适配问题，随时调整参数就行~

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