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后

请添加图片描述

总结

以上就是本篇文章的全部内容。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值