从头开始swift2.0 仿乐乐医项目(二)列表的填充

8 篇文章 0 订阅
3 篇文章 0 订阅

上一节我们已经成功搭建好一个主流框架,为了演示更加真实,并请自行将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,显示都很正常,说明我们约束是正确的,好了第二节《列表的填充》先到这里,谢谢观看。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值