先看效果图,是三个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);
}
}