14、iOS里面的富文本

iOS里面的富文本

  • 1、NSAttributedString属性概览表
  • 2、属性详解及应用
    • 2.1 NSAttributedString.Key.font --字体大小
    • 2.2 NSAttributedString.Key.paragraphStyle -- 文本字、行间距,对齐等
    • 2.3 NSAttributedString.Key.foregroundColor -- 字体颜色
    • 2.4 NSAttributedString.Key.backgroundColor -- 背景色
    • 2.5 NSAttributedString.Key.ligature -- 连字符
    • 2.6 NSAttributedString.Key.kern -- 字符间距
    • 2.7 设置删除线相关
    • 2.8 设置下划线相关
    • 2.9 描边颜色、描边宽度
    • 2.10 文本阴影
    • 2.11 文字效果
    • 2.12 链接
    • 2.13 基础偏移量
    • 2.14 字体倾斜
    • 2.15 文本扁平化(横向拉伸)
  • 3、富文本加载html
  • 4、图文混排
    • 4.1 光标位置插入图片
    • 4.2 光标位置插入文字
  • 5、巧用UITextView实现富文本的点击效果
  • 参考文章

ios项目中经常需要显示一些带有特殊样式的文本,比如说带有下划线、删除线、斜体、空心字体、背景色、阴影以及图文混排(一种文字中夹杂图片的显示效果)。通常想要实现这些效果要使用到iOS的Fundation框架提供的NSAttributeString类。

1、NSAttributedString属性概览表

KeyValue说明
.fontUIFont对象字体大小:默认Helvetica(Neue) 12
.paragraphStyleNSParagraphStyle对象文本字、行间距,对齐等:默认NSParagraphStyle.default
foregroundColorUIColor对象字体颜色:默认.black
.backgroundColorUIColor对象背景色:默认nil(无背景色)
.ligature包含整数的NSNumber对象连字符:ios中有0和1两个值;0表示没有连字符,而1是默认的连字符
.kern包含浮点数的NSNumber对象字符间距:默认0(禁用)
.strikethroughStyle包含整数的NSNumber对象删除线:默认0(无删除线)
.underlineStyle包含整数的NSNumber对象下划线:默认0(无下划线)
.strikethroughColorUIColor对象删除线颜色:默认 nil(和文字的 foregroundColor一致)
.underlineColorUIColor对象下划线颜色:默认nil(和文字的 foregroundColor一致)
.strokeColorUIColor对象描边颜色:nil(和文字的 foregroundColor一致)
strokeWidth包含浮点数的NSNumber对象描边宽度:正值空心描边,负值实心描边,默认0(不描边)
.shadowNSShadow对象文本阴影:默认nil(没有阴影)
.textEffectNSString对象文字效果:默认nil(没有文字效果)
.attachmentNSTextAttachment对象附件(常用作图文混排) :默认nil(没有附件)
.link(原名:NSLinkAttributeName)NSURL (优先) 或 NSString对象链接
.baselineOffset包含浮点数的NSNumber对象基础偏移量:正值向上偏移,负值向下偏移,默认0(不偏移)
.obliqueness包含浮点数的NSNumber对象字体倾斜 :正值向右倾斜,负值向左倾斜, 默认0(不倾斜)
.expansion包含浮点数的NSNumber对象文本扁平化:正值横向拉伸,负值横向压缩,默认0(不拉伸)

2、属性详解及应用

NSMutableAttributedString 是 NSAttributedString 的子类,一般来说我比较习惯使用NSMutableAttributedString来实现富文本。

2.1 NSAttributedString.Key.font --字体大小

 let title = "联系客服"let text = "遇到问题?您可以\(title)"//1、创建NSMutableAttributeString实例let attributeString = NSMutableAttributedString(string: text)//2、添加属性attributeString.addAttribute(.font, value: UIFont.systemFont(ofSize: 30), range: NSMakeRange(text.count - title.count, title.count))//3、赋值label.attributedText = attributeString

在这里插入图片描述

