Android 实现圆弧背景（Shape实现和自定义View）

一、背景

如今Android系统的App，很多时候为了有更好的用户体验，都会有各种好看的UI，动画，点击效果等等，其中圆弧的控件在App中很常见，今儿就自己总结下自己实现圆弧的两种基础的方法。即Shape方法和使用View里面的方法自己画。

二、Shape属性

shape:即形状的意思，这是一种在 xml文件中定义的通用形状。

文件位置：res / drawable / 文件名.xml

代码：一个TextView的背景

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <padding
        android:bottom="8dp"
        android:left="24dp"
        android:right="24dp"
        android:top="8dp"/>
    <solid android:color="#ef7300" />
    <corners android:radius="12dp" />
</shape>

展示：

这样实现起来非常简单！但是需求有时候又很离谱，我们开发又必须做，这时候就得老老实实代码去实现。

关于Shape的属性介绍：可以看Android shape的用法详解_&岁月不待人&的博客-CSDN博客_android shape一、什么是Shape属性在项目中经常会给控件定义背景，有时候有些界面可以叫UI做好，但如何显示的更加的贴近用户，则需要我们客户端去优化。如果在设置背景Android:background=“图片、颜色”，设置单一的属性并不能带来更好的体验。我们此时就可以使用shape属性作为控件的背景。shape怎么弄？1. 在res/drawable下新建一个xml文件；2. 在代码中引用这个xml文件，引用方式和图片一样。shape有哪些功能？corners ———-圆角gradihttps://blog.csdn.net/LoveFHM/article/details/109508798

三、使用ViewGroup的onDraw或者dispatchDraw实现自定义View

需求：IM的聊天气泡绘制，1、指定的位置的弧度角，2、当为群主时，会给聊天气泡加上金边。

实现原理：众所周知，View是Android所有控件的基类，常用的TextView和ImageView是继承自VIew。ViewGroup是View的组合，它可以包含很多View以及ViewGroup，所以可以直接重写onDraw或者dispatchDraw来自定义View。主要就是使用canvas，paint，path这些东西来实现。

核心代码：

    private fun drawBackGround(context: Context, canvas: Canvas, data: ImMsgIn, width: Int, height: Int, chatType: Int) {
        val mBgColorOrigin = ContextCompat.getColor(context, R.color.im_msg_bg_origin)
        isSelfMessage = data.getSelfUserId() == data.getSenderId()//是自己的消息
        isOwner = data.getSenderId() == data.getOwnerId()//是否是群主
        val path = Path()
        paint.strokeWidth = 1f
        paint.style = Paint.Style.FILL
        paint.color = setColor(context, data, chatType)
        if (isSelfMessage) { //发送者为自己，统一为圆弧背景，无金边
            val rectF = RectF(0f, 0f, width.toFloat(), height.toFloat())
            val radii = floatArrayOf(dpToPx(context, 8f), dpToPx(context, 8f), dpToPx(context, 8f), dpToPx(context, 8f), dpToPx(context, 0f), dpToPx(context, 0f), dpToPx(context, 8f), dpToPx(context, 8f))//右下为直角，其他角弧度为8
            path.addRoundRect(rectF, radii, Path.Direction.CW)
            canvas.drawPath(path, paint)
        } else {
            paint.style = Paint.Style.FILL
            val rectF = RectF(0f, 0f, width.toFloat(), height.toFloat())
            val radii = floatArrayOf(dpToPx(context, 0f), dpToPx(context, 0f), dpToPx(context, 8f), dpToPx(context, 8f), dpToPx(context, 8f), dpToPx(context, 8f), dpToPx(context, 8f), dpToPx(context, 8f))
            path.addRoundRect(rectF, radii, Path.Direction.CW)
            canvas.drawPath(path, paint)
            isOwnerReplyQuestionIsPublic = true
            if (data.getReplyMsgQuestionIsPublished() != null) isOwnerReplyQuestionIsPublic = data.getReplyMsgQuestionIsPublished() == true
            if (isOwner && (isOwnerReplyQuestionIsPublic || chatType == UiMsgType.PRIVATE_CHAT)) {
                paint.strokeWidth = 1f
                paint.color = mBgColorOrigin
                paint.style = Paint.Style.STROKE //画金色边框
                canvas.drawPath(drawRect(context, width, height), paint)
            } else if (data.getUiTypeWithMessageType() == UiMsgType.MSG_TYPE_QUESTION && data.getQuestionStatus() == 0 && data.getPublished()) {
                paint.strokeWidth = 1f
                paint.color = mBgColorOrigin
                paint.style = Paint.Style.STROKE
                canvas.drawPath(drawRect(context, width, height), paint)
            }
        }
    }

  //金色边框
    private fun drawRect(context: Context, width: Int, height: Int): Path {
        val path = Path()
        val rectF = RectF(0.5f, 0.5f, width.toFloat() - 0.5f, height.toFloat() - 0.5f)
        val radii = floatArrayOf(dpToPx(context, 0f), dpToPx(context, 0f), dpToPx(context, 8f), dpToPx(context, 8f), dpToPx(context, 8f), dpToPx(context, 8f), dpToPx(context, 8f), dpToPx(context, 8f))
        path.addRoundRect(rectF, radii, Path.Direction.CW)
        return path
    }
    
    private fun dpToPx(context: Context, dipValue: Float): Float {
        val scale = context.applicationContext.resources.displayMetrics.density
        return dipValue * scale + 0.5f
    }

其实，这个金边吧，其实也可以通过xml文件里叠加View的层级来实现，不过写代码，也可以实现更多的需求