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(通過UITableViewCell的imageView屬性通路)
UITableViewCell還有⼀個UITableViewCellStyle屬性,⽤于決定使用contentView的哪些子視圖,以及這些子視圖在contentView中的位置