2.2 NSAttributedString.Key.paragraphStyle – 文本字、行间距,对齐等

    let title = "联系客服"let text = "遇到问题?您可以\(title)"//1、创建NSMutableAttributeString实例let attributeString = NSMutableAttributedString(string: text)//2、添加属性let paragraphStyle = NSMutableParagraphStyle()paragraphStyle.alignment = .center  //居中对齐attributeString.addAttribute(.paragraphStyle, value: paragraphStyle, range: NSMakeRange(0, text.count))//3、赋值label.attributedText = attributeString

2.3 NSAttributedString.Key.foregroundColor – 字体颜色

   let title = "联系客服"let text = "遇到问题?您可以\(title)"//1、创建NSMutableAttributeString实例let attributeString = NSMutableAttributedString(string: text)//2、添加属性attributeString.addAttribute(.foregroundColor, value: UIColor.orange, range: NSMakeRange(text.count-title.count, title.count))//3、赋值label.attributedText = attributeString

在这里插入图片描述

2.4 NSAttributedString.Key.backgroundColor – 背景色

        let title = "联系客服"let text = "遇到问题?您可以\(title)"//1、创建NSMutableAttributeString实例let attributeString = NSMutableAttributedString(string: text)//2、添加属性attributeString.addAttribute(.backgroundColor, value: UIColor.orange, range: NSMakeRange(text.count-title.count, title.count))//3、赋值label.attributedText = attributeString

在这里插入图片描述

2.5 NSAttributedString.Key.ligature – 连字符

ios 中有 0 和 1 两个值:0表示没有连字符,而1是默认的连字符。(一般对连笔写的英文有效, 中文即使设置了连字符也很难表现出来)。

2.6 NSAttributedString.Key.kern – 字符间距

正值间距加宽,负值间距变窄,0表示默认效果

        let title = "联系客服"let text = "遇到问题?您可以\(title)"//1、创建NSMutableAttributeString实例let attributeString = NSMutableAttributedString(string: text)//2、添加属性attributeString.addAttribute(.kern, value: 10, range: NSMakeRange(text.count-title.count, title.count))//3、赋值label.attributedText = attributeString

在这里插入图片描述

2.7 设置删除线相关

     let title = "联系客服"let text = "遇到问题?您可以\(title)"//1、创建NSMutableAttributeString实例let attributeString = NSMutableAttributedString(string: text)//2、添加属性attributeString.addAttribute(.strikethroughStyle, value: 1, range: NSMakeRange(text.count-title.count, title.count))attributeString.addAttribute(.strikethroughColor, value: UIColor.orange, range: NSMakeRange(text.count-title.count, title.count))//3、赋值label.attributedText = attributeString

在这里插入图片描述

2.8 设置下划线相关

        let title = "联系客服"let text = "遇到问题?您可以\(title)"//1、创建NSMutableAttributeString实例let attributeString = NSMutableAttributedString(string: text)//2、添加属性attributeString.addAttribute(.underlineStyle, value: 1, range: NSMakeRange(text.count-title.count, title.count))attributeString.addAttribute(.underlineColor, value: UIColor.orange, range: NSMakeRange(text.count-title.count, title.count))//3、赋值label.attributedText = attributeString

在这里插入图片描述

2.9 描边颜色、描边宽度

  • 描边颜色要搭配非0的描边宽度才会生效,如果只设置了描边颜色,描边宽度为0,则没有描边效果
  • 描边宽度是正数,会对文字进行描边,但文字中心不填充( 一种经典的空心文本样式是在该值为3.0)
  • 描边宽度是负数,会对文字进行描边,而且会同时对文字中心进行填充(填充的颜色为文字本来的字体颜色)
        let title = "联系客服"let text = "遇到问题?您可以\(title)"//1、创建NSMutableAttributeString实例let attributeString = NSMutableAttributedString(string: text)//2、添加属性attributeString.addAttribute(.strokeWidth, value: 3, range: NSMakeRange(text.count-title.count, title.count))attributeString.addAttribute(.strokeColor, value: UIColor.black, range: NSMakeRange(text.count-title.count, title.count))//3、赋值label.attributedText = attributeString

