Android圆角ImageView的几种实现方式(包含四个角的分别设置)

在实际的开发中,我们经常会遇到需要圆角ImageView的情况,但是这种ImageView官方是没有提供的,所以需要我们去自己重写ImageView来达到圆角的效果,但是实现这种圆角效果其实有几种不同的实现方式,所以这一篇就对不同的实现方式进行讲解,并简单分析。

一.BitmapShader方式


首先简单了解下BitmapShader,BitmapShader是Shader的子类,Shader在三维软件中我们称之为着色器,所以通俗的理解,Shader的作用是给图像着色或者上色,BitmapShader允许我们载入一张图片来给图像着色,具体不做过多的解释,结尾贴出关于Shader的具体使用的文章

所以其实根据上面对于BitmapShader的描述,其实就可以对圆角ImageView有一定的思路了吧,画一个圆角矩形,然后把本来画上去的图像着色到圆角矩形上,这样就实现了圆角的ImageView

思路说了就把代码直接贴上来了,代码注释也很清楚的,不做过多的解释了

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;
    }
}

只是基本功能的实现,并没有进行更多的扩展,所以如果需要,自给自足即可

二. PorterDuffXfermode方式


首先得了解下什么是PorterDuffXfermode,PorterDuffXfermode是Xfermode的子类,Xfermode又称为图像混合模式,除了PorterDuffXfermode之外还有其他几个子类分别为AvoidXfermode,PixelXorXfermode,

不做详细的介绍,会在文章后面贴上详细学习的文章,我们要知道的是我们需要用到的,我们通过设置PorterDuffXfermode属性PorterDuff.Mode.SRC_IN来实现需要的效果,那么这个PorterDuff.Mode.SRC_IN是什么意思呢?他的意思是源图像与目标图像相交地方绘制源图像,所以只需要我们把源图像设置为圆角矩形,目标图像绘制源图像,那么经过PorterDuffXfermode的效果就可以达到圆角矩形的效果

这个API因为不支持硬件加速在API 16已经过时了,如果想在高于API 16的机子上测试这玩意,必须现在应用或手机设置中关闭硬件加速

接下来贴上实现的源码,不做解释了,注释写的很清晰了

public class RoundImageView extends ImageView{
 
    private Paint mPaint;
    private Xfermode mXfermode;
    private int mBorderRadius = 10;
 
    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);
 
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mXfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
 
        if (getDrawable() == null){
            return;
        }
 
        int sc = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);
        //画源图像,为一个圆角矩形
        canvas.drawRoundRect(new RectF(0, 0, getWidth(), getHeight()), mBorderRadius, mBorderRadius,
                mPaint);
        //设置混合模式
        mPaint.setXfermode(mXfermode);
        //画目标图像
        canvas.drawBitmap(drawableToBitamp(exChangeSize(getDrawable())), 0, 0, mPaint);
        // 还原混合模式
        mPaint.setXfermode(null);
        canvas.restoreToCount(sc);
 
    }
 
    /**
     * 图片拉升
     *
     * @param drawable
     * @return
     */
    private Drawable exChangeSize(Drawable drawable){
        float scale = 1.0f;
        scale = Math.max(getWidth() * 1.0f / drawable.getIntrinsicWidth(), getHeight()
                * 1.0f / drawable.getIntrinsicHeight());
        drawable.setBounds(0, 0, (int) (scale * drawable.getIntrinsicWidth()),
                (int) (scale * drawable.getIntrinsicHeight()));
        return drawable;
    }
 
 
    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;
    }
}

三.ClipPath方式


ClipPath是Canvas提供对画布裁剪的方法之一,除了ClipPath还有clipRect方法,画布裁剪后后面的Canvas操作,都会在对裁剪后的画布进行操作

所以呢,只要绘出一个圆角矩形的路径,然后用ClipPath裁剪,那么得到的画布就是圆角矩形的,那么后面的绘制自然也就是圆角矩形的了,解释很清楚了,直接上代码了,

public class RoundImageView extends ImageView{
 
