Android实现倾斜角标样式
程序员文章站
2022-06-29 18:28:59
前言
最近产品有一个需求是:要在一个距形卡片上做一个倾斜的tag,类似:
(ps:不要注意那两毛三分的穷鬼),刚开始想着用ui切图就可以了嘛,but是不可以的,在不同手机上分辨...
前言
最近产品有一个需求是:要在一个距形卡片上做一个倾斜的tag,类似:
(ps:不要注意那两毛三分的穷鬼),刚开始想着用ui切图就可以了嘛,but是不可以的,在不同手机上分辨率是不同的,直接用图片适配肯定会有问题,所以打算自定义。
实现思路
额画图太丑了,这里解释一下:这里以左上角为例,我们可以把手机屏幕看成是一个直角坐标轴,我们要画一个斜角标示,只需要在我们的距形框内画一个正方形通过正方形的对角线(这里必须是正方形,这样可以控制x,y等距离),这样操控斜角标示长度只需要控制对角线长度通过path方法来绘制路径,右边同理,我们也不需要过多计算,只需要通过moveto方法移动坐标原点。
而绘制字体呢以对角线中心为坐标原点像左右绘制通过canvas.rotate()
设置字体倾斜于对角线平行。效果如下:
核心代码
绘制背景色
case tag_left: path.lineto(0, mheight); path.lineto(mwidth, 0); break; case tag_right: path.lineto(mwidth, 0); path.lineto(mwidth, mheight); break; case tag_left_bottom: path.lineto(mwidth, mheight); path.lineto(0, mheight); break; case tag_right_bottom: path.moveto(0, mheight);//移动坐标原点位置 path.lineto(mwidth, mheight); path.lineto(mwidth, 0); break; case tag_left_bar: path.moveto(mwidth, 0); path.lineto(0, mheight); path.lineto(0, mheight - myslantedheight); path.lineto(mwidth - myslantedheight, 0); break; case tag_right_bar: path.lineto(mwidth, mheight); path.lineto(mwidth, mheight - myslantedheight); path.lineto(myslantedheight, 0); break; case tag_left_bottom_bar: path.lineto(mwidth, mheight); path.lineto(mwidth - myslantedheight, mheight); path.lineto(0, myslantedheight); break; case tag_right_bottom_bar: path.moveto(0, mheight); path.lineto(myslantedheight, mheight); path.lineto(mwidth, myslantedheight); path.lineto(mwidth, 0); break;
通过计算绘制字体和角度
rect = new rect(0, 0, w, h); rectf = new rectf(rect); rectf.right = mtextpaint.measuretext(mytext, 0, mytext.length()); rectf.bottom = mtextpaint.descent() - mtextpaint.ascent();//ascent: 字符顶部到baseline的距离 descent: 字符底部到baseline的距离 rectf.left += (rect.width() - rectf.right) / 2.0f; rectf.top += (rect.height() - rectf.bottom) / 2.0f; xy[0] = rectf.left; xy[1] = rectf.top - mtextpaint.ascent(); xy[2] = w / 2; xy[3] = h / 2; xy[4] = -rotate_angle; //设置字体 canvas.rotate(angle, centerx, centery); canvas.drawtext(mytext, tox, toy + padding_top, mtextpaint);
使用方法
testview.settext("打折中") .setmode(tag_left_bar) .setbackground(color.parsecolor("#ff6677")) .settextcolor(color.parsecolor("#000000")) .setslantedheight(50) .settextsize(29); 或直接在布局中 <com.example.mylibrary.myslantedtextview android:layout_width="80dp" android:layout_height="80dp" android:layout_alignparenttop="true" android:layout_alignparentright="true" app:mybackgroundcolor="#667fff" app:myslantedheight="30dp" app:mytext="热卖中" app:mytextcolor="#ffffff" app:mytextsize="16sp" app:tagmodel="right_bar" />
常用api
api名称 | 介绍 |
---|---|
mybackgroundcolor | 斜角背景颜色 |
myslantedheight | 斜角高度 |
mytext | 字体展示 |
tagmodel | 样式模式共八种 |
mytextsize | 字体大小 |
mytextcolor | 字体颜色 |
源码见github
总结
以上所述是小编给大家介绍的android实现倾斜角标样式,希望对大家有所帮助