• iOS开发UI篇—UITableview控件简单介绍


    iOS开发UI篇—UITableview控件简单介绍

    一、基本介绍

    在众多移动应⽤用中,能看到各式各样的表格数据 。

    在iOS中,要实现表格数据展示,最常用的做法就是使用UITableView,UITableView继承自UIScrollView,因此支持垂直滚动,⽽且性能极佳 。

    UITableview有分组和不分组两种样式,可以在storyboard或者是用代码设置。

    二、数据展示

    UITableView需要⼀一个数据源(dataSource)来显示数据
    UITableView会向数据源查询一共有多少行数据以及每⼀行显示什么数据等

    没有设置数据源的UITableView只是个空壳

    凡是遵守UITableViewDataSource协议的OC对象,都可以是UITableView的数据源 

     

    展示数据的过程:

    (1)调用数据源的下面⽅法得知⼀一共有多少组数据
    - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView;

    (2)调用数据源的下面⽅法得知每一组有多少行数据
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;

    (3)调⽤数据源的下⾯⽅法得知每⼀⾏显示什么内容

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

    三、代码示例

    (1)能基本展示的“垃圾”代码

      1 #import "NJViewController.h"
      2 
      3 @interface NJViewController ()<UITableViewDataSource>
      4 @property (weak, nonatomic) IBOutlet UITableView *tableView;
      5 
      6 @end
      7 
      8 @implementation NJViewController
      9 
     10 - (void)viewDidLoad
     11 {
     12     [super viewDidLoad];
     13     // 设置tableView的数据源
     14     self.tableView.dataSource = self;
     15     
     16 }
     17 
     18 #pragma mark - UITableViewDataSource
     19 /**
     20  *  1.告诉tableview一共有多少组
     21  */
     22 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
     23 {
     24     NSLog(@"numberOfSectionsInTableView");
     25     return 2;
     26 }
     27 /**
     28  *  2.第section组有多少行
     29  */
     30 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
     31 {
     32     NSLog(@"numberOfRowsInSection %d", section);
     33     if (0 == section) {
     34         // 第0组有多少行
     35         return 2;
     36     }else
     37     {
     38         // 第1组有多少行
     39         return 3;
     40     }
     41 }
     42 /**
     43  *  3.告知系统每一行显示什么内容
     44  */
     45 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
     46 {
     47     NSLog(@"cellForRowAtIndexPath %d %d", indexPath.section, indexPath.row);
     48 //    indexPath.section; // 第几组
     49 //    indexPath.row; // 第几行
     50     // 1.创建cell
     51     UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:nil];
     52     
     53     // 2.设置数据
     54     // cell.textLabel.text = @"汽车";
     55     // 判断是第几组的第几行
     56     if (0 == indexPath.section) { // 第0组
     57         if (0 == indexPath.row) // 第0组第0行
     58         {
     59             cell.textLabel.text = @"奥迪";
     60         }else if (1 == indexPath.row) // 第0组第1行
     61         {
     62             cell.textLabel.text = @"宝马";
     63         }
     64         
     65     }else if (1 == indexPath.section) // 第1组
     66     {
     67         if (0 == indexPath.row) { // 第0组第0行
     68             cell.textLabel.text = @"本田";
     69         }else if (1 == indexPath.row) // 第0组第1行
     70         {
     71             cell.textLabel.text = @"丰田";
     72         }else if (2 == indexPath.row) // 第0组第2行
     73         {
     74             cell.textLabel.text = @"马自达";
     75         }
     76     }
     77     
     78     // 3.返回要显示的控件
     79     return cell;
     80     
     81 }
     82 /**
     83  *  第section组头部显示什么标题
     84  *
     85  */
     86 - (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
     87 {
     88     // return @"标题";
     89     if (0 == section) {
     90         return @"德系品牌";
     91     }else
     92     {
     93         return @"日韩品牌";
     94     }
     95 }
     96 /**
     97  *  第section组底部显示什么标题
     98  *
     99  */
    100 - (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section
    101 {
    102     if (0 == section) {
    103         return @"高端大气上档次";
    104     }else
    105     {
    106         return @"还不错";
    107     }
    108 }
    109 @end

    实现效果:

    (2)让代码的数据独立

    新建一个模型

     1 #import <Foundation/Foundation.h>
     2 
     3 @interface NJCarGroup : NSObject
     4 /**
     5  *  标题
     6  */
     7 @property (nonatomic, copy) NSString *title;
     8 /**
     9  *  描述
    10  */
    11 @property (nonatomic, copy) NSString *desc;
    12 /**
    13  *  当前组所有行的数据
    14  */
    15 @property (nonatomic, strong) NSArray *cars;
    16 
    17 @end
      1 #import "NJViewController.h"
      2 #import "NJCarGroup.h"
      3 
      4 @interface NJViewController ()<UITableViewDataSource>
      5 @property (weak, nonatomic) IBOutlet UITableView *tableView;
      6 /**
      7  *  保存所有组的数据(其中每一元素都是一个模型对象)
      8  */
      9 @property (nonatomic, strong) NSArray *carGroups;
     10 @end
     11 
     12 
     13 @implementation NJViewController
     14 
     15 
     16 #pragma mark - 懒加载
     17 - (NSArray *)carGroups
     18 {
     19     if (_carGroups == nil) {
     20         // 1.创建模型
     21         NJCarGroup *cg1 = [[NJCarGroup alloc] init];
     22         cg1.title = @"德系品牌";
     23         cg1.desc = @"高端大气上档次";
     24         cg1.cars = @[@"奥迪", @"宝马"];
     25         
     26         NJCarGroup *cg2 = [[NJCarGroup alloc] init];
     27         cg2.title = @"日韩品牌";
     28         cg2.desc = @"还不错";
     29         cg2.cars = @[@"本田", @"丰田", @"小田田"];
     30         
     31         NJCarGroup *cg3 = [[NJCarGroup alloc] init];
     32         cg3.title = @"欧美品牌";
     33         cg3.desc = @"价格昂贵";
     34         cg3.cars = @[@"劳斯莱斯", @"布加迪", @"小米"];
     35         // 2.将模型添加到数组中
     36         _carGroups = @[cg1, cg2, cg3];
     37     }
     38     // 3.返回数组
     39     return _carGroups;
     40 }
     41 
     42 - (void)viewDidLoad
     43 {
     44     [super viewDidLoad];
     45     // 设置tableView的数据源
     46     self.tableView.dataSource = self;
     47     
     48 }
     49 
     50 #pragma mark - UITableViewDataSource
     51 /**
     52  *  1.告诉tableview一共有多少组
     53  */
     54 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
     55 {
     56     NSLog(@"numberOfSectionsInTableView");
     57     return self.carGroups.count;
     58 }
     59 /**
     60  *  2.第section组有多少行
     61  */
     62 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
     63 {
     64     NSLog(@"numberOfRowsInSection %d", section);
     65     // 1.取出对应的组模型
     66     NJCarGroup *g = self.carGroups[section];
     67     // 2.返回对应组的行数
     68     return g.cars.count;
     69 }
     70 /**
     71  *  3.告知系统每一行显示什么内容
     72  */
     73 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
     74 {
     75     NSLog(@"cellForRowAtIndexPath %d %d", indexPath.section, indexPath.row);
     76 //    indexPath.section; // 第几组
     77 //    indexPath.row; // 第几行
     78     // 1.创建cell
     79     UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:nil];
     80     
     81     // 2.设置数据
     82     // cell.textLabel.text = @"嗨喽";
     83     // 2.1取出对应组的模型
     84     NJCarGroup *g = self.carGroups[indexPath.section];
     85     // 2.2取出对应行的数据
     86     NSString *name = g.cars[indexPath.row];
     87     // 2.3设置cell要显示的数据
     88     cell.textLabel.text = name;
     89     // 3.返回要显示的控件
     90     return cell;
     91     
     92 }
     93 /**
     94  *  第section组头部显示什么标题
     95  *
     96  */
     97 - (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
     98 {
     99     // return @"标题";
    100     // 1.取出对应的组模型
    101     NJCarGroup *g = self.carGroups[section];
    102     return g.title;
    103 }
    104 /**
    105  *  第section组底部显示什么标题
    106  *
    107  */
    108 - (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section
    109 {
    110     // return @"标题";
    111     // 1.取出对应的组模型
    112     NJCarGroup *g = self.carGroups[section];
    113     return g.desc;
    114 }
    115 @end

    实现效果:

    提示:请自行体会把数据独立出来单独处理,作为数据模型的好处。另外,把什么抽成一个模型,一定要弄清楚。

    四、补充点

    contentView下默认有3个⼦视图

    第2个是UILabel(通过UITableViewCell的textLabel和detailTextLabel属性访问)

    3个是UIImageView(通过UITableViewCellimageView属性访问)

     UITableViewCell还有⼀个UITableViewCellStyle属性,⽤于决定使用contentView的哪些子视图,以及这些子视图在contentView中的位置 

     

  • 相关阅读:
    2022年论文阅读日志
    Powerful Discount Tickets(贪心,数学)
    Teleporter Setting(最短路,思维)
    Who Says a Pun?(exKMP)
    Face Produces Unhappiness(贪心)
    笛卡尔树(递归,二叉树)
    TortoiseGit使用视频教程的实践
    TortoiseGit使用视频教程的启发
    备案未接入导致无法访问
    流水文之访问速度慢
  • 原文地址:https://www.cnblogs.com/wendingding/p/3756027.html
Copyright © 2020-2023  润新知