    float width,height;
    private int leftTopRadius;
    private int rightTopRadius;
    private int leftBottomRadius;
    private int rightBottomRadius;
 
    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);
        if (Build.VERSION.SDK_INT < 18) {
            setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        }
    }
 
    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        width = getWidth();
        height = getHeight();
    }

    private void init(Context context,AttributeSet attrs){

        //读取自定义属性
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.Round_Angle_Image_View);
        radius = typedArray.getDimensionPixelOffset(R.styleable.Round_Angle_Image_View_radius,defaultRadius);
        leftTopRadius = typedArray.getDimensionPixelOffset(R.styleable.Round_Angle_Image_View_left_top_radius,defaultRadius);
        rightTopRadius = typedArray.getDimensionPixelOffset(R.styleable.Round_Angle_Image_View_right_top_radius,defaultRadius);
        leftBottomRadius = typedArray.getDimensionPixelOffset(R.styleable.Round_Angle_Image_View_left_bottom_radius,defaultRadius);
        rightBottomRadius = typedArray.getDimensionPixelOffset(R.styleable.Round_Angle_Image_View_right_bottom_radius,defaultRadius);

        //如果四个角的值没有设置,就用通用的radius
        if(leftTopRadius == defaultRadius){
            leftTopRadius = radius;
        }
        if(rightTopRadius == defaultRadius){
            rightTopRadius = radius;
        }
        if(leftBottomRadius == defaultRadius){
            leftBottomRadius = radius;
        }
        if(rightBottomRadius == defaultRadius){
            rightBottomRadius = radius;
        }
        typedArray.recycle();

    }
 
    @Override
    protected void onDraw(Canvas canvas) {
 
        if (width > 12 && height > 12) {
            Path path = new Path();
            /*向路径中添加圆角矩形。radii数组定义圆角矩形的四个圆角的x,y半径。radii长度必须为8*/
            float rids[] = {leftTopRadius,leftTopRadius,rightTopRadius,rightTopRadius,leftBottomRadius,leftBottomRadius,rightBottomRadius,rightBottomRadius};
            path.addRoundRect(new RectF(0,0,width,height),rids,Path.Direction.CW);
            canvas.clipPath(path);
        }
 
        super.onDraw(canvas);
    }
}

在attrs文件中添加属性

    <!-- 自定义四角矩形ImageView 的四个圆角属性 -->
    <declare-styleable name="Round_Angle_Image_View">
        <attr name="left_top_radius" format="dimension"/>
        <attr name="right_top_radius" format="dimension"/>
        <attr name="left_bottom_radius" format="dimension"/>
        <attr name="right_bottom_radius" format="dimension"/>
        <attr name="radius" format="dimension"/>
    </declare-styleable>

 

使用方式

<!-- 四个大小一致的圆角 -->
<com.xxx.xxx.RoundImageView
        android:id="@+id/iv_head"
        android:layout_width="42dp"
        android:layout_height="42dp"
        android:layout_marginTop="13dp"
        android:scaleType="centerCrop"
        roundiv:radius="6dp"
        android:src="@mipmap/default_group"
        />
<!-- 其中 roundiv可随意命名, 需要声明命名空间 xmlns:roundiv="http://schemas.android.com/apk/res-auto"-->

<!-- 或只单独某个角为圆角 -->
<com.xxx.xxx.RoundImageView
        android:id="@+id/iv_head"
        android:layout_width="42dp"
        android:layout_height="42dp"
        android:layout_marginTop="13dp"
        android:scaleType="centerCrop"
        roundiv:left_top_radius="5dp"
        roundiv:right_top_radius="10dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:src="@mipmap/default_group"
        />

 

四.选择哪一种?


实现有三种,那选择哪一种最时候呢?其中前两种抗锯齿效果比较好,但代码稍微复杂一点,第三种抗锯齿效果比较差,但可以自定义四个角的圆角半径。需要的圆角ImageView的四个角大小一致的话,采用第一种即可;想要对四个角进行不同的操作,建议采用第三种。

 

参考:(177条消息) 关于Android圆角ImageView的几种实现方式_birthmarkqiqi的专栏-CSDN博客_android 圆角imageview

  • 7
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

chailongger

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值