2.10 文本阴影

        let title = "联系客服"let text = "遇到问题?您可以\(title)"//1、创建NSMutableAttributeString实例let attributeString = NSMutableAttributedString(string: text)//2、添加属性let shadow = NSShadow()shadow.shadowColor = UIColor.blackshadow.shadowBlurRadius = 3shadow.shadowOffset = CGSize(width: 0, height: 0.8)attributeString.addAttribute(.shadow, value: shadow, range: NSMakeRange(text.count-title.count, title.count))//3、赋值label.attributedText = attributeString

在这里插入图片描述

2.11 文字效果

        let title = "联系客服"let text = "遇到问题?您可以\(title)"//1、创建NSMutableAttributeString实例let attributeString = NSMutableAttributedString(string: text)//2、添加属性attributeString.addAttribute(.textEffect, value: NSAttributedString.TextEffectStyle.letterpressStyle, range: NSMakeRange(text.count-title.count, title.count))//3、赋值label.attributedText = attributeString

在这里插入图片描述

在这里插入图片描述

2.12 链接

UILabel无法使用该属性, 但UITextView 控件可以使用。

     let title = "联系客服"let text = "遇到问题?您可以\(title)"//1、创建NSMutableAttributeString实例let attributeString = NSMutableAttributedString(string: text)//2、添加属性let url = URL(string: "http://www.baidu.com")!attributeString.addAttribute(.link, value: url, range: NSMakeRange(text.count-title.count, title.count))//3、赋值textView.attributedText = attributeString//设置link的样式textView.linkTextAttributes = [.foregroundColor:UIColor.orange]

在这里插入图片描述

2.13 基础偏移量

        let title = "联系客服"let text = "遇到问题?您可以\(title)"//1、创建NSMutableAttributeString实例let attributeString = NSMutableAttributedString(string: text)//2、添加属性attributeString.addAttribute(.baselineOffset, value: 10, range: NSMakeRange(text.count-title.count, title.count))//3、赋值label.attributedText =  attributeString

在这里插入图片描述

2.14 字体倾斜

注意:正值向右倾斜,负值向左倾斜, 默认0(不倾斜)

      let title = "联系客服"let text = "遇到问题?您可以\(title)"//1、创建NSMutableAttributeString实例let attributeString = NSMutableAttributedString(string: text)//2、添加属性attributeString.addAttribute(.obliqueness, value: 1, range: NSMakeRange(text.count-title.count, title.count))//3、赋值label.attributedText =  attributeString

在这里插入图片描述

2.15 文本扁平化(横向拉伸)

注意:正值横向拉伸,负值横向压缩,默认0(不拉伸)

      let title = "联系客服"let text = "遇到问题?您可以\(title)"//1、创建NSMutableAttributeString实例let attributeString = NSMutableAttributedString(string: text)//2、添加属性attributeString.addAttribute(.expansion, value: 1, range: NSMakeRange(text.count-title.count, title.count))//3、赋值label.attributedText =  attributeString

在这里插入图片描述

3、富文本加载html

    let str = "<div>哈哈哈哈哈</div>"do {let attributeStr = try NSMutableAttributedString(data: str.data(using: .unicode)!, options: [NSAttributedString.DocumentReadingOptionKey.documentType : NSAttributedString.DocumentType.html], documentAttributes: nil)textView.attributedText = attributeStr}catch {}

在这里插入图片描述

4、图文混排

现在方案:
1、HTML结合Webview
2、利用CoreText,手动解析手动布局
3、第三方库,如YYText。
4、NSMutableAttriteString

  • 第一种方案,优点是:对于客户端来说,开发难度和代码量都是比较小的。同时也能做到随心所欲的布局,不需要考虑图片,缓存,和交互等等问题。缺点是:需要准备相应的Html页面,如果页面中涉及到权限验证,处理起来比较麻烦,另外,如果在业务场景复杂的情况下,针对性能和交互的优化需要花更多的时间。
  • 第二种方案,通过原生的CoreText,使我们能接管整个图文排版过程中数据的管理以及界面的排布展示,优点是:自由度高,能够随心所欲展示排版样式、交互方式,效率上比较高。缺点是:代码量比较大,需要自己造好几个轮子,并且因为需要关注的地方比较多,如:图片缓存,排版交互等,开发周期上会比较长,同时前后端数据交互格式也需要相互配合。
  • 第三种方案,这个方案省去造轮子的时间,可以将注意力放在排版和优化上,笔者采用的也是这个方案。
  • 第四种方案,只适合简单的图文混排。

