iOS:如何实现在文字上添加拼音
一、介绍
最近项目有一个需求,需要给朗诵的文字添加对应的拼音,而且要求使用原生的控件实现。一开始听到这个需求挺懵逼的,感觉有点难。后来,静下来想一下,其实还是可以实现的,无非就是自定义了。下面,就来说说思想。
二、思想
server端首先返回汉字和拼音一一对应的字符串,我们根据需要分别截取存入数组。一个汉字要添加拼音,拼音使用一个view显示,汉字也使用一个view显示,那么包含这两个控件的则是一个父view。许多个父view根据横向瀑布流的布局排列,就可以实现需要的汉字添加拼音的效果。结构图如下:
具体步骤如下:
1、创建一个textView,继承自UIScrollView,因为内容可能很多,需要滚动才能显示完;
2、在textView中接收模型时,动态创建很多的contanerView, 拼音View,汉字View,并使用masonry约束;
3、采用横向瀑布流算法对很多的contanerView进行布局;
4、在viewController中创建并添加textView,最后设置它的contentSize即可。
三、特点
优点:采用原生的控件实现,效果很流畅,用户体验好。
缺点:因为是一次性创建并添加很多的控件,如果文字特别多时,view渲染的过程比较耗时,建议放到自动释放池中进行创建。
四、代码
核心算法:
#pragma mark - layout subviews -(void)setupSubviewsConstraints {//(子视图采用横向瀑布流布局)CGFloat margin = 2.5;CGFloat viewHeight = (kFont.pointSize+5) * 2;CGFloat sumWidth = 0;CGFloat limitWidth = kScreenWidth-2*margin;CGFloat viewX = margin;CGFloat viewY = margin;CGFloat row = 0;for (int i=0 ; i<self.contentArray.count; i++) {//实际宽度CGFloat chineseWidth = [self layoutListNameLength:self.contentArray[i]];CGFloat pinYinWidth = [self layoutListNameLength:self.pinYinArray[i]];CGFloat maxWidth = MAX(chineseWidth, pinYinWidth);//添加容器UIView *containerView = [[UIView alloc] init];[self addSubview:containerView];//添加拼音UILabel *pinYinLabel = [[UILabel alloc] init];pinYinLabel.textColor = [UIColor grayColor];pinYinLabel.font = kFont;pinYinLabel.text = self.pinYinArray[i];pinYinLabel.textAlignment = NSTextAlignmentCenter;[containerView addSubview:pinYinLabel];//添加汉字UILabel *chineseLabel = [[UILabel alloc] init];chineseLabel.textColor = [UIColor blackColor];chineseLabel.font = kFont;chineseLabel.text = self.contentArray[i];chineseLabel.textAlignment = NSTextAlignmentCenter;[containerView addSubview:chineseLabel];//设置约束[containerView mas_makeConstraints:^(MASConstraintMaker *make) {make.height.equalTo(@(viewHeight));make.width.equalTo(@(maxWidth));make.left.equalTo(@(viewX));make.top.equalTo(@(viewY));}];[pinYinLabel mas_makeConstraints:^(MASConstraintMaker *make) {make.left.top.right.equalTo(containerView);make.height.equalTo(containerView.mas_height).multipliedBy(0.5);}];[chineseLabel mas_makeConstraints:^(MASConstraintMaker *make) {make.left.bottom.right.equalTo(containerView);make.height.equalTo(containerView.mas_height).multipliedBy(0.5);}];//计算坐标sumWidth += (maxWidth + margin);if (i < self.contentArray.count-1) {chineseWidth = [self layoutListNameLength:self.contentArray[i+1]];pinYinWidth = [self layoutListNameLength:self.pinYinArray[i+1]];maxWidth = MAX(chineseWidth, pinYinWidth);}if (limitWidth - sumWidth >= maxWidth) { ///不换行viewX = sumWidth + margin;}else{ ///换行row++;sumWidth = 0;viewX = margin;if (i==self.contentArray.count-1) {row--;}}viewY = (viewHeight + 6*margin)*row + margin;}self.realHeight = viewY + viewHeight + 1.5*margin; }
View Code
完整代码:(在github上,觉得有用就给个star吧,?)
https://github.com/xiayuanquan/ReadPinYinEssayDemo
五、效果
转载于:https://www.cnblogs.com/XYQ-208910/p/8759259.html
iOS:如何实现在文字上添加拼音相关推荐
- 学考计算机隐藏,2018年计算机一级考试WPS辅导知识:隐藏文字和添加拼音的用法...
2018年3月计算机等级考试即将开始,小编在这里为考生们整理了2018年计算机一级考试WPS辅导知识,希望能帮到大家,想了解更多资讯,请关注出国留学网的及时更新哦. 2018年计算机一级考试WPS辅导 ...
- iOS使用AVFoundation在视频上添加字幕以及控制字幕时间
IOS在视频上添加字幕效果的基本思路是: 使用自定义的CATextLayer文字图层或者CAShapeLayer文字图层,添加到视频的Layer上创建用户自定义的字幕效果.这两者的区别是:CAText ...
- iOS 在每一个cell上添加一个定时器的方案
1 首先创建一个数组,用来创建所有的定时器的时间 - (NSMutableArray *)totalLastTime {if (!_totalLastTime) {_totalLastTime = [ ...
- Word基础(七)文字添加拼音
在Word中个,怎么能够像小学语文课本一样,在文字上方添加拼音呢? 方法: 点击开始选项卡,字体分类中找到拼音指南并点击 在弹出的拼音指南对话框中,点击确定即可 注:在拼音指南对话框中,可以设置拼音的 ...
- iOS在图片上添加文字或图片
Objective-C在图片上添加文字,请使用如下方法: /**在图片上添加文字,只支持英文,如果想添加其他文字,请看下面的方法@param image 图片@param string 要添加的文字@ ...
- iOS在图片上添加文字 图片
图片上添加文字,在网上找的都是iOS10弃用的一个方法(怕以后麻烦就找了另一种方法替代)弃用链接 简洁版 - (UIImage*)text:(NSString*)text addToImage:(UI ...
- python怎么加图片_怎么在图片旁边加文字 python如何在图片上添加文字 - 励志 - 52资讯网...
Python在图片上添加文字的两种方法:OpenCV和PIL 一.OpenCV方法 1.安装cv2 pip install opencv-python 2.利用putText方法来实现在图片的指定位置 ...
- 在图片上添加文字并生成图片
在图片上添加文字并生成图片 开发工具与关键技术:Visual Studio 2015 作者:李德新 撰写时间:2019年6月04日 在我们的日常生活中,我们经常能看到各样格式的表单,而且有时候我们还要 ...
- html和css的图片怎么加,html+css如何在图片上添加文字
html+css如何在图片上添加文字 2018-09-14 效果如图 思路:div相对定位. 图片默认定位, 文字绝对定位 参考代码 html> /*div1下面 包含着1个图片和1段文字*/ ...
- 怎么在CAD三维图面上添加一长段说明文字?
CAD设计图纸也能进行三维设计,作为一个图纸中的立体图形设计,我们想要在某一个面上添加一段文字说明的话,又该怎么进行设置?现在开始为大家演示一下教程,怎么在CAD三维图面上添加一长段说明文字.不管是做 ...
最新文章
- TOP命令 %Cpu(s)解读 CPU状态信息us,sy,ni,id,wa,hi,si,st含义
- AI研究员收集NLP数据的四种创意方法(大牛分享)
- SQL Server 2008 R2 安全性专题(一):安全原则
- error while loading shared libraries: libmysql....
- Spring boot maven 搭建框架
- Python - 排序( 插入, 冒泡, 快速, 二分 )
- 叫板抖音,运营商入局短视频
- Bootstrap3的输入框数字点击修改效果
- 我用Python采集了班花的空间数据集,除了美照竟然再一次发现了她另外的秘密!
- 运维,请警惕脚本灾难!
- 自动驾驶_产品象限图_清洁机器人场景
- May the Sunshine be with you!
- SpringMVC 、Struts2之间的区别
- 课程设计之贪吃蛇小游戏制造
- 记录性能测试脚本开发的过程
- 洛谷 P1567 统计天数
- Chrome 神器面世!谷歌学术搜文章,代码链接自动展示
- Python — 词汇表(一)
- 无线路由器服务器名怎么设置,服务器改无线路由器怎么设置
- python 获取列表中多个元素-切片操作