#星光计划1.0#HarmonyOS 自定义View之图文标题 原创 精华
中软HOS小鸿
发布于 2021-10-22 10:17
浏览
7收藏
作者:彭为杰
简介
日常项目中,我们可能会碰到一些标题加特效或多行内容+查看更多的需求,如果使用Text+Image这样去拼接的话,在复杂多“标签”场景就实现起来比较呆板,于是根据现有的HarmonyOS Text提供了一种思路实现了图文标题,我们需要在Text中进行图文混排。
效果演示
TextImageTitle介绍
TextImageTitle是用来显示字符串+图片(或任意Component)的自定义控件,目前只支持头部或者尾部。
TextImageTitle常用属性
属性名称 | 中文描述 | 取值 | 取值说明 |
---|---|---|---|
textSize | 文字大小 | int | 同Text |
textColor | 文字颜色 | Color | 同Text |
lineHeight | 行高 | int | >0 |
maxTextLines | 最大显示行数int | int | -1,认为显示最大行 |
imageLayout | 图片位置 | int | 0:前面; 1:尾部; |
imageResId | 图片资源 | int | R 下资源 |
imageWidth | 图片宽度 | int | >=0 |
imageHeight | 图片高度 | int | >=0 |
imageMarginLeft | 图片left距离 | int | >=0 |
imageMarginRight | 图片right距离 | int | >=0 |
TextImageTitle用法
在layout目录下的xml文件中创建TextImageTitle组件。
1、设置图片在头部
示例代码:
示例效果:
2、设置Component在尾部
示例代码:
示例效果:
3、设置多行文字尾部图片
示例代码:
示例效果:
4、图片单击事件
实现思路
- 根据遍历字符计算是否换行(细节请查看源代码)
- 绘制文字
- 绘制图文
代码地址
https://gitee.com/guangdong-wangduoyu/ohos-text-image
更多原创内容请关注:开鸿 HarmonyOS 学院
入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,欢迎投稿和订阅,让我们一起携手前行共建鸿蒙生态。
©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
赞
13
收藏 7
回复
13
2
7
相关推荐
实用的知识,又增加了一点
学习一下