将淡化边应用于ImageView

Posted 2021-04-15

有没有办法将垂直/水平渐变边应用于ImageView组件？

我已经尝试过android:fadingEdge但遗憾的是这个属性已被弃用，从API级别14开始将被忽略，任何想法？

答案

我找到了一个完美的解决方案，对我来说非常合适。我需要淡出imageView的顶部和底部（这种方法适用于任何一方，只需创建一个不同的渐变）。我把ImageView包裹在FrameLayout里面并将2个Views放到顶部和底部，之后，我创建了带有渐变的xml的背景，并简单地将它们作为背景。以下是它的外观：

<FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            android:adjustViewBounds="true" />
        <View
            android:layout_width="match_parent"
            android:layout_height="@dimen/fade_effect_heigth"
            android:layout_gravity="bottom"
            android:background="@drawable/custom_gradient_bottom"/>
        <View
            android:layout_width="match_parent"
            android:layout_height="@dimen/fade_effect_heigth"
            android:layout_gravity="top"
            android:background="@drawable/custom_gradient_top"/>
</FrameLayout>

现在2个视图位于图像视图的顶部，它们的渐变xml背景文件看起来像这样（这是顶部渐变，底部只是翻转开始/结束颜色）：

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<gradient
    android:angle="90"
    android:startColor="#00000000" <- black with 0 alpha, so transparent
    android:endColor="#000000" <- black color
    android:type="linear" />

您可以选择适合您的淡入淡出的高度，我选择了120dp，它很好地满足了我的需求。这是我的ImageView模拟器的屏幕截图：

另一答案

我创建了以下ImageView扩展，将其与水平渐变相结合，您可以轻松更改此类并添加垂直渐变。 （测试最新的Android版本4.4.2）

基类：

public class FadingImageView extends ImageView {
    private FadeSide mFadeSide;

    private Context c;

    public enum FadeSide {
        RIGHT_SIDE, LEFT_SIDE
    }

    public FadingImageView(Context c, AttributeSet attrs, int defStyle) {
        super(c, attrs, defStyle);

        this.c = c;

        init();
    }

    public FadingImageView(Context c, AttributeSet attrs) {
        super(c, attrs);

        this.c = c;

        init();
    }

    public FadingImageView(Context c) {
        super(c);

        this.c = c;

        init();
    }

    private void init() {
        // Enable horizontal fading
        this.setHorizontalFadingEdgeEnabled(true);
        // Apply default fading length
        this.setEdgeLength(14);
        // Apply default side
        this.setFadeDirection(FadeSide.RIGHT_SIDE);
    }

    public void setFadeDirection(FadeSide side) {
        this.mFadeSide = side;
    }

    public void setEdgeLength(int length) {
        this.setFadingEdgeLength(getPixels(length));
    }

    @Override
    protected float getLeftFadingEdgeStrength() {
        return mFadeSide.equals(FadeSide.LEFT_SIDE) ? 1.0f : 0.0f;
    }

    @Override
    protected float getRightFadingEdgeStrength() {
        return mFadeSide.equals(FadeSide.RIGHT_SIDE) ? 1.0f : 0.0f;
    }

    @Override
    public boolean hasOverlappingRendering() {
        return true;
    }

    @Override
    public boolean onSetAlpha(int alpha) {
        return false;
    }

    private int getPixels(int dipValue) {
        Resources r = c.getResources();

        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                dipValue, r.getDisplayMetrics());
    }
}

用法：

- 在XML中创建以下对象：

<com.your.package.FadingImageView
    android:id="@+id/fade_image_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/some_drawable" />

- 然后应用你想要的淡化方：

    FadingImageView mFadingImageView = (FadingImageView) findViewById(R.id.fade_image_view);

    mFadingImageView.setEdgeLength(28);

    mFadingImageView.setFadeDirection(FadeSide.RIGHT_SIDE);

另一答案

尝试这个工作：不需要扩展ImageView

imageView.scrollTo();
imageView.setHorizontalFadingEdgeEnabled(true);
imageView.setFadingEdgeLength(40);

另一答案

只需将您的drawable与您在自定义drawable中的边缘颜色合并，就像这样... fade_image_background.xml

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/abc" />
<item>
    <shape android:shape="rectangle">
        <gradient
            android:angle="270"
            android:endColor="#000000"
            android:startColor="#00000000"
            android:type="linear" />
    </shape>
</item>

并使用这样的自定义drawable ..

android:background="@drawable/fade_image_background"