4.5 UILabel自定义文字样式 [iOS开发-Xcode教程]

1. 在欢迎窗口右侧的历史项目列表中,双击打开之前创建的单视图项目模板。

4.5 UILabel自定义文字样式 [iOS开发-Xcode教程]_第1张图片
image

2. 本节课将为您演示,如何创建一个自定义的标签对象。首先打开一个空白项目,在项目文件夹上,点击鼠标右键,弹出右键菜单。

4.5 UILabel自定义文字样式 [iOS开发-Xcode教程]_第2张图片
image

3. 在弹出的右键菜单中,选择创建文件选项。

4.5 UILabel自定义文字样式 [iOS开发-Xcode教程]_第3张图片
image

4. 保持默认的选项,点击下一步按钮,进入下一步设置页面。

5. 在类名输入框内,输入类的名称。

4.5 UILabel自定义文字样式 [iOS开发-Xcode教程]_第4张图片
image

6. 点击父类的名称输入框。

4.5 UILabel自定义文字样式 [iOS开发-Xcode教程]_第5张图片
image

7. 在父类名称输入框内,输入父类的名称。

4.5 UILabel自定义文字样式 [iOS开发-Xcode教程]_第6张图片
image

8. 这里选择创建一个以标签为父类的子类。点击下一步按钮,进入下一步设置页面。

4.5 UILabel自定义文字样式 [iOS开发-Xcode教程]_第7张图片
image

9. 保持类文件默认的存储位置,点击创建按钮,确认类的创建。

10. 现在开始编写代码,实现自定义的标签对象,并给标签添加描边效果。

4.5 UILabel自定义文字样式 [iOS开发-Xcode教程]_第8张图片
image

11. 首先重载父类的绘图方法。这样就可以从底层来自定义标签的形状了。

4.5 UILabel自定义文字样式 [iOS开发-Xcode教程]_第9张图片
image

12. 获取当前图形环境的上下文。

4.5 UILabel自定义文字样式 [iOS开发-Xcode教程]_第10张图片
image

13. 设置在上下文中,文字的渲染模式为描边模式。

4.5 UILabel自定义文字样式 [iOS开发-Xcode教程]_第11张图片
image

14. 设置文字描边的边框宽度为2。

4.5 UILabel自定义文字样式 [iOS开发-Xcode教程]_第12张图片
image

15. 设置文字描边的顶点连接方式为圆角方式。

4.5 UILabel自定义文字样式 [iOS开发-Xcode教程]_第13张图片
image

16. 设置文字的描边颜色为白色。

4.5 UILabel自定义文字样式 [iOS开发-Xcode教程]_第14张图片
image

17. 将文字的描边信息,绘制在指定区域内。

4.5 UILabel自定义文字样式 [iOS开发-Xcode教程]_第15张图片
image

18. 设置在上下文中,文字渲染模式为填充。

4.5 UILabel自定义文字样式 [iOS开发-Xcode教程]_第16张图片
image

19. 创建一个颜色为黑色的颜色对象。

4.5 UILabel自定义文字样式 [iOS开发-Xcode教程]_第17张图片
image

20. 设置文字颜色为黑色。

4.5 UILabel自定义文字样式 [iOS开发-Xcode教程]_第18张图片
image

21. 将文字的填充信息,绘制在指定区域内。然后选择编辑视图控制器类文件。

4.5 UILabel自定义文字样式 [iOS开发-Xcode教程]_第19张图片
image

22. 现在开始创建自定义标签,并添加到当前视图控制器的根视图。

4.5 UILabel自定义文字样式 [iOS开发-Xcode教程]_第20张图片
image

23. 初始化一个自定义标签对象。

4.5 UILabel自定义文字样式 [iOS开发-Xcode教程]_第21张图片
image

24. 然后设置自定义标签对象的位置为(120, 180),尺寸为(240, 120)。

4.5 UILabel自定义文字样式 [iOS开发-Xcode教程]_第22张图片
image

25. 接着设置自定义标签对象的文字内容。

4.5 UILabel自定义文字样式 [iOS开发-Xcode教程]_第23张图片
image

26. 设置自定义标签对象的字体和大小。

4.5 UILabel自定义文字样式 [iOS开发-Xcode教程]_第24张图片
image

27. 将自定义标签对象,添加到当前视图控制器的根视图。

4.5 UILabel自定义文字样式 [iOS开发-Xcode教程]_第25张图片
image

28. 设置根视图的背景颜色为紫色。然后点击左上角的[编译并运行]按钮,打开模拟器预览项目。

4.5 UILabel自定义文字样式 [iOS开发-Xcode教程]_第26张图片
image

29. 在弹出的模拟器中,观察自定义样式的标签视图,然后点击[停止]按钮,关闭模拟器,并结束本节课程。

4.5 UILabel自定义文字样式 [iOS开发-Xcode教程]_第27张图片
image

4.5 UILabel自定义文字样式 [iOS开发-Xcode教程]_第28张图片
image

本文整理自:《互动教程 for Xcode9 & Swift4》,真正的[手把手]教学模式,用最快的速度上手iOS开发,苹果商店App Store免费下载:https://itunes.apple.com/cn/app/id1063100471,或扫描本页底部的二维码。课程配套素材下载地址:资料下载

你可能感兴趣的:(4.5 UILabel自定义文字样式 [iOS开发-Xcode教程])