[Swift通天遁地]八、媒体与动画-(15)使用TextKit实现精美的图文混排效果

本文将演示制作一款更加精美的图文的图文混排效果:将文字紧贴图片边缘的图文混排效果。

往项目中导入一份文本文件。

在左侧的项目导航区,打开视图控制器的代码文件【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 }

原文地址:https://www.cnblogs.com/strengthen/p/10354924.html

时间: 2024-10-14 03:59:43

[Swift通天遁地]八、媒体与动画-(15)使用TextKit实现精美的图文混排效果的相关文章

[Swift通天遁地]八、媒体与动画-(13)CoreText框架实现图文混排

本文将演示CoreText框架实现图文混排.CoreText(富文本)框架并不支持图片的绘制, 需要借助Core Graphics框架来进行图片的绘制. 图文混排的实现原理非常简单,就是在一个富文本中插入一个占位符, 表示此处需要插入一张图片.然后再由另一个图形绘制框架, 在占位符所在位置绘制指定的图片. 在项目文件夹上点击鼠标右键,弹出右键菜单. [New File]->[Cocoa Touch]->[Next]-> [Class]:CTImageView [Subclass of]:

[Swift通天遁地]八、媒体与动画-(6)使用开源类库快速实现滑入动画

本文将演示使用第三方类库,快速实现一个从上向下滑入的动画. 首先确保已经安装了所需的第三方类库.双击查看安装配置文件[Podfile] 1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'Spring', :git => 'https://github.com/MengTo/Spring.git' 7 e

[Swift通天遁地]八、媒体与动画-(8)使用开源类库快速实现位移动画

本文将演示使用第三方类库,快速实现位移动画. 首先确保已经安装了所需的第三方类库.双击查看安装配置文件[Podfile] 1 platform :ios, '8.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'Cheetah' 7 end 根据配置文件中的相关设置,安装第三方类库. 安装完成之后,双击打开项目文件[DemoApp.xcodep

[Swift通天遁地]八、媒体与动画-(7)实现多个动画的顺序播放效果

本文将演示使用第三方类库,实现多个动画的顺序播放效果. 首先确保已经安装了所需的第三方类库.双击查看安装配置文件[Podfile] 1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'Spring', :git => 'https://github.com/MengTo/Spring.git' 7 end

[Swift通天遁地]八、媒体与动画-(9)快速实现复合、Label、延续、延时、重复、缓冲、弹性动画

本文将演示多种动画类型效果. 首先确保已经安装了所需的第三方类库.双击查看安装配置文件[Podfile] 1 platform :ios, '8.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'Cheetah' 7 end 根据配置文件中的相关设置,安装第三方类库. 安装完成之后,双击打开项目文件[DemoApp.xcodeproj] 在左侧

[Swift通天遁地]八、媒体与动画-(10)在项目中播放GIF动画

本文将演示使用第三方类库播放GIF动画. 首先确保已经安装了所需的第三方类库.双击查看安装配置文件[Podfile] 1 platform :ios, '12.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'SwiftGifOrigin', '~> 1.6.1' 7 end 根据配置文件中的相关设置,安装第三方类库. 安装完成之后,双击打开项

[Swift通天遁地]八、媒体与动画-(11)实现音乐播放的动态视觉效果

本文将演示使用第三方类库实现音乐播放的动态视觉效果. 首先确保已经安装了所需的第三方类库.双击查看安装配置文件[Podfile] 1 platform :ios, ‘12.0’ 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'AudioIndicatorBars' 7 end 根据配置文件中的相关设置,安装第三方类库. 安装完成之后,双击打开项目文

[Swift通天遁地]八、媒体与动画-(1)实现音频的播放和停止

本文将演示实现对音频播放的控制. 首先确保在项目中,已经安装了所需的第三方类库,点击查看安装的配置文件. 1 platform :ios, '8.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'CryptoSwift', :git => "https://github.com/krzyzanowskim/CryptoSwift"

[Swift通天遁地]八、媒体与动画-(3)实现视频播放的水印、Overlay、暂停时插入广告等效果

本文将演示使用第三方类库实现视频视频播放的水印.Overlay.暂停时插入广告等效果. 首先确保在项目中,已经安装了所需的第三方类库,点击查看安装的配置文件. 1 platform :ios, '8.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https://github.com/CocoaPods/Specs.git' 6 pod 'MobilePlayer' 7 end 根据配置文件中的相关设置,安装第三方类库. 完成安装之后