您的位置:首页 > 产品设计 > UI/UE

iOS开发 ----- UITableView

2015-09-22 20:00 459 查看

UITableView

简介

用于展示大量数据的控件
也是iOS开发过程中最常用的控件
继承与UIScrollView

有两个代理
@property (nonatomic, weak, nullable) id <UITableViewDataSource> dataSource;
@property (nonatomic, weak, nullable) id <UITableViewDelegate> delegate;


相关属性

//一般都是展示相关数据,对Tableview的属性设置的不多,最重要的就是遵守上边这两个协议,实现协议的发那方法

//tableView的样式

@property (nonatomic, readonly) UITableViewStyle style;
UITableViewStylePlain,
UITableViewStyleGrouped


常用协议代理方法

//设置行高,默认是44
-(CGFloat)tableView:(nonnull UITableView *)tableView heightForRowAtIndexPath:(nonnull NSIndexPath *)indexPath
{
/*
一般设置成固定的
*/
return 50;
}

//选中某个区的某一行的时候出发的方法
//tableView有区和行的概念
//也就是说,一个tableView可以有很多区,每个区可以有很多行
//在这个方法中,indexPath.section可以拿到选中的那个行所在的区
//indexPath.row可以拿到选中的那个行的行数
//这里常用的就是跳转到下一个页面
-(void)tableView:(nonnull UITableView *)tableView didSelectRowAtIndexPath:(nonnull NSIndexPath *)indexPath
{
//区 行
//每个区的行都是从0开始
//通过不同区的不同行来实现不同界面的跳转
NSLog(@"selected section : %ld row : %ld",indexPath.section , indexPath.row);

[tableView deselectRowAtIndexPath:indexPath animated:YES];

DetialViewController * det = [[DetialViewController alloc]init];
det.model = [_dataArray objectAtIndex:indexPath.row];
[self.navigationController pushViewController:det animated:YES];

}

//设置这个tableView有多少个区
-(NSInteger)numberOfSectionsInTableView:(nonnull UITableView *)tableView
{
return 1;
}

//设置某个区有多少行
-(NSInteger)tableView:(nonnull UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
if(section == 0)
{
return 5;
}else
{
return 10;
}
}

//展示数据的主要方法
//该方法中用到了重用机制
//可以吧整个tableView的元素处在一个队列中
//屏幕负责展示队列的元素
//比如向上滚动,下边出来新的元素
//这个新的元素并不一定是新创建的,可能是向上滚动的时候,顶部的元素离开屏幕
//然后就会回到这个队列里
//下边的元素进来的时候,系统会先去这个队列找已经不被屏幕展示的数据
//然后把这个对象拿过来,然后,更改对象的内容,然后在下边展示
//这样做的好处时节省内存,列表很长的时候不会占用大量内存,性能好

-(nonnull UITableViewCell *)tableView:(nonnull UITableView *)tableView cellForRowAtIndexPath:(nonnull NSIndexPath *)indexPath
{

//设置重用标识符
static NSString * appCell = @"cell";
//根据标识符从 队列里 拿已经不用的cell
UITableViewCell * mainCell = [tableView dequeueReusableCellWithIdentifier:appCell];
//如果拿不到,就创建新的cell
if (mainCell == nil) {

mainCell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleValue1
reuseIdentifier:appCell];
}

//cell的样式,枚举值
//UITableViewCellStyleValue1

//正常的样式
mainCell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
//选中时的样式
mainCell.selectionStyle = UITableViewCellSelectionStyleGray;

mainCell.textLabel.text = @"title";
//cell的详细信息
mainCell.detailTextLabel.text = "详细信息"
//图片
mainCell.imageView.image = [UIImage imageNamed:"index.png"];

}

// 设置分区title
-(NSString *)tableView:(nonnull UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
if (section == 0) {
return @"section1";
}else
{
return @"section2";
}
return nil;
}

//设置分区尾
-(NSString *)tableView:(nonnull UITableView *)tableView titleForFooterInSection:(NSInteger)section
{
return @"foot";
}


