【问题标题】:Scale ImageView and clip bottom only when outside parent view?仅在父视图之外缩放 ImageView 和剪辑底部?
【发布时间】:2018-03-09 22:16:11
【问题描述】:

如何缩放一个 ImageView,但当它/它的一部分在其父视图之外时,它仍然被剪辑(仅底部)?

我的代码;

XML 有 3 个元素;原始尺寸的图像,查看 200 像素高,查看 150 像素高。

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="1000px"
android:layout_height="850px"
android:background="#FFFEC6"
android:orientation="vertical">

<!-- single image in raw size -->
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/fauxcard"
    />

<!-- should be SCALED with NO CLIPPING -->
<RelativeLayout
    android:id="@+id/Wrapper1"
    android:layout_width="1000px"
    android:layout_height="200px"
    android:background="#cccccc">
</RelativeLayout>

<!-- should be SCALED with the BOTTOM CLIPPED -->
<RelativeLayout
    android:id="@+id/Wrapper2"
    android:layout_width="1000px"
    android:layout_height="150px"
    android:background="#C6FFD1"
    android:clipChildren="true">
</RelativeLayout>
</LinearLayout>

java;

    RelativeLayout r1 = (RelativeLayout) findViewById(R.id.Wrapper1);
    RelativeLayout r2 = (RelativeLayout) findViewById(R.id.Wrapper2);

    int marginLeft = 0;
    for (int i = 0; i < 10; i++)
    {
        // IV 1 - the parent view for these is the correct 200 high, so these will be unclipped/unscaled
        ImageView myImg1 = new ImageView(this);
        myImg1.setImageResource(R.drawable.fauxcard);
        RelativeLayout.LayoutParams layout1 = new RelativeLayout.LayoutParams(100, 200);
        layout1.setMargins(marginLeft, 0, 0, 0);
        r1.addView(myImg1, layout1);

        // IV 2 - the parent view for these is NOT high enough (only 150 high), so I want these SCALED but CLIPPED (bottom of image clipped)
        ImageView myImg2 = new ImageView(this);
        myImg2.setImageResource(R.drawable.fauxcard);

        // scaling
        // myImg2.setScaleType(ImageView.ScaleType.CENTER); // NOT scaled - clipped
        // myImg2.setScaleType(ImageView.ScaleType.CENTER_INSIDE); //  scaled - NOT clipped
        myImg2.setScaleType(ImageView.ScaleType.CENTER_CROP); // scaled - clipped at TOP and bottom
        // myImg2.setScaleType(ImageView.ScaleType.FIT_END); // scaled TOO MUCH - clip not needed
        // myImg2.setScaleType(ImageView.ScaleType.FIT_START); // scaled TOO MUCH - clip not needed
        // myImg2.setScaleType(ImageView.ScaleType.FIT_CENTER); // scaled TOO MUCH - clip not needed
        // myImg2.setScaleType(ImageView.ScaleType.FIT_XY); // scaled incorrect ratio - clip not needed
        // myImg2.setScaleType(ImageView.ScaleType.MATRIX); // NOT scaled - clipped

        RelativeLayout.LayoutParams layout2 = new RelativeLayout.LayoutParams(100, 200);
        layout2.setMargins(marginLeft, 0, 0, 0);
        r2.addView(myImg2, layout2);

        // I am using marginLeft as my real scenario is more complex - there are varying gaps between the images based on other logic
        // the important issue is CLIPPING the images whilst scaling them
        marginLeft += 100;
    }

我要为这两个 RelativeLayouts 添加 10 个图像。我希望两组图像的缩放比例相同,但由于第二个 RL 不够高,我希望这些图像被剪裁(图像的底部消失)。

我尝试了所有的 ScaleType,但没有一个能做到这一点。最接近的是 CENTER_CROP,它具有正确的缩放比例,但顶部和底部都被剪裁了(同样,我只想剪掉底部)。

这是一张图片; https://imgur.com/a/QLJkm

【问题讨论】:

  • fitStart 工作了吗?
  • 不,fitStart 会缩小图像以使其适合可用空间(而不是剪裁它)。基本上我需要一个 Top_Crop,这就是你在下面提供的。

标签: android


【解决方案1】:

将此代码放在 viewtreeobserver 中,或者您可以拥有自定义图像视图

    Matrix matrix = imageView.getImageMatrix();
    float scale;
    final int viewWidth = getWidth() - getPaddingLeft() - getPaddingRight();
    final int drawableWidth = drawable.getIntrinsicWidth();

    scale = (float) viewWidth / (float) drawableWidth;
    matrix.setScale(scale, scale);
    setImageMatrix(matrix);

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-08-28
    • 2012-07-11
    • 1970-01-01
    • 2014-11-12
    • 2021-12-08
    相关资源
    最近更新 更多