一、背景
如今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 ———-圆角gradi
https://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的层级来实现,不过写代码,也可以实现更多的需求