UITableView/表格视图
一、UITableView的结构
1、UITableView派生自UIScrollView
NS_CLASS_AVAILABLE_IOS(2_0) @interface UITableView : UIScrollView <NSCoding>
2、UITableView的结构如下:
(1)背景是滚动视图
(2)每个横向的表格称为Cell(UITableViewCell)
注:①每个cell既可以存储数据,也可以接受选中的事件,我们可以选中某个cell时,下拉列表,也可以选中某个cell时,推出新的页面。在编辑模式下还可以选中多个cell,批量删除等。
②通过自定义cell,更可以在cell上添加任何需要的视图。
③多个cell可以进行分组管理。
3、UITableView的cell重用
UITableView只会添加所需的一定数量的cell,仅仅比同屏显示的cell多一点,当tableView滚动时,重复使用这些cell,刷新内容。
4、UITableView具有编辑状态和普通状态两种模式。很多属性方法都只在某一种模式下生效
二、UITableView的基本属性和方法(二、三、四截图为例题截图)
1、创建tableView,style表示的风格
_tableView=[[UITableView alloc] initWithFrame:CGRectMake(0, 100, self.view.frame.size.width, self.view.frame.size.height-100) style:UITableViewStylePlain];
2、设置委托和数据源的回调方法
_tableView.delegate=self;
_tableView.dataSource=self;
3、设置背景色(继承与UIScrollView)
_tableView.backgroundColor=[UIColor blackColor];
4、设置分割线的颜色
_tableView.separatorColor=[UIColor redColor];
5、设置分割线的样式(默认线性)
_tableView.separatorStyle=UITableViewCellSeparatorStyleSingleLine;
UITableViewCellSeparatorStyleNone, 无样式
UITableViewCellSeparatorStyleSingleLine, 线性样式(默认)
UITableViewCellSeparatorStyleSingleLineEtched // This separator style is only supported for grouped style table views currently 用于grouped
6、设置为多项选择,默认是NO就是默认单选
_tableView.allowsMultipleSelection=NO;
7、添加tableView
[self.view addSubview:_tableView];
8、打开编辑模式
常见方法:_tableView.editing=YES;
完善方法:if (_tableView.editing) {
_tableView.editing=NO;(_tableView.isEditing==NO也是这个意思)
}else{
_tableView.editing=YES;
}
9、刷新数据
[_tableView reloadData];
10、设置可以多选编辑
_tableView.allowsMultipleSelectionDuringEditing=YES;
11、允许编辑
[_tableView setEditing:YES animated:YES];
12、设置多选删除(单选删除见四(二)UITableViewDataSource)
- (void)mutiEditClick:(UIBarButtonItem *)item
{
获取选中的cell
NSArray *indexPaths=[_tableView indexPathsForSelectedRows];
for (NSInteger i=[indexPaths count]-1; i>=0; i--) {
NSIndexPath *indexpath=[indexPaths objectAtIndex:i];
[[_dataArray objectAtIndex:indexpath.section] removeObjectAtIndex:indexpath.row];
if([_dataArray objectAtIndex:indexpath.section]==0){
[_dataArray removeObjectAtIndex:indexpath.section];
}
}
[_tableView deleteRowsAtIndexPaths:indexPaths withRowAnimation:UITableViewRowAnimationNone];
}
13、(1)右边索引标注背景色
_tableView.sectionIndexBackgroundColor=[UIColor blackColor];
(2)索引的颜色
_tableView.sectionIndexColor=[UIColor redColor];
(3)点击索引后的背景色
_tableView.sectionIndexTrackingBackgroundColor=[UIColor blueColor];
注:通过代理方法创建tableView
三、UITableView的数据源与Cell
NS_CLASS_AVAILABLE_IOS(2_0) @interface UITableViewCell : UIView <NSCoding, UIGestureRecognizerDelegate>
1、创建数据源(继承与UIView)
_tableDate=[[NSMutableArray alloc] init];
for (int i=0; i<5; i++) {
NSMutableArray *rowData=[[NSMutableArray alloc] init];
for (int j=0; j<10; j++) {
NSString *str=[NSString stringWithFormat:@"这是第%d行,第%d列",i,j];
[rowData addObject:str];
}
注:addObject会自动保留引用计数,需要释放
[_tableDate addObject:rowData];
[rowData release];
}
注:下面介绍cell的代码全写在(- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath);
该函数属于UITableViewDataSource;
2、当我们的cell从下方滚动到屏幕上的时候,会委托这个方法来找相应的cell,如果找到了,就直接用,改变一下数据源,如果没找到,我们来创建
static NSString *str=@"cell";
3、从我们的回收队列里找名字为cell的UITableViewCell
UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:str];
4、如果cell为空,就是说,从我们上面的回收队列没有找到相应的cell,我们就来创建cell(UITableView的cell重用)
if (!cell) {
第一个参数是cell的风格(影响添加的信息),第二个参数是cell的名字
cell=[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:str];
UITableViewCellStyleDefault,// Simple cell with text label and optional image view (behavior of UITableViewCell in iPhoneOS 2.x)
UITableViewCellStyleValue1,// Left aligned label on left and right aligned label on right with blue text (Used in Settings)
UITableViewCellStyleValue2,// Right aligned label on left with blue text and left aligned label on right (Used in Phone/Contacts)
UITableViewCellStyleSubtitle// Left aligned label on top and left aligned label on bottom with gray text (Used in iPod).
}
5、添加cell上的文字
(1)只有列的时候
cell.textLabel.text=[_tableDate objectAtIndex:indexPath.row];
(2)说明第几组第几列的时候
cell.textLabel.text=[[_tableDate objectAtIndex:indexPath.section] objectAtIndex:indexPath.row];
6、改变字体
cell.textLabel.font=[UIFont systemFontOfSize:15];
7、改变字体颜色
cell.textLabel.textColor=[UIColor greenColor];
8、改变高亮时候的颜色
cell.textLabel.highlightedTextColor=[UIColor yellowColor];
9、(添加信息)跟cell的风格有关(Style)
cell.detailTextLabel.text=[NSString stringWithFormat:@"这是第%ld个cell详情",indexPath.row];
10、改变添加的信息颜色
cell.detailTextLabel.textColor=[UIColor greenColor];
11、改变添加的信息高亮时候的颜色
cell.detailTextLabel.highlightedTextColor=[UIColor yellowColor];
12、添加左边一个图片
cell.imageView.image=[UIImage imageNamed:@"0.png"];
13、设置cell背景色(继承与UIView)
cell.backgroundColor=[UIColor orangeColor];
14、设置选中的颜色(高亮状态),iOS7以前,默认是蓝色,之后是灰色
UIView *view=[[UIView alloc] init];
cell.selectedBackgroundView=view;
view.backgroundColor=[UIColor redColor];
15、右边标志
cell.accessoryType=UITableViewCellAccessoryNone;
UITableViewCellAccessoryNone, // don't show any accessory view 默认无
UITableViewCellAccessoryDisclosureIndicator, // regular chevron. doesn't track 右边是右箭头(可以往前推)
UITableViewCellAccessoryDetailDisclosureButton, // info button w/ chevron. tracks 右边是圈i(详情)带右箭头
UITableViewCellAccessoryCheckmark, // checkmark. doesn't track 右边是对勾
UITableViewCellAccessoryDetailButton NS_ENUM_AVAILABLE_IOS(7_0) // info button. tracks 右边是圈i(详情)
16、返回cell
return cell;
四、UITableView的协议
(一)UITableViewDelegate
@protocol UITableViewDelegate<NSObject, UIScrollViewDelegate>
1、选中事件
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
取消被点击后的效果(就是点击选择之后一直不高亮状态),这句话存在时不进行下个函数方法
animated是YES打开动画效果
[_tableView deselectRowAtIndexPath:indexPath animated:YES];
(1)只有列的时候
NSLog(@"%@",cell.textLabel.text=[_tableDate objectAtIndex:indexPath.row]);
(2)说明第几组第几列的时候
NSLog(@"%@",[[_tableDate objectAtIndex:indexPath.section] objectAtIndex:indexPath.row]);
}
2、取消事件(也就是第1条所说的取消被点击后的效果)
- (void)tableView:(UITableView *)tableView didDeselectRowAtIndexPath:(NSIndexPath *)indexPath
{
NSLog(@"取消了第%ld个cell",indexPath.row);
}
3、动态调整cell高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
这里高度默认是44个坐标
return 60.0f;
}
4、调整顶部高度
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
return 60;
}
5、调整底部高度
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section
{
return 20;
}
6、添加到分组间的View
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
默认高度44个坐标
UIView *view=[[UIView alloc] initWithFrame:CGRectMake(0, 0, tableView.frame.size.width, 44)];
view.backgroundColor=[UIColor blueColor];
UILabel *label=[[UILabel alloc] initWithFrame:CGRectMake(0, 0, view.bounds.size.width, view.bounds.size.height)];
label.text=[NSString stringWithFormat:@"第%ld组cell",section];
label.textAlignment=NSTextAlignmentCenter;
[view addSubview:label];
[label release];
return view;
}
7、设置组号的View
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section;
8、把编辑模式里默认的Delete键名改成"删除"
- (NSString *)tableView:(UITableView *)tableView titleForDeleteConfirmationButtonForRowAtIndexPath:(NSIndexPath *)indexPath
{
return @"删除";
}
(二)UITableViewDataSource
@protocol UITableViewDataSource<NSObject>
1、设置多少组(一组与创建的数据源有关)
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return [_tableDate count];
}
2、设置一组多少列,section是组号,默认是1(tableView(问我们)这个组里面要返回多少个cell)
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return [[_tableDate objectAtIndex:section] count];
}
3、创建cell
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;
4、单选删除
第二个参数是编辑的样式(如:插入、删除)第三个参数这里是删除哪一行
- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath
{
if (editingStyle==UITableViewCellEditingStyleDelete) {
先删除数组中的元素
[[_dataArray objectAtIndex:indexPath.section] removeObjectAtIndex:indexPath.row];
删除这一行
[_tableView deleteRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationNone];
}
}
5、(1)允许移动
- (BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)indexPath
{
return YES;
}
只有实现了上个移动回调,下一个函数方法才能实现
(2)移动cell
第二个参数是将要移动的cell,第三个参数是目标cell
- (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath
{
NSDictionary *dic=_dataArray[sourceIndexPath.section][sourceIndexPath.row];
//保留引用计数,remove会减少引用计数
[dic retain];
[_dataArray[sourceIndexPath.section]removeObjectAtIndex:sourceIndexPath.row];
[_dataArray[destinationIndexPath.section] insertObject:dic atIndex:destinationIndexPath.row];
}
6、添加索引指示指示(必须是组展开的情况下)
- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView
{
return @[@"圣",@"海",@"火",@"美"];
}
7、点击右侧索引表项时调用
- (NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index
{
return index;
}
五、例题