有没有办法在 ImageView
组件上应用垂直/水平渐变边缘?
我已经尝试了 android:fadingEdge
,但不幸的是该属性已被弃用,并且从 API 级别 14 开始将被忽略。有什么想法吗?
我找到了一个非常巧妙的解决方法,对我来说完美地解决了问题。我需要淡化(这种方法适用于任何一侧,只需创建不同的渐变) ImageView
的顶部和底部。我将ImageView
装在一个FrameLayout
中,并在上下各放置了2个View
,然后为每个背景创建了渐变的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>
现在两个视图位于图像视图之上,它们的渐变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);
public class FadingImageView extends AppCompatImageView {
private boolean mFadeRight;
private boolean mFadeLeft;
private boolean mFadeTop;
private boolean mFadeBottom;
private Context c;
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);
this.setVerticalFadingEdgeEnabled(true);
// Apply default fading length
this.setEdgeLength(14);
// Apply default side
this.setFadeRight(true);
}
public void setFadeRight(boolean fadeRight) {
mFadeRight = fadeRight;
}
public void setFadeLeft(boolean fadeLeft) {
mFadeLeft = fadeLeft;
}
public void setFadeTop(boolean fadeTop) {
mFadeTop = fadeTop;
}
public void setFadeBottom(boolean fadeBottom) {
mFadeBottom = fadeBottom;
}
public void setEdgeLength(int length) {
this.setFadingEdgeLength(getPixels(length));
}
@Override
protected float getTopFadingEdgeStrength() {
return mFadeTop ? 1.0f : 0.0f;
}
@Override
protected float getBottomFadingEdgeStrength() {
return mFadeBottom ? 1.0f : 0.0f;
}
@Override
protected float getLeftFadingEdgeStrength() {
return mFadeLeft ? 1.0f : 0.0f;
}
@Override
protected float getRightFadingEdgeStrength() {
return mFadeRight ? 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());
}
}
mFadingImageView.setFadeTop(true);
mFadingImageView.setFadeBottom(true);
mFadingImageView.setFadeLeft(true);
mFadingImageView.setFadeRight(true);
只需在自定义的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>
然后像这样使用自定义的可绘制对象。
android:background="@drawable/fade_image_background"
imageView.scrollTo();
imageView.setHorizontalFadingEdgeEnabled(true);
imageView.setFadingEdgeLength(40);