一、UITableView概述
UITableView继承自UIScrollView,可以表现为Plain和Grouped两种风格,分别如下图所示:
其中左边的是Plain风格的,右边的是Grouped风格,这个区别还是很明显的。
查看UITableView的帮助文档我们会注意到UITableView有两个Delegate分别为:dataSource和delegate。
dataSource是UITableViewDataSource类型,主要为UITableView提供显示用的数据(UITableViewCell),指定UITableViewCell支持的编辑操作类型(insert,delete和reordering),并根据用户的操作进行相应的数据更新操作,如果数据没有更具操作进行正确的更新,可能会导致显示异常,甚至crush。
delegate是UITableViewDelegate类型,主要提供一些可选的方法,用来控制tableView的选择、指定section的头和尾的显示以及协助完成cell的删除和排序等功能。
提到UITableView,就必须的说一说NSIndexPath。UITableView声明了一个NSIndexPath的类别,主要用来标识当前cell的在tableView中的位置,该类别有section和row两个属性,前者标识当前cell处于第几个section中,后者代表在该section中的第几行。
UITableView只能有一列数据(cell),且只支持纵向滑动,当创建好的tablView第一次显示的时候,我们需要调用其reloadData方法,强制刷新一次,从而使tableView的数据更新到最新状态。
二、UITableView使用demo接下来介绍大家使用UITableView写出如下界面:
首先是布局
布局中的TableView关联到.h中的UITableView:
IBOutlet UITableView *categoryTable;
其次是 .m文件中的颜色数据,默认勾选数据,这个循环有待优化,欢迎交流:
- (void) viewWillAppear:(BOOL)animated{
[super viewWillAppear:animated];
[colorArray addObject:[@{@"name":@"红色", @"color":@"ff0000", @"checked":@"0"} mutableCopy]];
[colorArray addObject:[@{@"name":@"橙色", @"color":@"#FF6600 ", @"checked":@"0"} mutableCopy]];
[colorArray addObject:[@{@"name":@"黄色", @"color":@"#FFFF00", @"checked":@"0"} mutableCopy]];
[colorArray addObject:[@{@"name":@"绿色", @"color":@"00ff00", @"checked":@"0"} mutableCopy]];
[colorArray addObject:[@{@"name":@"蓝色", @"color":@"0000ff", @"checked":@"0"} mutableCopy]];
[colorArray addObject:[@{@"name":@"紫色", @"color":@"#9900CC", @"checked":@"0"} mutableCopy]];
[colorArray addObject:[@{@"name":@"褐色", @"color":@"#663300", @"checked":@"0"} mutableCopy]];
if(AddTag){
[[colorArray objectAtIndex:0] setValue:@"1" forKey:@"checked"];
}else{
NSString *oldColor = [self.category valueForKey:@"color"];
for( int i =0;i<[colorArray count];i++){
NSMutableArray *colorInfo = [colorArray objectAtIndex:i];
NSString *newColor = [colorInfo valueForKey:@"color"];
if(![oldColor isEqualToString:newColor]){
//没找到当前颜色,则将颜色默认选择第一个
[[colorArray objectAtIndex:0] setValue:@"1" forKey:@"checked"];
continue;
}else{
//找到相同的颜色,将第一个颜色恢复未选,将和分类相同的颜色设为勾选项
[[colorArray objectAtIndex:0] setValue:@"0" forKey:@"checked"];
[[colorArray objectAtIndex:i]setValue:@"1" forKey:@"checked"];
self.selectedIndexPath = [NSIndexPath indexPathForRow:i inSection:1];
break;
}
}
}
}
接下来就是实现UITableView的关键代码了:
设置tableview中各section的header的高度,这里将第一个section的header的高度设为32.f
- (CGFloat) tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
if (section == 0) {
return 32.f;
}
return 0.f;
}
然后我们这里只设置第一个section的headerView:
- (UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
if (section == 0) {
UIView *sectionView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 32)];
[sectionView setBackgroundColor:[UIColor clearColor]];
UILabel *sec = [[UILabel alloc] initWithFrame:CGRectMake(20, 10, 64, 22)];
[sec setFont:[UIFont systemFontOfSize:14.f]];
[sec setBackgroundColor:[UIColor clearColor]];
[sec setText:@"分类名称"];
[sec setTextColor:[UIColor lightGrayColor]];
[sectionView addSubview:sec];
return sectionView;
}
return nil;
}
接下来设置当前UITableView的style为Grouped的section个数:
本例中因为布局重用,使用了一个BOOL型的tag,用于显示是否有删除按钮。
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
if(AddTag){
return 2;
}else{
return 3;
}
}
接下来设置每个section中数据的行数:
- (NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
if(section == 1){
return [colorArray count];
}else{
return 1;
}
}
设置每行的高度:
- (float) tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
return 44.f;
}
最关键的当然是设置UITableViewCell,这个有点像android中listView的baseAdatpter中的getView;
第一个section是个输入框,这个输入框设置了他的header,输入框的cell布局
InputCell.m:
#import "ZYTInputCell.h"
@implementation ZYTInputCell
@synthesize inputValue;
- (void)awakeFromNib {
// Initialization code
}
- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
[super setSelected:selected animated:animated];
// Configure the view for the selected state
}
+ (id) cell{
return [[[NSBundle mainBundle] loadNibNamed:@"ZYTInputCell" owner:self options:nil] objectAtIndex:0];
}
- (BOOL) textFieldShouldReturn:(UITextField *)textField{
[textField resignFirstResponder];
return YES;
}
@end
(UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
NSDictionary *dic = [colorArray objectAtIndex:indexPath.row];
if (indexPath.section == 0) {
static NSString *cellIdentitier1 = @"InputId";
ZYTInputCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentitier1];
if (cell == nil) {
cell = [ZYTInputCell cell];
}
[cell.inputValue setDelegate:self];
[cell.inputValue setPlaceholder:@"请输入分类名称"];
if(AddTag){
cell.inputValue.text = @"";
}else{
cell.inputValue.text = [self.category valueForKey:@"name"];
}
[cell setSelectionStyle:UITableViewCellSelectionStyleNone];
return cell;
}else if(indexPath.section == 1){
static NSString *cellIdentitier = @"category_cell";
ZYTSelectScheduleCategoryCell * cell = [tableView dequeueReusableCellWithIdentifier:cellIdentitier];
if (cell == nil) {
cell = [ZYTSelectScheduleCategoryCell cell];
}
[cell.categoryName setText:[dic valueForKey:@"name"]];
[cell.color setBackgroundColor:[UIColor hexStringToColor:[dic valueForKey:@"color"]]];
[cell.checked setHidden:NO];
if ([[dic valueForKey:@"checked"] integerValue] == 1) {
[cell.checked setHidden:NO];
}else{
[cell.checked setHidden:YES];
}
[cell setSelectionStyle:UITableViewCellSelectionStyleNone];
return cell;
}else{
static NSString *cellIdentitier = @"del_category_cell";
ZYTButtonCell * cell = [tableView dequeueReusableCellWithIdentifier:cellIdentitier];
if (cell == nil) {
cell = [ZYTButtonCell cell];
}
[cell.addCategoryBtn setTitle:@"删除分类" forState:UIControlStateNormal];
[cell.addCategoryBtn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
[cell.addCategoryBtn addTarget:self action:@selector(delCategory:) forControlEvents:UIControlEventTouchUpInside];
[cell setSelectionStyle:UITableViewCellSelectionStyleNone];
return cell;
}
}
然后是每个row被选中的处理代码:
- (void) tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
if (self.selectedIndexPath) {
if (self.selectedIndexPath.row != indexPath.row) { //如果当前所选和上次不一样
NSLog(@"当前所选和上次不一样");
//将上次的恢复为未选
[[colorArray objectAtIndex:self.selectedIndexPath.row] setValue:@"0" forKey:@"checked"];
[tableView reloadRowsAtIndexPaths:@[self.selectedIndexPath] withRowAnimation:UITableViewRowAnimationAutomatic];
//勾选这次选的
[[colorArray objectAtIndex:indexPath.row] setValue:@"1" forKey:@"checked"];
[tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationAutomatic];
self.selectedIndexPath = indexPath;
}
}
}