UITableView2

TableView补充,tableView的自定义样式,官方建议添加到contentView上,所以,应该做个view,覆盖原来的view,貌似,cell时放在一个ScrollView上的,有一定的用户交互逻辑,有待研究

分割线样式

_tableView.separatorStyle = UITableViewCellSeparatorStyleSingleLine;


分割线缩进

_tableView.separatorInset = UIEdgeInsetsMake(0, 50, 0, 0);


TableView是否可以在编辑状态的时候多选

//tableView是否可以在编辑状态的时候多选
_tableView.allowsMultipleSelectionDuringEditing = YES;


自定义表头,也就是整个TableView的最上边

UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 30)];
label.text = @"表头";
label.backgroundColor = [UIColor redColor];
_tableView.tableHeaderView =  label;


自定义Section的头部,相应的,也可以自定义尾部

-(UIView *)tableView:(nonnull UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 100, 30)];
label.backgroundColor = [UIColor greenColor];
label.text = @"这里是自定义的标头";
return label;
}


设置是否可以编辑

-(void)setEditing:(BOOL)editing animated:(BOOL)animated
{
[super setEditing:editing animated:animated];
[_tableView setEditing:editing animated:animated];
}


返回编辑的样式,系统提供的几种样式

-(UITableViewCellEditingStyle)tableView:(nonnull UITableView *)tableView editingStyleForRowAtIndexPath:(nonnull NSIndexPath *)indexPath
{
return UITableViewCellEditingStyleDelete;
}


完成编辑之后所做的,通常是reload

-(void)tableView:(nonnull UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(nonnull NSIndexPath *)indexPath
{

[_tableView reloadData];

}


选中某一行时调用的方法

-(void)tableView:(nonnull UITableView *)tableView didSelectRowAtIndexPath:(nonnull NSIndexPath *)indexPath
{

}


取消选中时调用的方法

-(void)tableView:(nonnull UITableView *)tableView didDeselectRowAtIndexPath:(nonnull NSIndexPath *)indexPath
{
[_selectCell removeObject:indexPath];
}


侧边栏的内容,一般比较丑…

-(nullable NSArray<NSString *> *)sectionIndexTitlesForTableView:(nonnull UITableView *)tableView
{
NSMutableArray * arr = [[NSMutableArray alloc]init];

for (int i = 0; i < 26; i++) {
NSString * string = [NSString stringWithFormat:@"%c",'A'+i];
[arr addObject:string];
}
if (_searchController.active) {
return nil;
}
return arr;
}


自定义滑动时的按钮

一种简单的方式添加cell滑动之后的按钮,默认只有删除,这种方式可以很方便的添加,不过这种同样可以自定制

-(nullable NSArray<UITableViewRowAction *> *)tableView:(nonnull UITableView *)tableView editActionsForRowAtIndexPath:(nonnull NSIndexPath *)indexPath
{
UITableViewRowAction * action1 = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleDestructive title:@"del" handler:^(UITableViewRowAction * __nonnull action, NSIndexPath * __nonnull indexPath) {

[[_dataArr objectAtIndex:indexPath.section] removeObjectAtIndex:indexPath.row];

[_tableView reloadData];

NSLog(@"点击了删除");
}];

action1.backgroundColor = [UIColor grayColor];

UITableViewRowAction * action2 = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleDestructive title:@"取消" handler:^(UITableViewRowAction * __nonnull action, NSIndexPath * __nonnull indexPath) {
NSLog(@"点击了取消");
}];

action2.backgroundColor = [UIColor greenColor];

UITableViewRowAction * action3 = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleDestructive title:@"添加" handler:^(UITableViewRowAction * __nonnull action, NSIndexPath * __nonnull indexPath) {
NSLog(@"点击了删除");
}];

action3.backgroundColor = [UIColor blueColor];

return @[action1,action2,action3];
}
[这是自己写的,有需要的可以下载,不足之处还请指点](https://github.com/xiao333ma/SwipeCell)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: