UI学习——UITableView

一、UITableView基础

1.基本概念

UITableView是iOS开发中的一个控件，用于展示列表数据。它类似于HTML中的表格（table），但更加强大和灵活。UITableView可以支持滚动、选中、插入、删除等各种操作，并且可以高度自定义。

2.基本用法

（1）创建UITableView实例；
（2）设置UITableView的delegate和dataSource；
（3）实现UITableViewDelegate和UITableViewDataSource协议中的方法；
（4）将UITableView添加到视图中。

ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController
<
//实现数据视图的普通协议
//数据视图的普通事件处理
UITableViewDelegate,
//实现数据视图的数据代理协议
//处理数据视图的数据代理
UITableViewDataSource
>
{
    //定义一个数据视图对象
    //数据视图用来显示大量相同格式的信息的视图
    //例如：电话通讯录、QQ好友、微信朋友圈
    UITableView* _tableview;
}

@end

ViewController.m

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    //创建数据视图
    //P1:数据视图的位置
    //P2:数据视图的风格
    //UITableViewStylePlain普通风格
    //UITableViewStyleGrouped分组风格
    _tableview = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
    //设置数据视图的代理对象
    _tableview.delegate = self;
    //设置数据视图的数据源对象
    _tableview.dataSource = self;
    [self.view addSubview:_tableview];
}

//下面三个函数是必须要实现的协议函数

//获取每组元素的行数
//程序在显示数据视图时会调用此函数
//函数返回值：表示每组元素的行数
//P1:数据视图对象本身
//P2:哪一组需要的行数
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 5;
}
// 设置数据视图的组数
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 5;
}
//创建单元格对象函数
- (UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    NSString* cellStr = @"cell";
    UITableViewCell* cell = [_tableview dequeueReusableCellWithIdentifier:cellStr];
    if (cell == nil) {
        //创建一个单元格对象
        //参数一：单元格样式
        //参数二：单元格的复用标记
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellStr];
    }
    //section表示组，row表示行
    NSString* str = [NSString stringWithFormat:@"第%ld组， 第%ld行", indexPath.section, indexPath.row];
    //将单元格的主文字内容赋值
    cell.textLabel.text = str;
    return  cell;
}

@end

二、UITableView协议

前面已经介绍了UITableView协议中三个必须实现的函数，下面介绍其协议中剩下可选择实现的函数。

//获取高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 100;
}

//获取头部标题
- (NSString*)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {
    return @"头部标题";
}

//获取每组尾部标题
-(NSString*)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section {
    return @"尾部标题";
}

//获取头部高度
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
    return 40;
}

//获取尾部高度
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {
    return 60;
}

下面是具体的代码实现：
ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController<UITableViewDataSource, UITableViewDelegate>
{
    //定义数据视图对象
    UITableView* _tableView;
    NSMutableArray* _arrayData ;
}

@end

ViewController.m

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    //创建数据视图对象
     _tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 40, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height) style:UITableViewStyleGrouped];
    //设置代理对象
    _tableView.delegate = self;
    //设置数据代理对象
    _tableView.dataSource = self;
    //数据视图显示
    [self.view addSubview:_tableView];
    _arrayData = [[NSMutableArray alloc] init];
    for (int i = 'A'; i <= 'Z'; i++) {
        //定义一个小数组
        NSMutableArray* arraySmall = [[NSMutableArray alloc] init];
        for (int j = 0; j <= 5; j++) {
            NSString* str = [NSString stringWithFormat:@"%c%d",i,j];
            [arraySmall addObject:str];
        }
        //生成一个二维数组
        [_arrayData addObject:arraySmall];
    }
}
//获取组数
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return _arrayData.count;
}
//获取每组的元素个数
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    NSInteger numRow = [[_arrayData objectAtIndex:section] count];
    return numRow;
}
- (UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    NSString* cellStr = @"cell";
    UITableViewCell* cell = [_tableView dequeueReusableCellWithIdentifier:cellStr];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellStr];
    }
    cell.textLabel.text = _arrayData[indexPath.section][indexPath.row];
    return  cell;
}
//获取高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 100;
}
//获取头部标题
- (NSString*)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {
    return @"头部标题";
}
//获取每组尾部标题
-(NSString*)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section {
    return @"尾部标题";
}
//获取头部高度
-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
    return 40;
}
//获取尾部高度
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section {
    return 60;
}
@end

