温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Android实现倾斜角标样式的方法

发布时间:2021-04-16 09:50:52 来源:亿速云 阅读:193 作者:小新 栏目:移动开发

这篇文章给大家分享的是有关Android实现倾斜角标样式的方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

前言

最近产品有一个需求是:要在一个距形卡片上做一个倾斜的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字体颜色

感谢各位的阅读!关于“Android实现倾斜角标样式的方法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI