Android实现倾斜角标样式
时间:2022-07-27
本文章向大家介绍Android实现倾斜角标样式,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前言
最近产品有一个需求是:要在一个距形卡片上做一个倾斜的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 |
字体颜色 |
总结
以上所述是小编给大家介绍的Android实现倾斜角标样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对ZaLou.Cn网站的支持! 如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
- 基于OpenCV的跳一跳外挂实现原理
- React Native 0.50版本新功能简介
- Android滤镜效果实现及原理分析
- Spring Boot入门及整合mybatis
- Swift开发React Native组件
- 深入理解Android插件化技术
- Kotlin DSL详解
- 大规模异常滥用检测:基于局部敏感哈希算法——来自Uber Engineering的实践
- 事务与一致性:刚性or柔性?
- 文本相似度算法小结
- return的值都去哪了?去哪了,“谁伸手了,return的结果就给谁”
- 面试时对方问你,“xxx需求你是怎么做的”?你可以这样回答
- vue.js的条件渲染,其实就是模板里面写if else
- vue.js的插槽 - slot 是啥?要我说,它就是个“形参”
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释
- Flutter - 解决混合开发iOS脚本打包遇到的问题
- Shader 特效 —— Film Burn (炫光光晕)效果【GLSL】
- java selenium chromedriver浏览器驱动放在哪里?【两种位置】
- 56. Vue原生js的组件拆分结构设计
- 一步一步教你把 Redux Saga 添加到 React&Redux 程序中
- Octave的基本语句及函数的使用入门—ML Note 31
- JAVA的Lock锁接口实现
- 抽象语法树为什么抽象
- burpsuite IP伪造插件
- 用阻塞队列,再系一次鞋带
- I2C总线架构 之 设备驱动
- kail 安装及卸载 docker【亲测可用】
- mac 登录远程服务器(常规ssh+免密快捷方式)
- git常用操作--分支同步master 本地库提交到远程分支
- mac苹果 配置maven settings文件【注意,与win环境不一样!!!】