Android如何实现左上角倾斜的标签效果
这篇文章给大家分享的是有关Android如何实现左上角倾斜的标签效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
创新互联专注于零陵网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供零陵营销型网站建设,零陵网站制作、零陵网页设计、零陵网站官网定制、微信小程序服务,打造零陵网络公司原创品牌,更为您提供零陵网站排名全网营销落地服务。
先上效果图吧
由于项目需要实现这种左上角倾斜环绕的标签效果,所以自己尝试着做一做,并记录下来。
实现的思路大致如下图:
主页面的布局结构如下:
绘制倾斜标签的代码如下:
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如何实现左上角倾斜的标签效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
网站名称:Android如何实现左上角倾斜的标签效果
转载来于:http://pwwzsj.com/article/gsidip.html