学习目标:
步骤
- 创建一个UITableViewCell(并创建xib)命名为 DemoListCell
1) 在DemoListCell.xib中画出你想要的cell样式(AutoLayout),另外注意要给Cell制定 IdentityId: DemoListID
2) 我这里创建了两个UIImage,一个UILabel (图片我会后续补上)
3) 从UIDemoListCell.xib 向 UIDemoListCell.swift 划线(右键选择控件不放拖到.swift文件中放手并命名),Cell样式的初始化就完成了,接下来我们需要调用。代码如下:
swift
@IBOutlet weak var cellImg: UIImageView!
@IBOutlet weak var cellLabel: UILabel!
@IBOutlet weak var cellIcon: UIImageView!
注释:图片我会后续补上去
-
调用自定义的UITableViewCell
1) 创建数据源和CellIdswift let cellId = "DemoListID" //获取CellId var tableData: (titles:[String],values:[String])? //定义一个数据源
2) 在viewDidLoad中使用代码创建一个UITableView
swift override func viewDidLoad() { super.viewDidLoad() self.title = "主页" self.view.backgroundColor = UIColor.whiteColor() //demoList的设置 self.demoList.frame = CGRectMake(0,0,self.view.frame.width,self.view.frame.height) //下面代码是用来去掉UITableView的Cell之间的线 //self.demoList.separatorStyle = UITableViewCellSeparatorStyle.None let nib = UINib(nibName: "DemoListCell",bundle: nil) //nibName指的是我们创建的Cell文件名 self.demoList.registerNib(nib,forCellReuseIdentifier: cellId) self.demoList.delegate = self self.demoList.dataSource = self self.view.addSubview(self.demoList) self.showData() }
- 展示数据源,这里我就写一个静态数据作为数据源即可
swift func showData() { self.tableData = (["SLC提示组件","SwiftNotice组件--JohnLui","CNPPopup组件","闭包回调","KLCPopup组件","Pitaya网络组件","Neon布局组件"],["SCLAlert","SwiftNotice","CNPPopup","ClosureBack","",""]) self.demoList.reloadData() }
-
既然使用了UITableView那么就必须要使用注意到有些必须的代理需要重写,其实我们可以去UITableView中查看,没有 optional开头的function都是必须重写
1) 这里我们重写 这里我们重写四个,代码如下:swift func numberOfSectionsInTableView(tableView: UITableView) -> Int { return 1 } func tableView(tableView: UITableView,numberOfRowsInSection section: Int) -> Int { guard let count:Int = self.tableData!.titles.count else { print("没有数据") } return count } func tableView(tableView: UITableView,cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCellWithIdentifier(self.cellId,forIndexPath: indexPath) as! DemoListCell //cell.cellImg.image = UIImage(named: powerData[indexPath.row][2]) cell.cellLabel.text = self.tableData!.titles[indexPath.row] return cell } func tableView(tableView: UITableView,didSelectRowAtIndexPath indexPath: NSIndexPath) { let index = indexPath.row let storyID = tableData!.values[index] as String let storyboard = UIStoryboard(name: "Main",bundle: nil) var nextView:UIViewController switch storyID { case "SCLAlert": nextView = storyboard.instantiateViewControllerWithIdentifier(storyID) as! SCLAlertDemoViewController case "SwiftNotice": nextView = storyboard.instantiateViewControllerWithIdentifier(storyID) as! SwiftNoticeDemoViewController case "CNPPopup": nextView = storyboard.instantiateViewControllerWithIdentifier(storyID) as! CNPPopupDemoViewController case "ClosureBack": nextView = LWRootViewController() default: nextView = storyboard.instantiateViewControllerWithIdentifier("SCLAlert") as! SCLAlertDemoViewController } self.navigationController?.pushViewController(nextView,animated: true) } func tableView(tableView: UITableView,heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat { return 50 }
注意事项:
既然创建了UITableView,需要在Class继承后面加上Delegate和DataSource
swift
class MainViewController: UIViewController,UITableViewDelegate,UITableViewDataSource
总结:
这样我们就成功创建了一个纯代码创建的UITableView以及调用了自定义的Cell,是不是很简单!
下面就是效果图(我的GitHub )
原文链接:http://www.jianshu.com/p/150ba0779cc0