将淡化边应用于ImageView

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了将淡化边应用于ImageView相关的知识,希望对你有一定的参考价值。

有没有办法将垂直/水平渐变边应用于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模拟器的屏幕截图:

enter image description here

另一答案

我创建了以下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"

以上是关于将淡化边应用于ImageView的主要内容,如果未能解决你的问题,请参考以下文章

带有边距和页面转换器的片段内的 ViewPager 无法正确呈现

我无法使用 RegisterActivityForResult 发送请求代码

将 OnLongClickListener 应用于具有相同名称的多个图像

使用 WindowManager.addView 添加动态视图

片段之间的共享元素转换

如何在 Android 中单击 ImageView 时从一个片段移动到另一个片段?