[Swift通天遁地]八、媒体与动画-(15)使用TextKit实现精美的图文混排效果
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公众号:山青咏芝(shanqingyongzhi)
➤博客园地址:山青咏芝(https://www.cnblogs.com/strengthen/)
➤GitHub地址:https://github.com/strengthen/LeetCode
➤原文地址:https://www.cnblogs.com/strengthen/p/10354924.html
➤如果链接不是山青咏芝的博客园地址,则可能是爬取作者的文章。
➤原文已修改更新!强烈建议点击原文地址阅读!支持作者!支持原创!
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
本文将演示制作一款更加精美的图文的图文混排效果:将文字紧贴图片边缘的图文混排效果。
往项目中导入一份文本文件。
在左侧的项目导航区,打开视图控制器的代码文件【ViewController.swift】
1 import UIKit 2 3 class ViewController: UIViewController { 4 5 override func viewDidLoad() { 6 super.viewDidLoad() 7 // Do any additional setup after loading the view, typically from a nib. 8 9 //设置根视图的背景颜色为橙色 10 self.view.backgroundColor = UIColor.orange 11 12 //初始化一个文本视图 13 let textView = UITextView(frame: CGRect(x: 20, y: 40, width: 280, height: 500)) 14 //设置文本视图的背景颜色为橙色 15 textView.backgroundColor = UIColor.orange 16 //设置文本视图的字体大小 17 textView.font = UIFont.systemFont(ofSize: 22) 18 //将文本视图添加到根视图 19 self.view.addSubview(textView) 20 21 //获得文本视图的文字存储属性 22 let textStorage = textView.textStorage 23 //创建一个字符串,表示文本文件在项目中的路径。 24 let path = Bundle.main.url(forResource: "word", withExtension: "txt") 25 26 //添加一个异常捕捉语句,用来加载文本文件。 27 do 28 { 29 //读取文本件中的文字内容 30 let string = try String(contentsOf: path!) 31 //将加载的文字,赋予文本视图的文字存储属性 32 textStorage.replaceCharacters(in: NSRange(location: 0,length: 0), with: string) 33 } 34 catch 35 { 36 print("Something went wrong :(") 37 } 38 39 //读取项目中的一张图片素材 40 let image = UIImage(named: "Tea") 41 //创建一个图像视图,显示加载的图片素材。 42 let imageView = UIImageView(image: image) 43 //初始化一个矩形区域,作为图像视图的显示区域。 44 let rect = CGRect(x: 80, y: 80, width: 150, height: 150) 45 //设置图像视图的显示区域 46 imageView.frame = rect 47 48 //设置图像视图的圆角半径,将图像视图修改为一个圆形。 49 imageView.layer.cornerRadius = 75 50 //对图像视图进行裁切边缘。 51 imageView.layer.masksToBounds = true 52 //给图像视图添加一个宽度为10的边框。 53 imageView.layer.borderWidth = 10 54 //将图像视图添加到根视图 55 self.view.addSubview(imageView) 56 57 //由于需要按照图像的边缘,对文本视图中的文字进行排列, 58 //所以需要知道图像视图在文本视图中的显示区域。 59 //在此将图像视图的边缘属性,转换成使用文本视图中的坐标系统。 60 var frame = textView.convert(imageView.bounds, from: imageView) 61 //由于文本视图中的文本容器,在默认情况下,并不是位于文本视图的原点位置,所以需要减去这个偏移距离。 62 frame.origin.x -= textView.textContainerInset.left; 63 //接着减去另一个方向上的偏移距离。 64 frame.origin.y -= textView.textContainerInset.top; 65 66 //使用贝塞尔路径类,将显示区域转换成一个基于矢量的路径。 67 let path2 = UIBezierPath(ovalIn: frame) 68 //将椭圆路径赋予文本视图的排除路径属性, 69 //即在文本视图中排除椭圆路径所形成的区域, 70 //使文字仅在被排除的区域之外进行排列, 71 //从而实现文字沿图像边缘排列的效果。 72 textView.textContainer.exclusionPaths = [path2] 73 } 74 75 override func didReceiveMemoryWarning() { 76 super.didReceiveMemoryWarning() 77 // Dispose of any resources that can be recreated. 78 } 79 }