UI：UITableView表视图

2023-01-04 13:13:50

表视图 UITableView,iOS中最重要的视图,随处可⻅见。表视图通常⽤用来管理⼀一组具有相同数据结构的数据。

UITableView继承⾃自UIScrollView,所以可以滚动，表视图的每⼀一条数据都是显⽰示在UITableViewCell对象中，表视图可以分区显⽰示数据,每个分区称为⼀一个section,每⼀一⾏行称为 row,编号都是从0开始

表视图的创建（重要属性）

style样式：plain、group

分隔线样式：separatorStyle

分隔线颜色：separateColor

行高： rowheight

去掉点击后产生的灰色背景色：cell.selectionStyle=UITableViewCellSelectionStyleNone;

DataSource数据源

我们需要给tableView指定⼀一个数据源,它负责给tableView提供数据需要实现协议中两个必须实现的⽅方法

- (NSInteger)tableView:(UITableView *)tableView

我们需要给tableView指定⼀一个数据源,它负责给tableView提供数据

需要实现协议中两个必须实现的⽅方法:

-numberOfRowsInSection:(NSInteger)section;

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;

UITableView中每⼀一个单元格,被称为⼀一个cell

(UITableViewCell)。系统预置了4种(枚举)样式的cell。不同样式的cell包含的控件有细微差别。

设置图片：imageView

设置文本：textLable

指定选中效果：selectionStyle

指定辅助效果样式：accessoryType

表视图的重用机制

UITableView靠mutableSet来实现重⽤用功能

出屏幕的cell会被添加到mutableSet中,进⼊入屏幕的cell,先从set中获取,如果获取不到,才创建⼀一个cell。在cell显⽰示之前,给cell赋上相应的内容。

cell的reuseIdentifier是重⽤用的关键。

表视图的配置

NSIndesPath: row 、section

+（NSIndesPath *）indexPathForRow：（NSUInteger）row inSection:(NSUInteger)section;

多个分区

tableView默认是⼀一个分区,可以设置多个分区 tableView的plain、group样式决定分区的样式不同

每个分区可以设置区头区尾

tableView默认是⼀一个分区,可以设置多个分区
- (NSInteger)numberOfSectionsInTableView:(UITableView*)tableView; //分区数

- (NSString *)tableView:(UITableView *)tableView

tableView的plain、group样式决定分区的样式不同

titleForHeaderInSection:(NSInteger)section; //分区头标题

- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView; //右侧竖排索引

自定义头尾


Delegate

- (CGFloat)tableView:(UITableView *)tableView

heightForHeaderInSection:(NSInteger)section;

- (CGFloat)tableView:(UITableView *)tableView

heightForFooterInSection:(NSInteger)section;

- (UIView *)tableView:(UITableView *)tableView

viewForHeaderInSection:(NSInteger)section;

- (UIView *)tableView:(UITableView *)tableView

viewForFooterInSection:(NSInteger)section;

自定义头尾

单元格的高度与选中

Delegate

- (void)tableView:(UITableView *)tableView

didSelectRowAtIndexPath:(NSIndexPath *)indexPath;

- (CGFloat)tableView:(UITableView *)tableView

heightForRowAtIndexPath:(NSIndexPath *)indexPath

单元格的高度与选中

参考1 参考2 参考3

代码：

#import "ViewController.h"

@interface ViewController ()<UITableViewDataSource,UITableViewDelegate>

@property (weak, nonatomic) IBOutlet UITableView *tableView;

@end

@implementation ViewController

- (void)viewDidLoad {

    [super viewDidLoad];

      self.tableView.rowHeight = ;

    // 设置tableView的分割线的样式

//    self.tableView.separatorStyle = UITableViewCellSeparatorStyleSingleLineEtched;//不是很明显的线

    self.tableView.separatorStyle = UITableViewCellSeparatorStyleSingleLine;//比较明显的线条

//    self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;//没有分割线

    //设置分割线的背景颜色

    self.tableView.separatorColor = [UIColor redColor];

    //设置分割线的左右距离

    self.tableView.separatorInset = UIEdgeInsetsMake(, , , );

    //分割线的宽度 ???

    /**

    下面的两个：一个表头，一个表尾都是与分组没有任何关系的，只与tableView 的顶部与下部有关系

     */

    //设置一下表头的视图，一般用来做一个轮播图片，这个图片要在表头的上面

    UIView * view = [[UIView alloc] initWithFrame:CGRectMake(, , self.view.bounds.size.width, )];

    view.backgroundColor = [UIColor blueColor];

    self.tableView.tableHeaderView = view;

    //设置一下表尾的视图，一般用于上拉刷新，这个要在表尾标题的下面

    UIView * view2 = [[UIView alloc] initWithFrame:CGRectMake(, , self.view.bounds.size.width, )];

    view2.backgroundColor = [UIColor redColor];

    self.tableView.tableFooterView = view2;

}

//设置表的表头的标题

-(NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{

    return @"我是表头标题";

}

//设置表的表尾巴的标题

-(NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section{

    return @"我是表的表尾巴";

}

- (void)didReceiveMemoryWarning {

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{

    return ;

}

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

    UITableViewCell * cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:nil];

    //添加的cell右边的 button

    cell.accessoryView = [UIButton buttonWithType:UIButtonTypeContactAdd];

    //添加cell右边的 按钮

//    cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;

    //添加 cell右边的对号，用于提示用户完成一定的操作

//    cell.accessoryType = UITableViewCellAccessoryCheckmark;

    //添加 cell 右边的 按钮 + 箭头

//    cell.accessoryType = UITableViewCellAccessoryDetailDisclosureButton;

    //添加cell 一个 switch 控件

//    UISwitch * swit = [[UISwitch alloc] init];

//    cell.accessoryView = swit;

//    [swit addTarget:self action:@selector(valuechange:) forControlEvents:UIControlEventValueChanged];

    /*

     //设置cell 的背景颜色

    UIImage * image  = [UIImage imageNamed:@"img_01.png"];

    UIImage * image2 = [UIImage imageNamed:@"img_02.png"];

    cell.backgroundView = [[UIImageView alloc] initWithImage:image];//没有选中

    //选中

    cell.selectedBackgroundView = [[UIImageView alloc] initWithImage:image2];

     */

    cell.textLabel.text = @"你舅舅家";

    return cell;

}

-(void)valuechange:(UISwitch *)swit{

    NSLog(@"选择改变了");

}

//专门为accessoryType服务，对自定义控件不响应

-(void)tableView:(UITableView *)tableView accessoryButtonTappedForRowWithIndexPath:(NSIndexPath *)indexPath{

    NSLog(@"我是cell 右边的按钮");

}

//取消选中行的事件

-(void)tableView:(UITableView *)tableView didDeselectRowAtIndexPath:(NSIndexPath *)indexPath{

    NSLog(@"取消点击事件");

}

//点中某一cell 的事件

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

    NSLog(@"确实选中了某一行");

}

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{

    return ;

}

@end

tableView 应用demo

码农公寓

相关文章