Применить затухающие края к ImageView

Можно ли применить вертикальные/горизонтальные затухающие ребра к компоненту ImageView?

Я уже пробовал android:fadingEdge, но, к сожалению, этот атрибут устарел и будет проигнорирован с уровня API 14, Любые идеи?

4 ответа

Я создаю следующую строку 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:

- Затем примените желаемую сторону затухания:

FadingImageView mFadingImageView = (FadingImageView) findViewById(R.id.fade_image_view);
 mFadingImageView.setEdgeLength(28);
 mFadingImageView.setFadeDirection(FadeSide.RIGHT_SIDE);


Я нашел аккуратное обходное решение, которое отлично сработало для меня. Мне нужно было ослабить верхнюю и нижнюю изображения (этот подход работает для любой стороны, но просто создайте другой градиент). Я завернул 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></imageview></framelayout>

Теперь 2 вида находятся поверх изображения, и их градиентные фоновые файлы xml выглядят следующим образом (это верхний градиент, нижний - это то же самое, что и цвет начала/конца):

Вы можете выбрать высоту затухания, которая работает для вас, я выбрал 120dp, и это хорошо послужило моим потребностям. Здесь снимок экрана только из моего эмулятора ImageView:


Просто слейте свой 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">
 </gradient></shape>
</item>
</item></layer-list>

и используйте этот пользовательский способ, например:

android:background="@drawable/fade_image_background"


Попробуйте эту работу: не нужно расширять ImageView

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

licensed under cc by-sa 3.0 with attribution.