Android实现左上角(其他边角)倾斜的标签(环绕效果)效果
程序员文章站
2022-06-29 18:30:17
先上效果图吧
由于项目需要实现这种左上角倾斜环绕的标签效果,所以自己尝试着做一做,并记录下来。
实现的思路大致如下图:
主页面的布局结构如下:
...
先上效果图吧
由于项目需要实现这种左上角倾斜环绕的标签效果,所以自己尝试着做一做,并记录下来。
实现的思路大致如下图:
主页面的布局结构如下:
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.constraintlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:background="#fff" android:layout_height="match_parent" tools:context=".mainactivity"> <relativelayout android:layout_width="300dp" android:layout_height="200dp" android:background="#fff" app:layout_constraintbottom_tobottomof="parent" app:layout_constraintleft_toleftof="parent" app:layout_constraintright_torightof="parent" app:layout_constrainttop_totopof="parent" > <relativelayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="5dp" android:background="#33b7f3" android:elevation="2dp"></relativelayout> <com.zc.labeldemo.labelview android:id="@+id/labelview" android:layout_alignparenttop="true" android:layout_width="75dp" android:elevation="3dp" android:layout_height="75dp"/> </relativelayout> </androidx.constraintlayout.widget.constraintlayout>
绘制倾斜标签的代码如下:
package com.zc.labeldemo; import android.content.context; import android.graphics.canvas; import android.graphics.color; import android.graphics.paint; import android.graphics.path; import android.util.attributeset; import android.view.view; import androidx.annotation.nullable; /** * @author wenchao * @version 1.0.1 * @classname labelview * @date 2019/9/20 * @description */ public class labelview extends view { /** * 画笔 */ private paint paint; /** * path */ private path path; /** * view宽度 */ private float width; /** * view高度 */ private float height; /** * 标签背景宽度 */ private float labelwidth; /** * 标签折叠区域宽度 */ private float pointwidth; /** * 标签折叠区域高度 */ private float pointheight; /** * 标签背景颜色 */ private int labelcolor; /** * 标签折叠区域背景颜色 */ private int pointcolor; /** * 中心点x坐标 */ private float centerx; /** * 中心点y坐标 */ private float centery; /** * 标签文字内容 */ private string text; /** * 标签文字颜色 */ private int textcolor; public labelview(context context) { super(context); } public labelview(context context, @nullable attributeset attrs) { super(context, attrs); init(); } private void init() { labelwidth = 120; pointwidth = 10; pointheight = 17; paint = new paint(); path = new path(); paint.setantialias(true); paint.setstrokewidth(10); setbackgroundcolor(color.transparent); labelcolor = color.parsecolor("#ea6724"); pointcolor = color.parsecolor("#c43200"); text = "测试内容"; textcolor = color.white; } @override protected void onsizechanged(int w, int h, int oldw, int oldh) { super.onsizechanged(w, h, oldw, oldh); width = w; height = h; centerx = w/2; centery = h/2; } @override public void draw(canvas canvas) { super.draw(canvas); //画标签区域背景上边的折叠区域(小三角区域) path.reset(); path.moveto(width-pointwidth,0); path.lineto(width,pointheight); path.lineto(width-pointwidth-26,pointheight); path.close(); paint.setcolor(pointcolor); canvas.drawpath(path,paint); //画标签背景区域下边的折叠区域 path.reset(); path.moveto(0,height-pointwidth); path.lineto(pointheight,height); path.lineto(pointheight,height-pointwidth-26); path.close(); paint.setcolor(pointcolor); canvas.drawpath(path,paint); //画标签背景区域 path.reset(); paint.setcolor(labelcolor); paint.setstyle(paint.style.fill); path.moveto(width-labelwidth-pointwidth,0); path.lineto(width-pointwidth,0); path.lineto(0,height-pointwidth); path.lineto(0,height-labelwidth-pointwidth); canvas.drawpath(path,paint); //画文字 逆时针选择45度 canvas.rotate(-45,centerx,centery); //文字中心点横坐标 float textx = width / 2; //文字中心点纵坐标 float texty = (height-pointwidth-(labelwidth / 2f)) / 2f; paint.setcolor(textcolor); paint.setstyle(paint.style.fill); paint.settextsize(38); //设置文字居中绘制 paint.settextalign(paint.align.center); canvas.drawtext(text,textx,texty,paint); } }
这个标签实现应该是比较简单的,而且多嵌套一层布局会消耗一定的资源,这里先简单记录一下实现的思路,后期有时间再做更改优化。下面再贴一张其他边角的效果图吧:
总结
以上所述是小编给大家介绍的android实现左上角(其他边角)倾斜的标签(环绕效果)效果,希望对大家有所帮助
下一篇: 自娱自乐,被女友给涮了