android 圆角图片

作者: cnbzlj 发布时间: 2019-09-23 浏览: 1715 次 编辑

今天,简单讲讲Android圆角图片的使用。

最近,感觉好忙,换了工作,新的APP要重新阅读,对我是一个考验。所有这段时间的博客可能不会很详细了,因为我比较忙,而且还有很多内容要写。这篇写完后,我会写一个系列的Android目前流行的框架的基本使用,最近也在看这些内容,需要记录一下。

实现圆角图片的方法很多,网上讲原理的一大堆,我就直接上代码,还是一个自定义控件就可以完成功能。

一.声明需要的变量

/**
  * TYPE_CIRCLE / TYPE_ROUND
  */
 private int type;
 private static final int TYPE_CIRCLE = 0;
 private static final int TYPE_ROUND = 1;
 
 /**
  * 图片
  */
 private Bitmap mSrc;
 
 /**
  * 圆角的大小
  */
 private int mRadius;
 
 /**
  * 控件的宽度
  */
 private int mWidth;
 /**
  * 控件的高度
  */
 private int mHeight;

二.初始化变量

/**
  * 初始化一些自定义的参数
  *
  * @param context
  * @param attrs
  * @param defStyle
  */
 public CustomImageView(Context context, AttributeSet attrs, int defStyle)
 {
        super(context, attrs, defStyle);
 
        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomImageView, defStyle, 0);
 
        int n = a.getIndexCount();
        for (int i = 0; i < n; i++)
        {
            int attr = a.getIndex(i);
            switch (attr)
            {
                case R.styleable.CustomImageView_src:
                    mSrc = BitmapFactory.decodeResource(getResources(), a.getResourceId(attr, 0));
                    break;
                case R.styleable.CustomImageView_type:
                    type = a.getInt(attr, 0);// 默认为Circle
                    break;
                case R.styleable.CustomImageView_borderRadius:
                    type = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10f,
                            getResources().getDisplayMetrics()));// 默认为10DP
                    break;
            }
        }
        a.recycle();
 }

这个内容很简单,就是自定义属性的获取,如果有人不知道,可以看我之前写过自定义属性的博客。xml文件的代码如下:

<?xml version="1.0" encoding="utf-8"?>
<resources>
 
    <attr name="borderRadius" format="dimension" />
    <attr name="type">
        <enum name="circle" value="0" />
        <enum name="round" value="1" />
    </attr>
    <attr name="src" format="reference"></attr>
 
    <declare-styleable name="CustomImageView">
        <attr name="borderRadius" />
        <attr name="type" />
        <attr name="src" />
    </declare-styleable>
 
</resources>

三.根据图片大小计算显示的宽高

/**
  * 计算控件的高度和宽度
  */
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
 {
        // super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 
        /**
         * 设置宽度
         */
        int specMode = MeasureSpec.getMode(widthMeasureSpec);
        int specSize = MeasureSpec.getSize(widthMeasureSpec);
 
        if (specMode == MeasureSpec.EXACTLY)// match_parent , accurate
        {
            mWidth = specSize;
        } else
        {
            // 由图片决定的宽
            int desireByImg = getPaddingLeft() + getPaddingRight() + mSrc.getWidth();
            if (specMode == MeasureSpec.AT_MOST)// wrap_content
            {
                mWidth = Math.min(desireByImg, specSize);
            }
        }
 
        /***
         * 设置高度
         */
 
        specMode = MeasureSpec.getMode(heightMeasureSpec);
        specSize = MeasureSpec.getSize(heightMeasureSpec);
        if (specMode == MeasureSpec.EXACTLY)// match_parent , accurate
        {
            mHeight = specSize;
        } else
        {
            int desire = getPaddingTop() + getPaddingBottom() + mSrc.getHeight();
            if (specMode == MeasureSpec.AT_MOST)// wrap_content
            {
                mHeight = Math.min(desire, specSize);
            }
        }
        setMeasuredDimension(mWidth, mHeight);
 
 }

四.绘制圆角图片

/**
  * 绘制
  */
 @Override
 protected void onDraw(Canvas canvas)
 {
 
        switch (type)
        {
            // 如果是TYPE_CIRCLE绘制圆形
            case TYPE_CIRCLE:
 
                int min = Math.min(mWidth, mHeight);
                /**
                 * 长度如果不一致,按小的值进行压缩
                 */
                mSrc = Bitmap.createScaledBitmap(mSrc, min, min, false);
 
                canvas.drawBitmap(createCircleImage(mSrc, min), 0, 0, null);
                break;
            case TYPE_ROUND:
                canvas.drawBitmap(createRoundConerImage(mSrc), 0, 0, null);
                break;
 
        }
 
 }

具体的代码如下:

/**
  * 根据原图添加圆角
  *
  * @param source
  * @return
  */
 private Bitmap createRoundConerImage(Bitmap source)
 {
        final Paint paint = new Paint();
        paint.setAntiAlias(true);
        Bitmap target = Bitmap.createBitmap(mWidth, mHeight, Config.ARGB_8888);
        Canvas canvas = new Canvas(target);
        RectF rect = new RectF(0, 0, source.getWidth(), source.getHeight());
        canvas.drawRoundRect(rect, 50f, 50f, paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(source, 0, 0, paint);
        return target;
 }

原理很简单,就是使用了PorterDuff.Mode.SRC_IN,先画一个圆角长方形,然后在绘制图片,设置画笔的setXfermode为PorterDuff.Mode.SRC_IN,就会只显示在圆角长方形的图片。具体的原理说明,大家可以去网上查找资料。

五:使用也很简单

<com.example.administrator.circleimagedemo.CustomImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        zhy:borderRadius="10dp"
        zhy:src="@drawable/icon"
        zhy:type="round" />

源码下载:https://download.csdn.net/download/bzlj2912009596/10588626

android 圆角图片就讲完了。

就这么简单。