自定义View学习一（圆形头像）

前言

系统为我们提供的控件是有限的，当我们想要在有限的屏幕上显示更丰富多彩的内容，我们往往需要自定义控件。作为一个android初学者，我对android的自定义View也不是很熟悉。这段时间刚好无事，就先从我们平常使用的圆形头像开始练起吧。

我们要知道一个View绘制需要三大流程onMeasure，onLayout，onDraw

使用BitmapShader实现

控件实现主代码

CircleImageView.kt

class CircleImageView : ImageView {    private var radius: Float? = null    private val defaultRadius = 40.toFloat()    private var mPaint: Paint? = null    private var mWidth: Int? = null    constructor(context: Context) : super(context) {        CircleImageView(context, null)    }    constructor(context: Context, attributeSet: AttributeSet?) : super(context, attributeSet) {        init(attributeSet)    }    constructor(context: Context, attributeSet: AttributeSet?, defStyleAttributeSet: Int) : super(context, attributeSet, defStyleAttributeSet) {        init(attributeSet)    }    init {        mPaint = Paint()        mPaint!!.isAntiAlias = true    }    fun init(attributeSet: AttributeSet?){        val typeArray = context.obtainStyledAttributes(attributeSet, R.styleable.CircleImageView);        radius = typeArray.getDimension(R.styleable.CircleImageView_radius, defaultRadius);        typeArray.recycle()    }    //支持padding    override fun onDraw(canvas: Canvas?) {        if (drawable == null) return        setUpShader()        val mWidth = width - paddingLeft - paddingRight        val mHeight = height - paddingBottom - paddingTop        val temp = Math.min(mWidth,mHeight)        if (radius!!*2 > temp){            radius = temp/2f        }        //这个控件的radius原本是不需要的，添加radius主要是为了演示自定义View的自定义属性。        /**         * onDraw方法里面我们支持了padding         * 由于我们绘制图像的时候需要将图像绘制到中心区域，所以绘制的时候我们也需要考虑padding         */        canvas?.drawCircle(paddingLeft+radius!!, paddingTop+radius!!, radius!!, mPaint)    }    //重写onMeasure，这个自定义view是继承自ImageView，可以不用重写onMeasure方法，但是如果是直接继承自View或者是ViewGroup就需要    //重写onMeasure，否则的话，自定义控件的wrap_content的效果和match_parent一样    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec)        mWidth = Math.min(measuredWidth, measuredHeight)        setMeasuredDimension(mWidth!!, mWidth!!)    }    /**     *  TileMode的取值有三种：     *  CLAMP 拉伸     *  REPEAT 重复     *  MIRROR 镜像     */    private fun setUpShader() {        if (drawable == null) return        val bitmap = BitmapUtils.drawableToBitmap(drawable)        val temp = Math.min(bitmap.width,bitmap.height)        val squareBitmap = BitmapUtils.cropBitmap(bitmap,temp,temp)        val shader = BitmapShader(squareBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)        var scale = 1.0f        scale = mWidth!! * scale / squareBitmap.width        val matrix = Matrix()        matrix.setScale(scale, scale) // 为了缩放使用        shader.setLocalMatrix(matrix)        mPaint!!.shader = shader    }}

使用到的BitmapUtils工具类

BitmapUtils.kt

object BitmapUtils {    //将drawable转换成bitmap    fun drawableToBitmap(drawable: Drawable): Bitmap {        val w = drawable.intrinsicWidth        val h = drawable.intrinsicHeight        val config = if (drawable.opacity != PixelFormat.OPAQUE)            Bitmap.Config.ARGB_8888        else            Bitmap.Config.RGB_565        val bitmap = Bitmap.createBitmap(w, h, config)        //注意，下面三行代码要用到，否则在View或者SurfaceView里的canvas.drawBitmap会看不到图        val canvas = Canvas(bitmap)        drawable.setBounds(0, 0, w, h)        drawable.draw(canvas)        return bitmap    }    /**     * 裁剪     * @param bitmap 原图     * *     * @return 裁剪后的图像     */    fun cropBitmap(bitmap: Bitmap, aimWidth:Int, aimHeight:Int): Bitmap {        var toWidth = aimWidth;        var toHeight = aimHeight        if (aimWidth > bitmap.width) toWidth = bitmap.width        if (aimHeight > bitmap.height) toHeight = bitmap.height        val cropWidthSide = (bitmap.width - aimWidth)/2        val cropHeightSide = (bitmap.height - aimHeight)/2        return Bitmap.createBitmap(bitmap,cropWidthSide,cropHeightSide,toWidth,toHeight)    }}

CircleImageView的属性定义，目前只定义了一个半径