4.1 光标位置插入图片

  enum ImageAttachmentMode {case `default` //默认(不改变大小)case fitTextLine //使得尺寸适应行高case fitTextView //使得尺寸适应textView}//光标位置插入图片func insertPic(_ textView:UITextView,_ image:UIImage,mode:ImageAttachmentMode = .default){//获取textView的所有文本,转化成可变的文本let mutableStr = NSMutableAttributedString(attributedString: textView.attributedText)//创建图片附件let imgAttachment = NSTextAttachment(data: nil, ofType: nil)imgAttachment.image = image//设置图片显示方式if mode == .fitTextLine {//与文字一样大小imgAttachment.bounds = CGRect(x: 0, y: -4, width: textView.font!.lineHeight, height: textView.font!.lineHeight)}else if mode == .fitTextView {//撑满一行let imageWidth = textView.frame.width - 10let imageHeight = image.size.height / image.size.width * imageWidthimgAttachment.bounds = CGRect(x: 0, y: 0, width: imageWidth, height: imageHeight)}let imgAttachmentStr =  NSAttributedString(attachment: imgAttachment)//获得目前光标的位置let selectedRange = textView.selectedRange//插入文字mutableStr.insert(imgAttachmentStr, at: selectedRange.location)//设置可变文字的字体属性mutableStr.addAttribute(.font, value: UIFont.systemFont(ofSize: 30), range: NSMakeRange(0, mutableStr.length))//再次记住新的光标的位置let newSelectedRange = NSMakeRange(selectedRange.location + 1, 0)//重新给文本赋值textView.attributedText = mutableStr//恢复光标的位置(上面一句代码执行之后,光标会移动最后面)textView.selectedRange = newSelectedRange//移动滚动条(确保光标在可视范围内)textView.scrollRangeToVisible(newSelectedRange)}

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

4.2 光标位置插入文字

 //光标位置插入文字func insertStr(_ textView:UITextView,_ text:String){//获取textView的所有文本,转变成可变的文本let mutableStr = NSMutableAttributedString(attributedString: textView.attributedText)//获取目前光标的位置let selectedRange = textView.selectedRange//插入文字let attrStr = NSAttributedString(string: text)mutableStr.insert(attrStr, at: selectedRange.location)//设置可变文本的字体属性mutableStr.addAttribute(.font, value: UIFont.systemFont(ofSize: 30), range: NSMakeRange(0, mutableStr.length))//再次记住新的光标的位置let newSelectedRange = NSMakeRange(selectedRange.location + attrStr.length, 0)//重新给文本赋值textView.attributedText = mutableStr//恢复光标的位置(上面一句代码执行之后,光标会移动到最后面)textView.selectedRange = newSelectedRange}

5、巧用UITextView实现富文本的点击效果

class RegisterController: BaseViewController {override func viewDidLoad() {super.viewDidLoad()//用UItextView 实现富文本的功能let textView = UITextView(frame: CGRect(x: 50, y: 200, width: 200, height: 100))textView.isEditable = falsetextView.isScrollEnabled = falsetextView.delegate = selfview.addSubview(textView)let title = "联系客服"let text = "遇到问题?您可以\(title)"let attributeString = NSMutableAttributedString(string: text)attributeString.addAttribute(.font, value: UIFont.systemFont(ofSize: 15), range: NSMakeRange(0, text.count))attributeString.addAttribute(.link, value: "contact://", range: NSMakeRange(text.count-title.count, title.count))textView.attributedText = attributeStringtextView.linkTextAttributes = [.foregroundColor : UIColor.orange] //设置要点击内容的样式,否则会有默认样式}
}extension RegisterController : UITextViewDelegate {func textView(_ textView: UITextView, shouldInteractWith URL: URL, in characterRange: NSRange, interaction: UITextItemInteraction) -> Bool {if URL.absoluteString.contains("contact://") {//处理联系客服的逻辑return false}return true}
}

在这里插入图片描述

参考文章

https://www.jianshu.com/p/1056d983bdfd

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/35552.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

iPhone开发:类似iChat的聊天泡泡示例

很多iPhone聊天程序消息显示都喜欢做成iChat的泡泡样式&#xff0c;这样是不是很apple呢&#xff1f; 那么下面用一种简单的方法来实现它。 主要通过 UIlabel的sizeToFit方法自动计算文本区域大小 UIImage的- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftC…

Iphone开发(四)文本框,文本视图,和软键盘的隐藏

holydancer原创&#xff0c;如需转载&#xff0c;请在显要位置注明&#xff1a; 转自holydancer的CSDN专栏&#xff0c;原文地址&#xff1a;http://blog.csdn.net/holydancer/article/details/7396207 今天介绍几个基本控件和软键盘的操作&#xff0c;在iphone应用中用到一些…

ios手机端 表单input调用focus方法时,光标不显示,但软键盘会弹出来,可以修改内容,需要修改内容后光标才显示

功能&#xff1a; ios表单验证时&#xff0c;比如 输身份证号&#xff0c;失焦后验证身份证&#xff0c;如果不合法&#xff0c;就让光标跳到对应的输入框&#xff0c;我是不合法就调用focus方法&#xff0c;完了会跳过去&#xff0c;但是ios有个bug&#xff0c;它确实会定位到…

解决 - 解决ios input 和textarea不能输入的问题

写移动端项目总有一些兼容性需要我们解决滴&#xff0c;就比如我现在遇到的问题&#xff1a;ios 无法正常在input和textarea上面输入我们需要的内容&#xff0c;而安卓手机是可以正常输入的&#xff0c;一点问题都没有。那么我现在就给大家分享一下如何解决 ios 上面的问题啦。…

获取TradingView数字货币技术分析结果

一、 TradingView的技术分析 TradingView对数字货币的分析和传统证券一样,分为基本面和技术面。 基本面则包括数字货币的基本表现 以及最近一段时间的波动性 技术分析包括振荡指标和趋势指标,可以帮助您确定趋势方向,并了解当前的市场情况。 振荡指标 趋势指标

量化交易中N字型技术形态的实现,天勤,mindgo,python版同花顺,okex,huobi,binance等平台都可正常使用

量化中N字型技术形态的实现 最近一个客户提出了使用N字型技术形态量化交易的思路&#xff0c;本人比较擅长技术或数据统计的编写&#xff0c;这种自定义的略费了一些时间&#xff0c;大约一天完工&#xff0c;简单说一下思路。 通过波段可以简单的看到&#xff0c;在k线波段的走…

数字货币的路在哪里?

在人工智能、分布式数据、边缘计算等核心技术不断发展和普及的过程中&#xff0c;Web3 以其对传统互联网的惊人重塑展现出无穷的发展潜力。 在最初的构想中&#xff0c;数字货币是方便用户在 Web3 世界自由交互的通行证。但随着加密货币市场刚刚从长期的动荡中缓慢复苏&#xf…

Coachella 将 NFT 集成到票务中:数字资产的新用例

传统票务行业已经慢慢拥抱新技术和数字资产。数字门票于 1990 年代初首次推出&#xff0c;但由于严重依赖纸质门票而很快被淘汰。直到 2000 年代&#xff0c;在创建用于买卖门票的集中市场之后&#xff0c;在线票务系统才获得很大的吸引力。但是&#xff0c;如果我们把这个概念…

使用python实现一个简单的数字货币交易回测系统

目录 BaseStrategy&#xff08;策略基类&#xff09;Broker&#xff08;经纪人&#xff09;示例代码数据可视化 BaseStrategy&#xff08;策略基类&#xff09; BaseStrategy&#xff0c;交易策略基类 回调函数 on_start&#xff1a;策略开始运行on_stop&#xff1a;策略运行…

各国纷纷推出数字货币,数字货币发展正当其时

各国央行应如何应对数字技术的挑战&#xff1f;这已成为一个紧迫的问题。部分原因是&#xff0c;各国央行和政府都必须掌控这个私营货币泛滥的新蛮荒时代。现在&#xff0c;它们必须推出自己的数字货币。 试想在不使用纸币的情况下&#xff0c;所有的付款行为将如何实现&#…

网格交易法以及在数字货币中基于Python的量化实现

介绍 我一直觉得程序员都应该试试量化投资&#xff0c;因为在投资里最忌讳的就是情绪波动&#xff0c;而程序员们都相对理性一些&#xff0c;更加愿意相信规则与数据&#xff0c;而同时程序员们又有能力去实现自动交易&#xff0c;所以我这篇文章主要的目标是面向程序员&#…

如何获取免费的数字货币历史数据

数量技术宅团队在CSDN学院推出了量化投资系列课程 欢迎有兴趣系统学习量化投资的同学&#xff0c;点击下方链接报名&#xff1a; 量化投资速成营&#xff08;入门课程&#xff09; Python股票量化投资 Python期货量化投资 Python数字货币量化投资 C语言CTP期货交易系统开…

数字货币量化交易策略—基于移动平均线MA

本文介绍金融市场中的量化交易策略之移动平均线MA策略。 一、概念 移动平均线&#xff0c;Moving Average&#xff0c;简称MA&#xff0c;MA是用统计分析的方法&#xff0c;将一定时期内的证券价格&#xff08;指数&#xff09;加以平均&#xff0c;并把不同时间的平均值连接…

中国央行将发行全球首个法定数字货币,你准备好了吗?

二月初央行推动的基于区块链的数字票据交易平台已测试成功&#xff0c;由央行发行的法定数字货币已在该平台试运行。这一消息表明中国成为全球首个发行数字货币的国家&#xff0c;长达4年的研究让中国在数字货币领域走在了世界前列。 数字货币是什么&#xff1f;央行又为何如此…

全球传统证券外汇交易商进军区块链数字资产·统计(一)

越来越多合规的基础设施建立完善之后&#xff0c;这些资产管理公司与持牌机构将有能力为这些传统的「老钱」打通投资渠道&#xff0c;那么现有的市场份额会成倍的增加&#xff0c;同时也会打破现有的行业市场格局。 目录 一、eToro互联网券商 二、盈透证券集团 三、TD Ameri…

数字货币量化交易策略操作(61BTC分享)

数字货币基金量化主要进行无风险套利和趋势套利两类操作&#xff0c;其中 无风险套利主要包括&#xff1a; 1、比特币在不同交易所的价差搬砖 2、流通性比较好的代币的三角套利 3、盘口价差很大&#xff0c;交易活跃的盘口套利 4、期货对冲套利。 趋势套利主要包括 5、杠…

mac checkra1n越狱14.0-14.8

首先安装checkra1n 请到官网自行下载安装 All Releases checkra1n 可参考 Sina Visitor System 启动软件件操作 1、 进入初始界面&#xff0c;如果start按键亮到&#xff0c;直接到 3 2、设置步骤内容 如下内容 3、准备开始 4、操作越狱操作界面&#xff08;重点&#x…

iOS逆向一iPhone手机越狱/APP脱壳/IPA签名

全工具&#xff0c;无门槛。 iPhone越狱一一某助手 APP脱壳一一CrackerXI IPA签名一一某助手 iPhone越狱 越狱方法和步骤&#xff1a; 1.下载并打开某助手电脑端&#xff0c;将需要越狱设备连接至电脑。 2.在某助手“工具箱”中&#xff0c;找到并打开“一键越狱”功能。…

iOS安全攻防(二十):越狱检测的攻与防

越狱检测的攻与防 在应用开发过程中,我们希望知道设备是否越狱,正以什么权限运行程序,好对应采取一些防御和安全提示措施。iOS7相比之前版本的系统而言,升级了沙盒机制,封锁了几乎全部应用沙盒可以共享数据的入口。即使在越狱情况下,限制也非常多,大大增加了应用层攻击难…

iOS 越狱-砸壳工具的使用

1.越狱概述 1.1 通过iOS系统安全启动链漏洞&#xff0c;从而禁止掉信任链中负责验证的组件。拿到iOS系统最大权限ROOT权限. 1.2 当启动一台iOS设备时&#xff0c;系统首先会从只读的ROM中读取初始化指令&#xff0c;也就是系统的引导程序(事实上所有的操作系统启动时都要经过这…