Android 一个Banner的遮罩层

b Android 一个Banner的遮罩层

一直以来都有一个需求，那就是给banner加上圆角

看到这样的效果 我遇见过很多人都是直接把图片弄成了圆角 或者是直接让后台返回圆角的图片，表面上看没问题，
但是banner不可能只有一张图 在滑动的时候就会出现一个问题，两张图之间会员一个缝隙，这里就不说缝隙怎么来
的了

很明显的缝隙 我的老板这都能看出来

于是我选择了用遮罩 把图片的四周都用布遮起来 这样在图片滚动的时候就不会出现缝隙了，我想到了两个方法

1 ui切图

让ui切割四边是圆角中间透明的图就可以了

2 自定义一个布局

因为都是简单的东西 我直接上代码了

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

import com.rfkf.interestingchat.common.R;

/**
 * banner的遮罩层
 */
public class BannerMaskView extends View {

    /**
     * 是否初始化完毕
     */
    private boolean isInit = false;

    /**
     * 圆角的大小
     */
    private int corners = 50;

    private int bgColor = 0;

    private Paint bgPaint;


    private Paint mPaint;

    public BannerMaskView(Context context, AttributeSet attrs) {
        super(context, attrs);
        //这里开启硬件加速   相交的部分就不会为黑色了
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        setAttrs(context, attrs);
        bgPaint = new Paint();
        bgPaint.setStrokeWidth(0);
        bgPaint.setColor(bgColor);
        bgPaint.setStyle(Paint.Style.FILL);
        mPaint = new Paint();
        mPaint.setStrokeWidth(0);
        mPaint.setColor(bgColor);
        mPaint.setStyle(Paint.Style.FILL);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (!isInit) {
            return;
        }
        int width = getWidth();
        int height = getHeight();

        //画一个透明的圆角矩形
        if (true) {
            RectF rectF = new RectF();
            rectF.left = 0;
            rectF.top = 0;
            rectF.right = width;
            rectF.bottom = height;
            //如果遮罩只想显示一个圆的话  这里只要画一个圆就行了
            canvas.drawRoundRect(rectF, corners, corners, bgPaint);
        }
        //在源图像和目标图像相交的地方之外绘制
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.XOR));
        //画一个背景色的长方形
        if (true) {
            RectF rectF = new RectF();
            rectF.left = 0;
            rectF.top = 0;
            rectF.right = width;
            rectF.bottom = height;
            canvas.drawRect(rectF, mPaint);
        }
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        isInit = true;
        postInvalidate();
    }

    /**
     * 设置属性
     *
     * @param context
     * @param attrs
     */
    private void setAttrs(Context context, AttributeSet attrs) {
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.BannerMaskView);
        bgColor = a.getColor(R.styleable.BannerMaskView_bmv_background_color, Color.TRANSPARENT);
        corners = (int) a.getDimension(R.styleable.BannerMaskView_bmv_background_corners, 0);
        a.recycle();
    }

}

别忘了自定义的属性

  <declare-styleable name="BannerMaskView">

        <attr name="bmv_background_color" format="color" />
        <attr name="bmv_background_corners" format="dimension" />

    </declare-styleable>

以上代码是可以直接使用的 修改一下就可以适应其他的环境了

暂时还没最终的效果图 以后加上

因为这个东西我碰到过很多次了，所以自己做个笔记 也希望能帮到需要的童鞋