上一节我们已经成功搭建好一个主流框架，为了演示更加真实，并请自行将ItemBar上的文字、图标更换为自定义的内容，我这里是仿写乐乐医APP，将4个item分别设置为首页、咨询、快问、我，如图所示：
到目前为止我们甚至连一行代码都没有写过，iOS的这个Xcode确实是非常方便的。现在我们来将首页的医生列表展示出来。
新建一个TableViewCell，
命名为DoctorCell，把create XIB勾上，语言还是选择Swift，创建完成后看到项目中多了两个文件，一个是cell，一个是xib，并且已经自动关联上了。
将cell的视图拖到高为100的大小，并向其放入一个UIImageView，设置为60x60，并添加一个演示图片，最后添加约束。
添加的约束都可以在右边看到
再拖入一个UILabel，显示为医生姓名，并添加约束，距头像右边68，与头像顶部对齐
然后依次添加职位、公司、科系、擅长
布局完成，然后我们关联到cell.swift中。点击箭头所指处，如果打开的不是DoctorCell的话，按住option键并点击左边的DoctorCell.swift
按住control键并连线，给一会儿会在编码中使用到的控件都申明一个变量
连线完成后DoctorCell中至少有以下控件：
@IBOutlet weak var ivHead: UIImageView!
@IBOutlet weak var lblName: UILabel!
@IBOutlet weak var lblPosition: UILabel!
@IBOutlet weak var lblHospital: UILabel!
@IBOutlet weak var lblGood: UILabel!
然后在awakeFromNib方法中，将ivHead设置为圆形
ivHead.layer.cornerRadius = 30//ivHead.frame.size.height/2
ivHead.layer.borderWidth = 0.5
ivHead.layer.borderColor = UIColor.lightGrayColor().CGColor
ivHead.layer.masksToBounds = true
OK，Cell这边我们暂时可以不动了，现在我们新建一个UITableViewController
回到StoryBoard，选中首页的Controller，将class更改为刚创建的MainViewController
进入MainViewController.swift，我们开始编码啦！终于要开始编码了。。。
因为我们是自定义的Cell，所以tableView需要注册一下
tableView.registerNib(UINib(nibName:"DoctorCell", bundle:nil), forCellReuseIdentifier:"cell")
然后只需要修改这三个地方，我们运行起来看看效果
numberOfSectionsInTableView 列表分为几部分，通常都是1
numberOfRowsInSection 一共有多少条数据
cellForRowAtIndexPath 每行cell显示的样式，类似于android中的getView
我们运行后看到数据是出来了，不过都挤到一起去了
重写一个heightForRowAtIndexPath的方法，返回100的高度（之前我们在xib中就是写的100）
override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
return 100
}
再次运行，非常完美的显示出来了
我们修改一下文字看看，在cellForRowAtIndexPath方法中
let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as! DoctorCell
cell.lblName.text = "严律南"
cell.lblPosition.text = "主任医师"
cell.lblHospital.text = "四川大学华西医院 肝胆胰外科"
cell.lblGood.text = "肝脏移植，肝癌，肝硬化等。"
return cell
分别在4s/5s/6s上运行
OK，显示都很正常，说明我们约束是正确的，好了第二节《列表的填充》先到这里，谢谢观看。
网友评论