我们今天的任务：优化TableView的显示项目：
优化清单：
1. 调整Cell和分割线
2. 头像框优化（默认背景）
3. 头像设置圆角
4. 分割Section
一、调整Cell和分割线
1. 上节课的运行结果只是实现了头像和昵称的显示，但是远没有达到UI合适的的地步，首先就是每个cell太窄了，我们需要把它拉高一点。 找到ContactViewController（为什么找它？因为我们的TableView在这个ViewController里），然后加入以下代码：
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return 75.0 // 设置cell的高度
}
设置cell高度
小技巧：Xcode都有联想功能，我们需要加入这个功能的时候，我们只需要输入func tableView,然后用方向键选择包含“heightForRowAt“的那个方法，方法的外壳就会自动加入了（如下图）
自动联想输入，会极大的提高我们的工作效率
2. 我们将Cell的高度拉高了，我们就需要调整我们的头像的ImageView的高度，宽度和位置了，以及显示昵称的Label的位置
计算我们的头像（正方形）的高度
计算完成以后，我们从Main.storyboard中找到我们的ImageView，修改它的尺寸：
修改ImageView的尺寸
同时调整Label的相对位置，以完成调整。
3. 现在cell的分割线还是两边顶到头的，很不好看，我们希望能空出头像的位置15像素，并且距离右边15像素，这样看起来干净一点：选中contactTableViewCell，将Separator Inset的类型改为Custom，并且将Left改为95，Right改为15
设置分割线的边距
4. Comand + R 运行一下,看下效果：
优化分割线和cell高度后的效果
二、头像框优化（默认背景）
上边一节的内容我们优化了cell和分割线的显示，但是细心的同学注意到了我们的头像如果存在白色变换，由于ImageView没有边框，我们的头像就会看起来很不整齐，我们优化一下，安排！
1. 选中我们头像框的ImageView，然后设置背景色（设置背景色有助于帮助有些图片包含透明背景时，不至于按照纯白色背景显示）
设置头像框的背景色
2. 我们需要对ImageView进行调整，代码中会用到他们，所以我们需要在ContactTableViewCell.swift代码中定义他们，我们只需要建立连接（如果不会建立，可以参考我们第三课的内容）
将ImageView和Label建立链接
3. 在awakeFromNib()方法，加入如下代码：
avatarImage.layer.borderWidth = 0.5
avatarImage.layer.borderColor = colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1)
加入头像ImageView处理代码
小贴士：Swift支持颜色手选，你需要手选颜色的时候，你只需要输入Color,然后Xcode会提示你ColorLiteral, 鼠标点击ColorLiteral即可从颜色器中选中所要的颜色（如下图）
双击Color Literal即可选中颜色
4. 如果你的UI设计师给你提供了RGB色值和透明度，你怎么把它设置到颜色里呢，可以参考我的另一篇文章：iOS Swift 使用RGBA拓展颜色设置方法
5. 设置完成以后，command + R运行一下，看看效果：
设置头像边框和颜色
三、头像设置圆角
加入如下图代码，设置圆角为6像素
设置圆角
四、分割Section
1.我们准备把10个联系人分成3各区域，每个区域的Row数量分别是3，3，4；
ContactViewController.swift加入代码：
设置Section数和每个Section的Row数目
2. 目前的section还没有效果，我们需要为section添加view以及在view上增加一个Label用于显示section的名字等等：
加入如下代码：
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView?{
let view = UIView.init(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 15)) view.backgroundColor = colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 1)
let sectionTitle = UILabel.init(frame: CGRect(x: 15, y: 7, width: 300, height: 10))
sectionTitle.font = UIFont.systemFont(ofSize: 12)
sectionTitle.text = "当前为第\(section + 1)个section"
sectionTitle.textColor = UIColor.white //将SectionTitle添加到刚刚的的View上
view.addSubview(sectionTitle) //将定义的View返回给调用方
return view
}
设置Section的View
3. command + R 运行一下看看效果：
添加完Section后的效果
网友评论