自定义View的圆角之旅

很久没写过东西,今天突然想写一个最近一直想记录的东西,相信很多猿友们也是很烦的一个东西,现在的设计的偏爱圆角,经常需求不是这里画一个圆角就是那里画一个圆角,让人头疼,当然有些人会出来说了,画个圆角不是很容易的事情吗?
确实,想要写一个静态的圆角,我姑且称它为静态的圆角吧,那是很容易的,因为它不算是真正的圆角吧,我理解那只是把背景弄成了圆角,一旦我的内容充满布局,你的圆角就会不见了;
光文字表达,估计很多看官不会理解我的意思吧,通过下面的代码,我们来看看最简单的实现的所谓圆角吧:

1. 简单圆角-圆角背景

我们通过在drawable文件下写这么一个xml,它就会生成一个圆角的背景



    
    

那么怎么使用尼,不要急

//在需要使用的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的裁剪方式。

你可能感兴趣的:(自定义View的圆角之旅)