很久没写过东西,今天突然想写一个最近一直想记录的东西,相信很多猿友们也是很烦的一个东西,现在的设计的偏爱圆角,经常需求不是这里画一个圆角就是那里画一个圆角,让人头疼,当然有些人会出来说了,画个圆角不是很容易的事情吗?
确实,想要写一个静态的圆角,我姑且称它为静态的圆角吧,那是很容易的,因为它不算是真正的圆角吧,我理解那只是把背景弄成了圆角,一旦我的内容充满布局,你的圆角就会不见了;
光文字表达,估计很多看官不会理解我的意思吧,通过下面的代码,我们来看看最简单的实现的所谓圆角吧:
1. 简单圆角-圆角背景
我们通过在drawable文件下写这么一个xml,它就会生成一个圆角的背景
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#0dffffff"/>
<corners
android:radius="10dp"/>
</shape>
那么怎么使用尼,不要急
//在需要使用的view中添加这么一个
android:background="@drawable/bg_0dffffff_rad2"
//或者是这样
xxxView.setBackground(getResources().getDrawable(R.drawable.icon_home_page_movie_tag_bg));
一般情况下就会满足你的需求了,不过若这个View是一个imageView通过网络load一张图片,或者这个是个容器,而它的子View会撑满容器,那这个时候会怎么样尼,答案是你们View并没有圆角,它只是表面圆角,你的子View 会占据到圆角以外的地方,你imageview加载的bitmap也会占据你之前设置的圆角背景以外的地方;
其实,一开始你就应该能够想到,这样怎么能够实现圆角尼?通过手机的开发者模式--->显示布局边界,可以看到布局的边界,看到现在是占的内容边界,其实是没有任何改变的,那么这样的圆角背景是不是灭有用啊,当然不是的,这样的圆角适用于一个View给定一个背景不再改变,而子View也不会撑满该布局的时候;
其实这个圆角没生效的主要原因,通过代码我们也能看出来,它只是固定了背景是圆角的,内容尼?我们没做任何处理,肯定是在父view中任我展示了;那么圆角背景固然不会有效了;
那么通过我们发现的问题,我们接下里从内容出发,我们去改变内容的边界,是否就可以解决圆角的问题尼?
2.圆角-从内容出发
view的内容,无非就是bitmap,drawable,才会有成为圆角的需求;那么我们怎么让它们成为圆角尼,我的解决办法就是处理bitmap;
一种方式就是在通过glide进行网络加载时候,设置BitmapTransform,BitmapTransform就按照自己的意愿进行设置,比如圆角;不过这个方法我没怎么用,要是有兴趣可以找找相关的解决办法;我主要是讲第三点,我研究的解决办法
3.圆角-画圆角
画圆角我了解到有三种办法,接下来我就一点一点为看官们揭露出来;
3.1ClipPath
看名字,我们就知道实现方式,它是通过裁剪的方式实现的它是最简单的圆角实现方式;
ClipPath是Canvas提供对画布裁剪的方法之一,除了ClipPath还有clipRect方法,画布裁剪后后面的Canvas操作,都会在对裁剪后的画布进行操作
只要绘出一个圆角矩形的路径,然后用ClipPath裁剪,那么得到的画布就是圆角矩形的,那么后面的绘制自然也就是圆角矩形的了;
/**
* 无抗锯齿
*/
@Override
protected void dispatchDraw(Canvas canvas) {
Path path = new Path();
path.addRoundRect(new RectF(0, 0, getMeasuredWidth(), getMeasuredHeight()), DimenUtils.dp2px(cornerRadius),
DimenUtils.dp2px(cornerRadius), Path.Direction.CW);
canvas.clipPath(path, Region.Op.REPLACE);
super.dispatchDraw(canvas);
}
这种方式是最简单的一种,性能好,且代码量少,不过这个有个缺点,同我代码中注释一样,它无抗锯齿性,因此一般不会选用这种方式;
3.2 BitmapShader
BitmapShader是Shader的子类,这个类非常强大,BitmapShader允许我们载入一张图片来给图像着色;解决思路就是画一个圆角矩形,然后把本来画上去的图像着色到圆角矩形上,这样就实现了圆角的View,我一般做圆角头像就是通过这种方式,废话不多,为看官手撸一下示例:
public class RoundImageView extends ImageView{
//圆角大小,默认为10
private int mBorderRadius = 10;
private Paint mPaint;
// 3x3 矩阵,主要用于缩小放大
private Matrix mMatrix;
//渲染图像,使用图像为绘制图形着色
private BitmapShader mBitmapShader;
public RoundImageView(Context context) {
this(context, null);
}
public RoundImageView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public RoundImageView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mMatrix = new Matrix();
mPaint = new Paint();
mPaint.setAntiAlias(true);
}
@Override
protected void onDraw(Canvas canvas) {
if (getDrawable() == null){
return;
}
Bitmap bitmap = drawableToBitamp(getDrawable());
mBitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
float scale = 1.0f;
if (!(bitmap.getWidth() == getWidth() && bitmap.getHeight() == getHeight()))
{
// 如果图片的宽或者高与view的宽高不匹配,计算出需要缩放的比例;缩放后的图片的宽高,一定要大于我们view的宽高;所以我们这里取大值;
scale = Math.max(getWidth() * 1.0f / bitmap.getWidth(),
getHeight() * 1.0f / bitmap.getHeight());
}
// shader的变换矩阵,我们这里主要用于放大或者缩小
mMatrix.setScale(scale, scale);
// 设置变换矩阵
mBitmapShader.setLocalMatrix(mMatrix);
// 设置shader
mPaint.setShader(mBitmapShader);
canvas.drawRoundRect(new RectF(0,0,getWidth(),getHeight()), mBorderRadius, mBorderRadius,
mPaint);
}
private Bitmap drawableToBitamp(Drawable drawable)
{
if (drawable instanceof BitmapDrawable)
{
BitmapDrawable bd = (BitmapDrawable) drawable;
return bd.getBitmap();
}
// 当设置不为图片,为颜色时,获取的drawable宽高会有问题,所有当为颜色时候获取控件的宽高
int w = drawable.getIntrinsicWidth() <= 0 ? getWidth() : drawable.getIntrinsicWidth();
int h = drawable.getIntrinsicHeight() <= 0 ? getHeight() : drawable.getIntrinsicHeight();
Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0, 0, w, h);
drawable.draw(canvas);
return bitmap;
}
}
给了一个drawable转bitmap的方法,其他属性可以自己根据自定义view的方式进行扩展,比如圆角大小可以进行传入,这里是为了方便写死了;
3.3 PorterDuffXfermode(遮罩方式)
首先得了解下什么是PorterDuffXfermode,PorterDuffXfermode是Xfermode的子类,Xfermode又称为图像混合模式,除了PorterDuffXfermode之外还有其他几个子类分别为AvoidXfermode,PixelXorXfermode,我们通过设置PorterDuffXfermode属性PorterDuff.Mode.SRC_IN来实现需要的效果,那么这个PorterDuff.Mode.DST_OUT是什么意思呢?详细戳这里各个击破搞明白PorterDuff.Mode,这里的意思是源图像与目标图像相交地方绘制源图像,所以只需要我们把源图像设置为圆角矩形,目标图像绘制源图像,那么经过PorterDuffXfermode的效果就可以达到圆角矩形的效果;
private void init() {
roundPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
imagePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
roundPaint.setStyle(Paint.Style.FILL);
roundPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));//处理重叠部分
imagePaint.setXfermode(null);
}
@Override
protected void dispatchDraw(Canvas canvas) {
canvas.saveLayer(new RectF(0, 0, canvas.getWidth(), canvas.getHeight()), imagePaint, Canvas.ALL_SAVE_FLAG);
super.dispatchDraw(canvas);
drawTopLeft(canvas);
drawTopRight(canvas);
drawBottomLeft(canvas);
drawBottomRight(canvas);
canvas.restore();
}
private void drawTopLeft(Canvas canvas) {
if (topLeftCornerRadius > 0) {
Path path = new Path();
path.moveTo(0, cornerRadius);
path.lineTo(0, 0);
path.lineTo(cornerRadius, 0);
path.arcTo(new RectF(0, 0, cornerRadius * 2, cornerRadius * 2),
-90, -90);
path.close();
canvas.drawPath(path, roundPaint);
}
}
....//其他类似draw方法通过改变相关参数实现
这种方式是我比较推荐的方式,其中有个小细节估计,大家也发现了我在进行canvas的时候,有时候是在onDraw中,有时候是在dispatchDraw中;是为什么尼?
- ViewGroup 一般情况下不会回调
onDraw()
,除非有背景或者其他情况,具体可以看下UI绘制流程中有关 draw 的描述。- ViewGroup 存在背景的情况下,在
onDraw()
中绘制,的确可以绘制成功,但会被子控件遮挡,所以这里并不是是一个好的时机。- ViewGroup 的绘制,应该在
dispatchDraw()
中,并且放在 super 之后,目的是确保在子 View 绘制完成后,再进行绘制,这样就不会被子 View 遮挡了。
再者,若是对drawTopLeft方法中的一些API不熟悉的话,我给一个传送门android中path的arcTo方法的使用;
总结
最后,给一点建议,我们在做圆角的时候,如果能够通过shap背景解决的话,那么我们就是用shap,如果需求需要我建议使用最后一种遮罩方式进行圆角,但是会在性能上有些开销,毕竟会对bitmap进行处理,如果对抗锯齿无要求的话,建议使用clip的裁剪方式。