自定义ImageView实现

目的效果如下：

这里就只针对上方的ImageView，中间的是复合布局就行，下方是banner图，至于状态栏的统一色处理之前也有说到。分析下上方带勾勾的view，这里只扩展ImageView就可以实现了的。
考虑如下：

1. 上边圆角，下方正常
2. 模特ID文字绘制
3. 带勾勾的折现绘制

分析下需要重绘模特图片，然后绘制文字就不说了，下边的勾勾曲线我实现是这样的画了左右两个矩形，中间画了两个三角填充白色。其实可以整体画path路径然后close填充一下也是非常便捷的。很简单，实现了也没多改：

class ImageViewRadian : android.support.v7.widget.AppCompatImageView{
    private val radians = floatArrayOf(15.0f, 15.0f, 15.0f, 15.0f, 0.0f, 0.0f, 0.0f, 0.0f)

    constructor(context: Context) : super(context)

    constructor(context: Context, attrs: AttributeSet) : super(context, attrs)

    constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int) : super(context, attrs, defStyleAttr)

    override fun onDraw(canvas: Canvas) {
        val path = Path()
        val width = this.width
        val height = this.height

        //画圆角效果
        path.addRoundRect(RectF(0f,0f,width.toFloat(),height.toFloat()),radians,Path.Direction.CW)
        canvas.clipPath(path)

        //父布局调用之前之后处理，之后处理的图像在之前的视图之上
        super.onDraw(canvas)

        val startX = this.x
        val startY = this.y
        val paint = Paint()
        paint.color = Color.WHITE
        paint.style = Paint.Style.FILL


        val paint2 = Paint()
        paint2.strokeWidth = 8f
        paint2.color = Color.RED
        paint2.style = Paint.Style.STROKE
        paint2.isAntiAlias = true
        paint2.strokeJoin = Paint.Join.ROUND

        val paint3 = Paint()
        paint3.color = resources.getColor(R.color.gray_light)
        paint3.strokeWidth = 5f

        //底部中心坐标点
        val centerX = startX + width/2
        val centerY = startY + height

        //倒三角path路径
        val triangleLeft = Path()
        val triangleRight = Path()

        triangleLeft.moveTo(centerX-30,centerY-40)
        triangleLeft.lineTo(centerX-30,centerY)
        triangleLeft.lineTo(centerX,centerY)
        triangleLeft.close()

        triangleRight.moveTo(centerX+30,centerY-40)
        triangleRight.lineTo(centerX+30,centerY)
        triangleRight.lineTo(centerX,centerY)
        triangleRight.close()


        canvas.drawPath(triangleLeft,paint)
        canvas.drawPath(triangleRight,paint)

        //画左右矩形
        canvas.drawRect(startX,startY+height-40,centerX-30,centerY,paint)
        canvas.drawRect(centerX+30,centerY-40,width+startX,centerY,paint)

        //画倒三角的线
        val pathLine = Path()
        pathLine.moveTo(startX,startY+height-40)
        pathLine.lineTo(centerX-30,centerY-40)
        pathLine.lineTo(centerX,centerY-5)
        pathLine.lineTo(centerX+30,centerY-40)
        pathLine.lineTo(width+startX,centerY-40)
        canvas.drawPath(pathLine,paint2)

        //画边界
        canvas.drawLine(startX,startY+height-35,startX,startY+height,paint3)
        canvas.drawLine(startX+width,startY+height-35,startX+width,startY+height,paint3)
    }
}

使用效果：

<com.meiyue.meimei.CustomMethods.GlideConverter.ImageViewRadius.ImageViewRadian
        android:id="@+id/img_index_item_head_model"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="6"
        android:src="@mipmap/ic_launcher" />

效果图：

调用父类onDraw后我们才实现自己加的布局，否则有可能看不到自己画的东西哦