欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android实现倾斜角标样式

程序员文章站 2022-06-29 18:28:59
前言 最近产品有一个需求是:要在一个距形卡片上做一个倾斜的tag,类似: (ps:不要注意那两毛三分的穷鬼),刚开始想着用ui切图就可以了嘛,but是不可以的,在不同手机上分辨...

前言

最近产品有一个需求是:要在一个距形卡片上做一个倾斜的tag,类似:

Android实现倾斜角标样式

(ps:不要注意那两毛三分的穷鬼),刚开始想着用ui切图就可以了嘛,but是不可以的,在不同手机上分辨率是不同的,直接用图片适配肯定会有问题,所以打算自定义。

实现思路

Android实现倾斜角标样式

额画图太丑了,这里解释一下:这里以左上角为例,我们可以把手机屏幕看成是一个直角坐标轴,我们要画一个斜角标示,只需要在我们的距形框内画一个正方形通过正方形的对角线(这里必须是正方形,这样可以控制x,y等距离),这样操控斜角标示长度只需要控制对角线长度通过path方法来绘制路径,右边同理,我们也不需要过多计算,只需要通过moveto方法移动坐标原点。

而绘制字体呢以对角线中心为坐标原点像左右绘制通过canvas.rotate()设置字体倾斜于对角线平行。效果如下:

Android实现倾斜角标样式

核心代码

绘制背景色

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

github源码地址

总结

以上所述是小编给大家介绍的android实现倾斜角标样式,希望对大家有所帮助