iOS開發UI篇—UITableview控件簡單介紹

時間 2019-11-19

標籤 ios 開發 uitableview 控件簡單介紹欄目 iOS 简体版

原文原文鏈接

iOS開發UI篇—UITableview控件簡單介紹數組

1、基本介紹性能

在衆多移動應⽤用中,能看到各式各樣的表格數據。atom

在iOS中,要實現表格數據展現,最經常使用的作法就是使用UITableView，UITableView繼承自UIScrollView,所以支持垂直滾動,⽽且性能極佳。spa

UITableview有分組和不分組兩種樣式，能夠在storyboard或者是用代碼設置。code

2、數據展現對象

UITableView須要⼀一個數據源(dataSource)來顯示數據
UITableView會向數據源查詢一共有多少行數據以及每⼀行顯示什麼數據等 blog

沒有設置數據源的UITableView只是個空殼繼承

凡是遵照UITableViewDataSource協議的OC對象,均可以是UITableView的數據源開發

展現數據的過程：it

（1）調用數據源的下面⽅法得知⼀一共有多少組數據
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView;

（2）調用數據源的下面⽅法得知每一組有多少行數據
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;

（3）調⽤數據源的下⾯⽅法得知每⼀⾏顯示什麼內容

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

3、代碼示例

（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