android 设置4个棱角的颜色,整个布局圆角效果,类似图片圆角

先看效果图,是三个imageview在一条直线显示,给顶部圆角以及底部圆角,先看未圆角效果的图:

圆角后:

可以看到效果 中间的没有变,只变换了最上面以及最底部....

实现的原理

就是给整个布局的四个角设置一个和背景颜色一样的效果,例如我换成红色的效果:

可以看到四个边角变成了红色  ,也就是说 ,圆角的实现 就是把四个角的颜色调成和背景色一样即可

接下来看代码:

布局代码,angel 就是设置圆角的角度,edgeColor 是设置圆角的颜色:

里面test就是那张美女的图片  我也传上来吧,

然后在values文件夹下创建 attr.xml文件,编辑自定义的属性,代码如下:

接下来就是自定义view了,也很简单,代码如下:

public class FilletView extends View {
    private PorterDuffXfermode mPorterDuffXfermode;
    private RectF srcRect;
    private Context mContext;
    private int angle;
    private int edgeColor;

    public FilletView(Context context) {
        super(context);
        mContext = context;
    }

    public FilletView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPorterDuffXfermode = new PorterDuffXfermode(PorterDuff.Mode.XOR);
        mContext = context;
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.FilletView);
        angle = typedArray.getDimensionPixelOffset(R.styleable.FilletView_angle, 0);
        edgeColor = typedArray.getColor(R.styleable.FilletView_edgeColor, 00000000);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.TRANSPARENT);
        Paint _paint = new Paint();
        int saveCount = canvas.saveLayer(srcRect, _paint, Canvas.ALL_SAVE_FLAG);
        _paint.setColor(edgeColor);
        canvas.drawRoundRect(srcRect, angle, angle, _paint);
        _paint.setXfermode(mPorterDuffXfermode);
        canvas.drawRect(srcRect, _paint);
        _paint.setXfermode(null);
        canvas.restoreToCount(saveCount);
    }


    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        srcRect = new RectF(0, 0, w, h);
    }
}