写给设计师的iOS前端教程（五）UITextView

一、UILabel 的孪生兄弟

在本系列的第二篇文章《写给设计师的iOS前端教程（二）UILabel》里，我们介绍了 UILabel 组件。今天，我们来介绍 UILabel 的孪生兄弟 — UITextView。

这俩兄弟都是用来显示文字的，有什么区别呢？

差异点	UILabel	UITextView
交互	不可以编辑、选中、复制	可以编辑、选中、复制
垂直方向	居中对齐	顶部对齐
超出区域	超出区域被隐藏	滚动条

UILabel 通常用在一两行的，不需要交互的文字。例如标题，备注文字。

UITextView 主要用大段的，需要有交互的文字。例如新闻的正文，发微博、朋友圈的输入框。

Object-C 与 Photoshop 的文字工具

举个不太严谨的例子，UILabel 就像 Photoshop 里文字工具的单行模式（换行需要手动敲回车的，见上图右上角），UITextView 就像 Photoshop 里文字工具的区域模式（超出区域会自动换行的，见上图右下角）。

二、UITextView 正式登场

翠花，上代码！

    UITextView *myTextView = [[UITextView alloc] initWithFrame:CGRectMake(20, 20, self.view.frame.size.width - 40, 220)];
    myTextView.text = @"这里是一大段的文字";
    myTextView.font = [UIFont systemFontOfSize:16];
    myTextView.textColor = [UIColor darkTextColor];
    [self.view addSubview:myTextView];

三、代码详解

1、赋值、坐标、尺寸（必选）

UITextView *myTextView = [[UITextView alloc] initWithFrame:CGRectMake(20, 20, self.view.frame.size.width - 40, 220)];

2、文字的内容

myTextView.text = @"这里是一大段的文字";

3、文字的字体

myTextView.font = [UIFont systemFontOfSize:16];

4、文字的颜色

myTextView.textColor = [UIColor darkTextColor];

5、显示出来

[self.view addSubview:myTextView];

看过前面几篇教程之后，再看这五行代码是不是很轻松啊？:D

四、常见问题

1、编辑、选中、复制

UITextView 默认是不支持编辑，也不支持选中、复制的。只需要加两行代码就行了。

编辑和选中

myTextView.editable = YES;
myTextView.selectable = YES;

editable 可以编辑
selectable 可以选中、复制

2、滚动条

如果文字很多，超出了 UITextView 的尺寸区域，那么先不显示滚动条，当你滚动的时候会显示，滚动停止后又消失。我觉得这个默认设置还不错。

你可以强制不允许滚动

myTextView.scrollEnabled = false;

也可以始终不显示滚动条

myTextView.showsVerticalScrollIndicator = NO;

3、行间距

UITextView 是专门伺候大段文字的，但是，默认的行间距太小了，挑剔的设计师怎么受得了呢？这个时候，你需要 attributedText（富文本）来帮忙。

默认行间距 vs 自定义行间距

    UITextView *myTextView = [[UITextView alloc] initWithFrame:CGRectMake(20, 20, self.view.frame.size.width - 40, 220)];
    NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
    paragraphStyle.lineSpacing = 10;
    NSDictionary *attributes = @{NSForegroundColorAttributeName:[UIColor darkTextColor],
                                 NSFontAttributeName:[UIFont systemFontOfSize:16],
                                 NSParagraphStyleAttributeName: paragraphStyle
                                 };
    myTextView.attributedText = [[NSAttributedString alloc] initWithString:@"一大段文字" attributes:attributes];
    [self.view addSubview:myTextView];

代码有点儿多，别怕，我们来一步步看看，attributedText 是怎么做到的。

    NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
    paragraphStyle.lineSpacing = 10;

NSMutableParagraphStyle 就相当于是 CSS 样式，lineSpacing 是行高，设计师要调的就是这个数值啦。

    NSDictionary *attributes = @{NSForegroundColorAttributeName:[UIColor darkTextColor],
                                 NSFontAttributeName:[UIFont systemFontOfSize:16],
                                 NSParagraphStyleAttributeName: paragraphStyle
                                 };
    myTextView.attributedText = [[NSAttributedString alloc] initWithString:@"一大段文字" attributes:attributes];

NSDictionary 是给富文本定义的一堆属性：

NSFontAttributeName 文字的字体；
NSForegroundColorAttributeName 文字的颜色；
NSParagraphStyleAttributeName 样式的名称（就是刚才定义的样式）；

还有一些别的属性可以设置，不用管，常用的就这仨了。

   myTextView.attributedText = [[NSAttributedString alloc] initWithString:@"一大段文字" attributes:attributes];

这句就是把刚才的一堆属性，应用到富文本上，搞定！

4、考你个问题

    UITextView *myTextView = [[UITextView alloc] initWithFrame:CGRectMake(20, 20, self.view.frame.size.width - 40, 220)];
    myTextView.textColor = [UIColor blueColor];
    myTextView.text = @"李连杰";
    NSDictionary *attributes = @{NSForegroundColorAttributeName:[UIColor redColor],
                                 NSFontAttributeName:[UIFont systemFontOfSize:16],
                                 };
    myTextView.attributedText = [[NSAttributedString alloc] initWithString:@"马云" attributes:attributes];
    [self.view addSubview:myTextView];

文字的颜色，既定义为蓝色 [UIColor blueColor]，又定义为红色 [UIColor redColor] 。文字的内容，既定义为 @"李连杰"，又定义为 @"马云"。请问，会显示什么颜色？谁的名字？

功守道

聪明的你一定能猜到，答案是：红色的马云。

这个实验告诉我们：功夫不负有钱人，谁叫人家是「富」文本呢？

喜欢这篇文章吗？点击这里查看本系列的更多文章。

写给设计师的iOS前端教程（五）UITextView