UITableView控件使用
使用UITableView,在控件库中,拖拽一个Table View到ViewController中,在Controller的后台代码中需要继承UITableViewDelegate和UITableViewDataSource的协议。
重写方法
tableView(_:numberOfRowsInSection)
此方法是UITableViewDataSource协议的方法,返回tableView加载的行数。
实例代码
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
// Return the number of rows in the section.
//返回table中每个节点行数,在tableView中还可以使用节,就是组。后续介绍组的用法
return restaurantNames.count
}
tableView(_:cellForRowAtIndexPath)
此方法是UITableViewDatSource协议的方法,该方法中实现如何加载TableView中的数据。
实例代码
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) ->UITableViewCell {
//这里是的Cell是在Storyboard中设置的tableViewCell的Identifier
let cellIdentifier = "Cell"
//这就是获取单元格
let cell = tableView.dequeueReusableCellWithIdentifier(cellIdentifier, forIndexPath:
indexPath) as UITableViewCell
// Configure the cell...
cell.textLabel.text = restaurantNames[indexPath.row]
return cell
}
dequeueReusableCellWithIdentifier:从queue中取回一个名称是[identifier]的可用的单元格。这里为什么是从列队中取:看如下解释:
设置dataSource和delegate
两种方式设置tableView的dataSource和delegate
- 在Storyboard中右键选择tableView
将dataSource和delegate拖动到当前的ViewController上
- 在Controller的代码中,链接tableView
@IBOutlet var tableView: UITableView!
然后再viewDidLoad的方法中设置tableView的dataSource和delegate
tableView.dataSource = self
tableView.delegate = self
设置单元格的缩略图
在tableView(_:cellForRowAtIndexpath)的方法中
cell.imageView.image = UIImage(name:"imagename")
隐藏状态栏
override func prefersStatusBarHidden() -> Bool {
return true
}
自定义单元格
修改Custom属性
在storyboard中选择tableViewCell,在属性索引器中,将Style的属性变更为Custom
修改tableView行高
修改单元格行高
自定义单元格样式
在控件库中,可以拖拽控件到单元格中拜访出自己想要的格式
为自定义单元格创建类文件
在工程中添加新文件(command + N),选择Cocoa Touch Class,在SubClass of中选择UITableViewCell,不需要xib文件。
在类文件中定义控件
@IBOutlet weak var nameLabel: UILabel!
@IBOutlet weak var locationLabel: UILabel!
@IBOutlet weak var typeLabel: UILabel!
@IBOutlet weak var thumbnailImageView: UIImageView!
关联类文件和控件定义
设置tableViewCell的class为新建的class
设置控件关联
关联后结果
修改获取单元格的方法
在tableView(_:cellForRowAtIndexpath)的方法中,把原来的获取单元格的方法修改
let cell = tableView.dequeueReusableCellWithIdentifier(cellIdentifier, forIndexPath:
indexPath) as UITableViewCell
修改后
let cell = tableView.dequeueReusableCellWithIdentifier(cellIdentifier, forIndexPath:
indexPath) as CustomTableViewCell
CustomTableViewCell就是我们新定义的类
设置单元格
cell.nameLabel.text = restaurantNames[indexPath.row]
cell.thumbnailImageView.image = UIImage(named: restaurantImages[indexPath.row])
如何设置图片圆角
代码实现:
cell.thumbnailImageView.layer.cornerRadius = cell.thumbnailImageView.frame.size.width / 2
cell.thumbnailImageView.clipsToBounds = true
clipsToBounds是一个属性开关,只有打开,圆角设置才有效
设置实现:
选择ImageView控件,做如下设置
在User Defined Runtime Attributes中添加key 和 value。 这时不需要设置开关。
同样,我们可以在这里修改backgroundColor,Fond…
单元格选择和UIAlertController
在UITableViewDelegate的协议中,有两个方法
tableView(_:willSelectRowAtIndexpath) 选择前
tableView(_:didSelectRowAtIndexpath) 选择后
设置单元格选中
let cell = tableView.cellForRowAtIndexPath(indexPath)
通过indexPath来获取单元格的时候会产生一个Bug,前面我们有讲过,Cell的加载是通过queue中获取,受queue的印象,在获取cell的时候,会有错位的Bug,解决这个问题的方法是通过控制数据源来解决。
通过设置cell的accessoryType来设置cell的选中状态
cell.accessoryType = UITableViewCellAccessoryType.Checkmark
UIAlertController的使用
实例代码我们写在tableView(_:didSelectRowAtIndexpath)的方法中
override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath:
NSIndexPath) {
// Create an option menu as an action sheet
let optionMenu = UIAlertController(title: nil, message: "What do you want to do?",
preferredStyle: .ActionSheet)
// Add actions to the menu
let cancelAction = UIAlertAction(title: "Cancel", style: .Cancel, handler: nil)
optionMenu.addAction(cancelAction)
// Display the menu
self.presentViewController(optionMenu, animated: true, completion: nil)
}
UIAlertControllerStyle有两种,
.Alert
.ActionSheet
1、使用AlertController首先是要创建UIAlertController对象
let optionMenu = UIAlertController(title: nil, message: "What do you want to do?",
preferredStyle: .ActionSheet)
2、然后创建UIAlertAction
let cancelAction = UIAlertAction(title: "Cancel", style: .Cancel, handler: nil)
3、把action添加到Controller中,如果AlertControllerStyole是.ActionSheet,那么在AlertController中可以添加多个Action
optionMenu.addAction(cancelAction)
4、呈现AlertController
// Display the menu
self.presentViewController(optionMenu, animated: true, completion: nil)
在创建action中,有关handler,这里是个委托,可以用闭包实现,也可以做个函数传递函数名称,就是在action点击后触发的委托
let isVisitedAction = UIAlertAction(title: "I‘ve beenhere", style: .Default, handler: {
(action:UIAlertAction!) -> Void in
let cell = tableView.cellForRowAtIndexPath(indexPath)
cell?.accessoryType = .Checkmark
self.restaurantIsVisited[indexPath.row] = true
})
简化闭包写法
let isVisitedAction = UIAlertAction(title: "I‘ve beenhere", style: .Default) {
//$0表示第一个参数,这里关闭闭包用法可以参考语法笔记
let sender = $0
let cell = tableView.cellForRowAtIndexPath(indexPath)
cell?.accessoryType = .Checkmark
self.restaurantIsVisited[indexPath.row] = true
}
UIAlertView
UIAlertView类似UIAlertController中的Action,使用相对简单
let alertView = UIAlertView(title:"", message:"", delegate:nil, cancelButtonTitle:"")
alertView.show()
TableRow的删除
在UITableViewDataSource的协议中有个方法
tableView(_:commitEditingStyle:forRowAtIndexPath
在ViewController的类中重写该方法,不做任何实现可以看到如下效果
override func tableView(tableView: UITableView,
commitEditingStyle editingStyle:UITableViewCellEditingStyle,
forRowAtIndexPath indexPath: NSIndexPath) {
}
当点击删除按钮,如果要做相关操作,可以在上述方法中实现
实例代码:
override func tableView(tableView: UITableView, commitEditingStyle editingStyle:
UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) {
if editingStyle == .Delete {
// Delete the row from the data source
self.restaurantNames.removeAtIndex(indexPath.row)
self.restaurantLocations.removeAtIndex(indexPath.row)
self.restaurantTypes.removeAtIndex(indexPath.row)
self.restaurantIsVisited.removeAtIndex(indexPath.row)
self.restaurantImages.removeAtIndex(indexPath.row)
//删除row
self.tableView.deleteRowsAtIndexPaths([indexPath], withRowAnimation: .Fade)
}
//重新加载tableView
self.tableView.reloadData()
}
添加RowAction
在IOS 8 SDK中有个新成员UITableViewRowAction,利用这个新成员,我们可以在Row上面有更多的操作
- 重写UITableViewDataSource的一个方法tableView(_:editActionsForRowAtIndexPath)
- 创建UITableViewRowAction
var shareAction = UITableViewRowAction(style: UITableViewRowActionStyle.Default, title:
"Share", handler:nil)
- 实现Action后的委托
- 返回RowAction
实例代码:
override func tableView(tableView: UITableView,
editActionsForRowAtIndexPath indexPath:
NSIndexPath) -> [AnyObject] {
var shareAction = UITableViewRowAction(style: UITableViewRowActionStyle.Default, title:
"Share", handler: { (action:UITableViewRowAction!, indexPath:NSIndexPath!) -> Void in
let shareMenu = UIAlertController(title: nil, message: "Share using",
preferredStyle: .ActionSheet)
let twitterAction = UIAlertAction(title: "Twitter", style:
UIAlertActionStyle.Default, handler: nil)
let facebookAction = UIAlertAction(title: "Facebook", style:
UIAlertActionStyle.Default, handler: nil)
let emailAction = UIAlertAction(title: "Email", style: UIAlertActionStyle.Default,
handler: nil)
let cancelAction = UIAlertAction(title: "Cancel", style: UIAlertActionStyle.Cancel,
handler: nil)
shareMenu.addAction(twitterAction)
shareMenu.addAction(facebookAction)
shareMenu.addAction(emailAction)
shareMenu.addAction(cancelAction)
self.presentViewController(shareMenu, animated: true, completion: nil)
}
)
var deleteAction = UITableViewRowAction(style: UITableViewRowActionStyle.Default,
title: "Delete",handler: { (action:UITableViewRowAction!, indexPath:NSIndexPath!) -> Void in
// Delete the row from the data source
self.restaurantNames.removeAtIndex(indexPath.row)
self.restaurantLocations.removeAtIndex(indexPath.row)
self.restaurantTypes.removeAtIndex(indexPath.row)
self.restaurantIsVisited.removeAtIndex(indexPath.row)
self.restaurantImages.removeAtIndex(indexPath.row)
self.tableView.deleteRowsAtIndexPaths([indexPath], withRowAnimation: .Fade)
}
)
return [deleteAction, shareAction]
}