2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器]

1. 本节课将为您演示,如何调整文字的对齐方式,以及创建一个可根据内容自动调整高度的文本区域。首先在左侧的项目导航区,打开视图控制器的代码文件。

2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器]_第1张图片
image

2. 接着开始编写代码,实现本节课的内容。

2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器]_第2张图片
image

3. 在当前的类文件中,引入已经安装的第三方类库。

2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器]_第3张图片
image

4. 然后修改当前视图控制器类的父类的名称。

2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器]_第4张图片
image

5. 创建一个新的表单。

2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器]_第5张图片
image

6. 然后在表单中添加一个段落,并设置段落的头部区域和尾部区域。

2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器]_第6张图片
image

7. 接着添加一个名称行,并设置该行的标题文字和占位文字。

2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器]_第7张图片
image

8. 在当前表单行的左侧,添加一个缩略图标。

2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器]_第8张图片
image

9. 再次添加一个名称行,并设置该行的占位文字。

2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器]_第9张图片
image

10. 同样在当前表单行的左侧,添加一个缩略图标。

2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器]_第10张图片
image

11. 再次添加一个名称行,并设置该行的标题文字。

2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器]_第11张图片
image

12. 接着设置文本框的文字对齐方式为左对齐,以及文本框的占位文字。

2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器]_第12张图片
image

13. 再次添加一个名称行。

2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器]_第13张图片
image

14. 设置文本框的文字对齐方式为右对齐,并设置它的占位文字。

2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器]_第14张图片
image

15. 接着添加一个新的段落,并设置段落的头部区域和尾部区域。

2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器]_第15张图片
image

16. 在新的段落中,添加一个名称行,并设置该行的标题文字。

2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器]_第16张图片
image

17. 接着设置文本框的宽度比例为0.6。

2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器]_第17张图片
image

18. 然后设置文本框的对齐方式为左对齐,文本标签的对齐方式为右对齐。

2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器]_第18张图片
image

19. 添加一个新的段落,我们将在该段落中,创建一个自适应高度的文本区域。

2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器]_第19张图片
image

20. 添加一个文本区域行。

2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器]_第20张图片
image

21. 设置该行的占位文字,同时设置文本区域的高度为自适应,其初始高度为110。接着点击左上角的[编译并运行]按钮,启动模拟器预览项目。

2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器]_第21张图片
image

22. 在弹出的模拟器中,我们可以看到不同对齐方式的文本框。在下方的圆角处按下手指,并向上方拖动,以查看底部的文本区域。

23. 在文本区域上点击,使文本区域获得焦点。

2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器]_第22张图片
image

24. 然后按下键盘上的回车键,使文本区域中的光标下移一行。

2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器]_第23张图片
image

25. 然后使用相同的方式,继续下移光标。

2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器]_第24张图片
image

26. 再次往下移动光标。

2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器]_第25张图片
image

27. 再次按下返回键,下移光标。

2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器]_第26张图片
image

28. 由于内容行数的增加,文本区域的高度也随之变化。

2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器]_第27张图片
image

29. 点击完成按钮,关闭键盘。

2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器]_第28张图片
image

30. 最后点击此处的[停止]按钮,关闭模拟器,并结束本节课程。

2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器]_第29张图片
image

2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器]_第30张图片
image

2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器]_第31张图片
image

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

apps8 2.png

你可能感兴趣的:(2.12 设置表单文字对齐方式以及自适应高度的TextArea [iOS开发中的神兵利器])