三、UITableView高级协议和单元格

ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController<UITableViewDelegate, UITableViewDataSource>
{
    //数据视图
    UITableView* _tableView;
    //数据源
    NSMutableArray* _arrayData;
    //添加导航按钮
    UIBarButtonItem* _btnEdit;
    UIBarButtonItem* _btnFinish;
    UIBarButtonItem* _btnDelete;
    //设置编辑状态
    BOOL _isEdit;
}

@end

ViewController.m

_tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStyleGrouped];
    //自动调整子视图的大小
    _tableView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    //设置代理
    _tableView.delegate = self;
    _tableView.dataSource = self;
    //头部视图和尾部视图可以用来展示与整个列表相关的信息，例如搜索框、筛选器、广告等。它们的高度可以根据内容自动调整，也可以手动设置高度。可以通过UITableView的dataSource方法tableView(_:viewForHeaderInSection:)和tableView(_:viewForFooterInSection:)来设置头部视图和尾部视图，或者通过UITableView的属性tableHeaderView和tableFooterView来设置静态的头部视图和尾部视图。
    //数据视图的头部视图的设定
    _tableView.tableHeaderView = nil;
    //数据视图的尾部视图的设定
    _tableView.tableFooterView = nil;
    
    [self.view addSubview:_tableView];
    //初始化数据源数组
    _arrayData = [[NSMutableArray alloc] init];
    for (int i = 0; i < 20; i++) {
        NSString* str = [NSString stringWithFormat:@"A %d", i];
        [_arrayData addObject:str];
    }
    //当数据视图的数据源发生变化时，来更新数据视图，重新加载数据
    [_tableView reloadData];
    [self createBtn];
}
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return _arrayData.count;
}
- (UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    NSString* str = @"cell";
    //尝试获取可以复用的单元格
    //如果得不到则返回nil
    //复用单元格的条件是单元格的数量足够多使得能够充满屏幕
    UITableViewCell* cell = [_tableView dequeueReusableCellWithIdentifier:str];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:str];
    }
    //单元格文字赋值
    cell.textLabel.text = [_arrayData objectAtIndex:indexPath.row];
    //单元格添加子标题
    cell.detailTextLabel.text = @"子标题";
    NSString* istr = @"04.jpg";
    UIImage* image = [UIImage imageNamed:istr];
    //设置默认的图标信息
    cell.imageView.image = image;
    return  cell;
}
//设置单元格高度
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 60;
}
//创建按钮
- (void)createBtn {
    _isEdit = NO;
    _btnEdit = [[UIBarButtonItem alloc] initWithTitle:@"编辑" style:UIBarButtonItemStyleDone target:self action:@selector(pressEdit)];
    _btnFinish = [[UIBarButtonItem alloc] initWithTitle:@"完成" style:UIBarButtonItemStyleDone target:self action:@selector(pressFinish)];
    _btnDelete = [[UIBarButtonItem alloc] initWithTitle:@"删除" style:UIBarButtonItemStyleDone target:self action:@selector(pressDelete)];
    self.navigationItem.rightBarButtonItem = _btnEdit;
}
//当手指在单元格上移动时可以显示编辑状态
- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath {
    //删除数据源对应的数据
    [_arrayData removeObjectAtIndex:indexPath.row];
    //数据源更新
    [_tableView reloadData];
    NSLog(@"Delete!");
}
//选中单元格调用此协议函数
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"选中单元格！%ld %ld", (long)indexPath.section, (long)indexPath.row);
}
- (void)tableView:(UITableView *)tableView didDeselectRowAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"取消选中单元格！%ld %ld", (long)indexPath.section, (long)indexPath.row);
}
//单元格显示效果协议
- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath {
    //UITableViewCellEditingStyleDelete：删除，默认情况下为此状态
    //UITableViewCellEditingStyleInsert：插入
    //UITableViewCellEditingStyleNone：虚空
    //UITableViewCellEditingStyleDelete ｜UITableViewCellEditingStyleInsert：多选状态
    return UITableViewCellEditingStyleDelete;
}
- (void)pressEdit {
    _isEdit = YES;
    self.navigationItem.rightBarButtonItem = _btnFinish;
    [_tableView setEditing:YES];
    self.navigationItem.leftBarButtonItem = _btnDelete;
}
- (void)pressFinish {
    _isEdit = NO;
    self.navigationItem.rightBarButtonItem = _btnEdit;
    [_tableView setEditing:NO];
    self.navigationItem.leftBarButtonItem = nil;
}
- (void)pressDelete {
    
}

点击编辑按钮时

移动单元格时

点击delete后

总结

以上就是本篇文章的全部内容。文章来源地址https://www.toymoban.com/news/detail-785906.html

到了这里，关于UI学习——UITableView的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！