Android 实现圆弧背景(Shape实现和自定义View)

一、背景

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

二、Shape属性

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

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

代码:一个TextView的背景



    
    
    

展示:

Android 实现圆弧背景(Shape实现和自定义View)_第1张图片

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

关于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的层级来实现,不过写代码,也可以实现更多的需求

你可能感兴趣的:(Andrio动画,自定义属性,android,图片,android,studio)