如今Android系统的App,很多时候为了有更好的用户体验,都会有各种好看的UI,动画,点击效果等等,其中圆弧的控件在App中很常见,今儿就自己总结下自己实现圆弧的两种基础的方法。即Shape方法和使用View里面的方法自己画。
shape:即形状的意思,这是一种在 xml文件中定义的通用形状。
文件位置:res / drawable / 文件名.xml
代码:一个TextView的背景
展示:
这样实现起来非常简单!但是需求有时候又很离谱,我们开发又必须做,这时候就得老老实实代码去实现。
关于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
需求: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的层级来实现,不过写代码,也可以实现更多的需求