一、介绍

最近项目有一个需求,需要给朗诵的文字添加对应的拼音,而且要求使用原生的控件实现。一开始听到这个需求挺懵逼的,感觉有点难。后来,静下来想一下,其实还是可以实现的,无非就是自定义了。下面,就来说说思想。

二、思想

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:如何实现在文字上添加拼音相关推荐

  1. 学考计算机隐藏,2018年计算机一级考试WPS辅导知识:隐藏文字和添加拼音的用法...

    2018年3月计算机等级考试即将开始,小编在这里为考生们整理了2018年计算机一级考试WPS辅导知识,希望能帮到大家,想了解更多资讯,请关注出国留学网的及时更新哦. 2018年计算机一级考试WPS辅导 ...

  2. iOS使用AVFoundation在视频上添加字幕以及控制字幕时间

    IOS在视频上添加字幕效果的基本思路是: 使用自定义的CATextLayer文字图层或者CAShapeLayer文字图层,添加到视频的Layer上创建用户自定义的字幕效果.这两者的区别是:CAText ...

  3. iOS 在每一个cell上添加一个定时器的方案

    1 首先创建一个数组,用来创建所有的定时器的时间 - (NSMutableArray *)totalLastTime {if (!_totalLastTime) {_totalLastTime = [ ...

  4. Word基础(七)文字添加拼音

    在Word中个,怎么能够像小学语文课本一样,在文字上方添加拼音呢? 方法: 点击开始选项卡,字体分类中找到拼音指南并点击 在弹出的拼音指南对话框中,点击确定即可 注:在拼音指南对话框中,可以设置拼音的 ...

  5. iOS在图片上添加文字或图片

    Objective-C在图片上添加文字,请使用如下方法: /**在图片上添加文字,只支持英文,如果想添加其他文字,请看下面的方法@param image 图片@param string 要添加的文字@ ...

  6. iOS在图片上添加文字 图片

    图片上添加文字,在网上找的都是iOS10弃用的一个方法(怕以后麻烦就找了另一种方法替代)弃用链接 简洁版 - (UIImage*)text:(NSString*)text addToImage:(UI ...

  7. python怎么加图片_怎么在图片旁边加文字 python如何在图片上添加文字 - 励志 - 52资讯网...

    Python在图片上添加文字的两种方法:OpenCV和PIL 一.OpenCV方法 1.安装cv2 pip install opencv-python 2.利用putText方法来实现在图片的指定位置 ...

  8. 在图片上添加文字并生成图片

    在图片上添加文字并生成图片 开发工具与关键技术:Visual Studio 2015 作者:李德新 撰写时间:2019年6月04日 在我们的日常生活中,我们经常能看到各样格式的表单,而且有时候我们还要 ...

  9. html和css的图片怎么加,html+css如何在图片上添加文字

    html+css如何在图片上添加文字 2018-09-14 效果如图 思路:div相对定位. 图片默认定位, 文字绝对定位 参考代码 html> /*div1下面 包含着1个图片和1段文字*/ ...

  10. 怎么在CAD三维图面上添加一长段说明文字?

    CAD设计图纸也能进行三维设计,作为一个图纸中的立体图形设计,我们想要在某一个面上添加一段文字说明的话,又该怎么进行设置?现在开始为大家演示一下教程,怎么在CAD三维图面上添加一长段说明文字.不管是做 ...

最新文章

  1. TOP命令 %Cpu(s)解读 CPU状态信息us,sy,ni,id,wa,hi,si,st含义
  2. AI研究员收集NLP数据的四种创意方法(大牛分享)
  3. SQL Server 2008 R2 安全性专题(一):安全原则
  4. error while loading shared libraries: libmysql....
  5. Spring boot maven 搭建框架
  6. Python - 排序( 插入, 冒泡, 快速, 二分 )
  7. 叫板抖音,运营商入局短视频
  8. Bootstrap3的输入框数字点击修改效果
  9. 我用Python采集了班花的空间数据集,除了美照竟然再一次发现了她另外的秘密!
  10. 运维,请警惕脚本灾难!
  11. 自动驾驶_产品象限图_清洁机器人场景
  12. May the Sunshine be with you!
  13. SpringMVC 、Struts2之间的区别
  14. 课程设计之贪吃蛇小游戏制造
  15. 记录性能测试脚本开发的过程
  16. 洛谷 P1567 统计天数
  17. Chrome 神器面世!谷歌学术搜文章,代码链接自动展示
  18. Python — 词汇表(一)
  19. 无线路由器服务器名怎么设置,服务器改无线路由器怎么设置
  20. python 获取列表中多个元素-切片操作

热门文章

  1. 【vscode】vscode插件学习(五)
  2. php操作memcache
  3. 石头购房经验谈(下)
  4. WEB视频自适应(下)
  5. 2019美联社写作指南为区块链相关术语提供指导
  6. 公众号搜题接口API
  7. Android Paint 详细讲解
  8. JS match() 方法 使用
  9. 一文介绍解银行卡验证api接口详情
  10. 朋友圈点赞图在线生成源码