recycleview 的item图片倒影效果

最新推荐文章于 2025-03-11 10:13:00 发布

原创最新推荐文章于 2025-03-11 10:13:00 发布 · 870 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android

该博客介绍了一个自定义View `ReflectItemView`，用于在Android的RecyclerView中为每个Item创建图片的倒影效果。通过继承`FrameLayout`，`ReflectItemView`在`dispatchDraw`方法中绘制倒影，利用`Bitmap`和`Canvas`进行操作。博客还展示了如何使用Glide加载图片并应用到这个自定义View中。

public class ReflectItemView extends FrameLayout {
    private static final String TAG = "ReflectItemView";
    private Paint mRefPaint = null;
    private Bitmap mReflectBitmap;
    private Canvas mReflectCanvas;
    private View mContentView;
    private static final int REFHEIGHT = 100;

    public ReflectItemView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context, attrs);
    }

    public ReflectItemView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    public ReflectItemView(Context context) {
        super(context);
        init(context, null);
    }

    private void init(Context context, AttributeSet attrs) {
        if (attrs != null) {
            TypedArray tArray = context.obtainStyledAttributes(attrs,
                    R.styleable.ReflectItemView);// 获取配置属性
            boolean isReflect = tArray.getBoolean(
                    R.styleable.ReflectItemView_isReflect, false);
            setReflection(isReflect);
        }
        //
        if (mRefPaint == null) {
            mRefPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            // 倒影渐变.
            mRefPaint
                    .setShader(new LinearGradient(0, 0, 0, REFHEIGHT,
                            0x70ffffff, 0x00ffffff, Shader.TileMode.MIRROR));
            mRefPaint.setXfermode(new PorterDuffXfermode(
                    PorterDuff.Mode.MULTIPLY));
        }
        setClipChildren(false);
        setClipToPadding(false);
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        if (getChildCount() > 0) {
            mContentView = getChildAt(0);
        }
    }

    @Override
    public void addView(View child) {
        mContentView = child;
        super.addView(child);
    }

    public View getContentView() {
        return mContentView;
    }

// @Override
// public boolean performClick() {
//    if (mContentView != null) {
//       return mContentView.performClick();
//    } else {
//       return super.performClick();
//    }
// }

    private boolean mIsReflection = true;

    public void setReflection(boolean ref) {
        mIsReflection = ref;
        invalidate();
    }

    public boolean isReflection() {
        return this.mIsReflection;
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
        if (mIsReflection) {
            // 创建一个画布.
            if (mReflectBitmap == null && mContentView != null) {
                mReflectBitmap = Bitmap.createBitmap(mContentView.getWidth(),
                        REFHEIGHT, Bitmap.Config.ARGB_8888);
                mReflectCanvas = new Canvas(mReflectBitmap);
            }
            // 绘制倒影.
            if (mContentView != null) {
                drawReflection(mReflectCanvas);
                canvas.save();
                int dy = mContentView.getBottom() + getResources().getDimensionPixelOffset(R.dimen.size_8);
                int dx = mContentView.getLeft();
                canvas.translate(dx, dy);
                canvas.drawBitmap(mReflectBitmap, 0, 0, null);
                canvas.restore();
            }
        }
    }

    public Bitmap getReflectBitmap() {
        return mReflectBitmap;
    }

    /**
     * 绘制倒影.
     */
    public void drawReflection(Canvas canvas) {
        canvas.save();
        canvas.clipRect(0, 0, mContentView.getWidth(), REFHEIGHT);
        canvas.save();
        canvas.scale(1, -1);
        canvas.translate(0, -mContentView.getHeight());
        mContentView.draw(canvas);
        canvas.restore();
        canvas.drawRect(0, 0, mContentView.getWidth(), REFHEIGHT, mRefPaint);
        canvas.restore();
    }
}

布局：
<com.aixuetang.future.view.ReflectItemView
    android:layout_width="400px"
    android:layout_height="610px"
    android:background="@drawable/bg_item_recycle"
    card:isReflect="true">

    <com.aixuetang.future.view.RoundImageView
        android:id="@+id/ivCourseImage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:layout_marginBottom="20px"
        card:type="round" />


</com.aixuetang.future.view.ReflectItemView>



图片加载
Glide.with(itemView.getContext()).load(Constants.BASE_PIC_URL + model.getB_IMG()).asBitmap().error(R.drawable.ic_default_home)
        .placeholder(R.drawable.ic_default_home).into(new SimpleTarget<Bitmap>() {
    @Override
    public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {
        ivCourseImage.setImageBitmap(resource);
    }

    @Override
    public void onLoadFailed(Exception e, Drawable errorDrawable) {

    }
});