    <declare-styleable name="CircleImageView">        <!--圆形头像的半径-->        <attr name="radius" format="dimension"/>    </declare-styleable>

具体使用

<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.example.xiaojun.blog.MainActivity">    <com.example.xiaojun.kotlin_try.ui.widget.blog.CircleImageView        android:layout_width="100dp"        android:layout_height="100dp"        app:radius="50dp"        android:src="@drawable/xue3"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintTop_toTopOf="parent" /></android.support.constraint.ConstraintLayout>

效果图

参考： Android BitmapShader 实战 实现圆形、圆角图片

使用Xfermode实现圆形头像

代码里面有很多注释，在这里就不解释了

CircleImageViewX.kt

/** * CircleImageViewX是用xFerMode来实现的圆形头像 * CircleImageViewX在头像图片的外层有一圈自定义的圆环，美化头像，默认存在圆环 *///直接继承自View而不再是ImageView，这个时候如果我们想实现wrap_content效果必须自己重写onMeasureclass CircleImageViewX :View{    private val defaultWidth = 200    private val defaultHeight = 200    private val defaultRingWidth = 10f    private val defaultRingColor = Color.WHITE    private val defaultHasRing = true    private var ringColor = defaultRingColor    private var ringWidth = defaultRingWidth    private var hasRing = defaultHasRing    private var drawable:Drawable? = null    private var mPaint: Paint? = null    constructor(context: Context) : super(context) {    }    constructor(context: Context, attributeSet: AttributeSet?) : super(context, attributeSet) {        init(attributeSet)    }    constructor(context: Context, attributeSet: AttributeSet?, defStyleAttributeSet: Int) : super(context, attributeSet, defStyleAttributeSet) {        init(attributeSet)    }    init {        mPaint = Paint()        mPaint!!.isAntiAlias = true    }    fun init(attributeSet: AttributeSet?){        val typeArray = context.obtainStyledAttributes(attributeSet, R.styleable.CircleImageViewX)        drawable = typeArray.getDrawable(R.styleable.CircleImageViewX_src)        hasRing = typeArray.getBoolean(R.styleable.CircleImageViewX_hasRing,defaultHasRing)        if (hasRing){            ringColor = typeArray.getColor(R.styleable.CircleImageViewX_ringColor,defaultRingColor)            ringWidth = typeArray.getDimension(R.styleable.CircleImageViewX_ringWidth,defaultRingWidth)        }        typeArray.recycle()    }    //当布局中的宽或者高属性设置的是wrap_content的时候，我们返回默认宽或者高    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {        val widthMode = MeasureSpec.getMode(widthMeasureSpec)        val widthSize = MeasureSpec.getSize(widthMeasureSpec)        val heightMode = MeasureSpec.getMode(heightMeasureSpec)        val heightSize = MeasureSpec.getSize(heightMeasureSpec)        if (widthMode == MeasureSpec.AT_MOST && heightMode == MeasureSpec.AT_MOST){            setMeasuredDimension(defaultWidth,defaultHeight)        }else if (widthMode == MeasureSpec.AT_MOST){            setMeasuredDimension(defaultWidth,heightSize)        }else if (heightMode == MeasureSpec.AT_MOST){            setMeasuredDimension(widthSize,defaultHeight)        }else{            setMeasuredDimension(widthSize,heightSize)        }        super.onMeasure(widthMeasureSpec, heightMeasureSpec)    }    override fun onDraw(canvas: Canvas?) {        if (drawable == null){            Log.e("drawable","null")            return        }        Log.e("drawable","draw")        val bitmap = BitmapUtils.drawableToBitmap(drawable!!)        val squareBitmap = BitmapUtils.cropSquareBitmap(bitmap)        //为了支持padding        val mWidth = width - paddingLeft - paddingRight        val mHeight = height - paddingBottom - paddingTop        var interval = 0        val radius = Math.min(mWidth,mHeight)/2f        if (hasRing){            //画圆环            interval = ringWidth.toInt()            mPaint?.color = ringColor            mPaint?.strokeWidth = ringWidth            mPaint?.style = Paint.Style.STROKE            //当线条有宽度的时候，paint是默认在线条宽度的中央绘制，这就要求我们在绘制外部大圆的时候有所调整            canvas?.drawCircle(paddingLeft+radius,paddingTop+radius,radius - ringWidth/2,mPaint)        }        val circleBitmapRadius = radius - interval        val circleBitmap = cropCircleBitmap(squareBitmap,circleBitmapRadius)        //画圆形图片        val srcRect = Rect(0,0,circleBitmap.width,circleBitmap.height)        val desRect = Rect(paddingLeft+interval,paddingTop+interval,circleBitmap.width+paddingLeft+interval,circleBitmap.height+paddingTop+interval)        canvas?.drawBitmap(circleBitmap,srcRect,desRect,mPaint)    }    //传进来的bitmap是已经裁剪好的bitmap    fun cropCircleBitmap(bitmap: Bitmap,radius:Float):Bitmap{        val ret = Bitmap.createBitmap(2*radius.toInt(),2*radius.toInt(), Bitmap.Config.ARGB_8888)        val paint = Paint(Paint.ANTI_ALIAS_FLAG)        //创建一个和目标图片大小相同的canvas        val canvas = Canvas(ret)        //绘制下层图，是一个圆        canvas.drawCircle(radius,radius,radius,paint)        // 设置混合模式，取绘制的图的交集部分，显示上层        paint.xfermode = PorterDuffXfermode(PorterDuff.Mode.SRC_IN)        // 第一个Rect 代表要绘制的bitmap 区域，第二个 Rect 代表的是要将bitmap 绘制在屏幕的什么地方        val srcRect = Rect(0,0,bitmap.height,bitmap.width)        val desRect = Rect(0,0,radius.toInt()*2,radius.toInt()*2)        //上面两个rect的含义相当于用matrix设置scale。含义是把源图片的srcRect区域内容绘制在desRect区域内        canvas.drawBitmap(bitmap,srcRect,desRect,paint)        return ret    }    //设置圆环颜色    fun setRingColor(color:Int){        this.ringColor = color        invalidate()    }    //设置圆环宽度    fun setRingWidth(width:Float){        this.ringWidth = width        invalidate()    }    //设置是否有圆环    fun setHasRing(has:Boolean){        hasRing = has        invalidate()    }}

自定义属性

    <declare-styleable name="CircleImageViewX">        <!--图片资源-->        <attr name="src" format="reference"/>        <!--是否添加外围圆环，如果没有的话，那么后面的两个参数都没有意义-->        <attr name="hasRing" format="boolean"/>        <!--圆环宽度-->        <attr name="ringWidth" format="dimension"/>        <!--圆环颜色-->        <attr name="ringColor" format="color"/>    </declare-styleable>

使用

    <com.example.xiaojun.blog.widget.CircleImageViewX        android:id="@+id/circleX"        android:layout_width="100dp"        android:layout_height="100dp"        app:ringColor="@color/colorAccent"        app:hasRing="true"        app:ringWidth="10px"        app:src="@drawable/xue1"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintBottom_toBottomOf="parent"        android:layout_marginBottom="88dp"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintHorizontal_bias="0.539" />

效果图

参考： 关于Xfermode的介绍和用处（遮罩图层，圆形图片）