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

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

圆角后:

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

实现的原理

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

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

接下来看代码:

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:rc="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#cccccc">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:scaleType="fitXY"
            android:src="@mipmap/test" />

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:scaleType="fitXY"
            android:src="@mipmap/test" />

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:scaleType="fitXY"
            android:src="@mipmap/test" />
    </LinearLayout>

    <contacts.com.hotpoint.FilletView
        android:layout_width="100dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true"
        rc:angle="10dp"
        rc:edgeColor="#ff0000"></contacts.com.hotpoint.FilletView>

</RelativeLayout>

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

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

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--自定义圆角效果-->
    <declare-styleable name="FilletView">
        <attr name="edgeColor" format="color" />
        <attr name="angle" format="dimension" />
    </declare-styleable>
</resources>

接下来就是自定义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);
    }
}