輕量級應用開發之（08）UITableView

時間 2019-11-13

標籤輕量級應用開發 uitableview 简体版

原文原文鏈接

一 UITableView基本介紹

　　在衆多移動應⽤用中,能看到各式各樣的表格數據。
　　在iOS中,要實現表格數據展現,最經常使用的作法就是使用UITableView，UITableView繼承自UIScrollView,所以支持垂直滾動,⽽且性能極佳。
　　UITableview有分組和不分組兩種樣式，能夠在storyboard或者是用代碼設置。html

2、數據展現

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

沒有設置數據源的UITableView只是個空殼性能

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

展現數據的過程：atom

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

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

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

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

三代碼展現

example1-一個簡單的UITableView

1. 新建一個工程htm

新建一個工程，在Main.storyboard裏添加一個UITablew控件。而後創建一個全屏約束

1）點擊添加約束按鈕

2）去掉Constrain to Margins

3) top, left,right, bottom的約束值設爲0.

4)UPdate Frame選擇「items of New Constraints」

2 展現基本的數據

 1 #import "ViewController.h"
 2 
 3 @interface ViewController ()<UITableViewDataSource>
 4    @property (weak, nonatomic) IBOutlet UITableView *tableView;
 5 
 6 @end
 7 
 8 @implementation ViewController
 9 
10 - (void)viewDidLoad {
11     [super viewDidLoad];
12     self.tableView.dataSource = self;
13 }
14 
15 #pragma mark - <UITableViewSource>
16 //這一組 返回多少行， section：告訴如今是第幾組
17 - (NSInteger)tableView:(UITableView *)tableView
18  numberOfRowsInSection:(NSInteger)section{
19     
20     if(section ==0 ){
21         return 3;
22     }else  if(section == 1){
23         return 2;
24     }else{
25         return 5;
26     }
27     
28 }
29 
30 //告訴tableview一共有多少組
31 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
32     
33     return 3;
34 }
35 
36 //告訴tableview 你要顯示什麼數據
37 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
38     UITableViewCell *cell = [[UITableViewCell alloc] init];
39     cell.textLabel.text = @"123";
40     
41     return cell;
42 }
43 
44 @end

運行效果默認以下：

UIViewTable的默認style是plain,選中 grouped,

修改 UIViewTable的Style爲Grouped 後，運行結果以下：

優化後的代碼

  1 #import "ViewController.h"
  2 
  3 @interface ViewController ()<UITableViewDataSource>
  4    @property (weak, nonatomic) IBOutlet UITableView *tableView;
  5 
  6 @end
  7 
  8 @implementation ViewController
  9 
 10 - (void)viewDidLoad {
 11     [super viewDidLoad];
 12     self.tableView.dataSource =self;
 13 }
 14 
 15 #pragma mark - <UITableViewSource>
 16 //這一組 返回多少行， section：告訴如今是第幾組
 17 - (NSInteger)tableView:(UITableView *)tableView
 18  numberOfRowsInSection:(NSInteger)section{
 19     
 20     if(section ==0 ){
 21         return 3;
 22     }else  if(section == 1){
 23         return 3;
 24     }else{
 25         return 3;
 26     }
 27     
 28 }
 29 
 30 //告訴tableview一共有多少組
 31 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
 32     
 33     return 3;
 34 }
 35 
 36 //告訴tableview 你要顯示什麼數據
 37 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
 38     /**
 39      indexPath.row 行
 40      indexPath.section 列
 41  **/
 42    
 43     UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:nil];
 44     
 45     if( indexPath.section ==0 ){
 46         if( indexPath.row ==0){
 47              cell.textLabel.text = @"奧迪";
 48              cell.imageView.image = [UIImage imageNamed:@"m_2_100"];
 49              cell.detailTextLabel.text = @"哈哈哈哈哈!!!";
 50         }else  if( indexPath.row ==1 ){
 51              cell.textLabel.text = @"奔馳";
 52              cell.imageView.image = [UIImage imageNamed:@"m_3_100"];
 53         }else  if( indexPath.row ==2 ){
 54              cell.textLabel.text = @"寶馬";
 55              cell.imageView.image = [UIImage imageNamed:@"m_4_100"];
 56         }
 57     }else if( indexPath.section == 1){
 58         if( indexPath.row ==0){
 59             cell.textLabel.text = @"法拉利";
 60             cell.imageView.image = [UIImage imageNamed:@"m_2_100"];
 61         }else  if( indexPath.row ==1 ){
 62             cell.textLabel.text = @"奔馳";
 63             cell.imageView.image = [UIImage imageNamed:@"m_3_100"];
 64         }else  if( indexPath.row ==2 ){
 65             cell.textLabel.text = @"寶馬";
 66              cell.imageView.image = [UIImage imageNamed:@"m_4_100"];
 67         }
 68     }else if( indexPath.section ==2 ){
 69         if( indexPath.row ==0){
 70             cell.textLabel.text = @"法拉利";
 71             cell.imageView.image = [UIImage imageNamed:@"m_2_100"];
 72         }else  if( indexPath.row ==1 ){
 73             cell.textLabel.text = @"奔馳";
 74             cell.imageView.image = [UIImage imageNamed:@"m_3_100"];
 75         }else  if( indexPath.row ==2 ){
 76             cell.textLabel.text = @"寶馬";
 77             cell.imageView.image = [UIImage imageNamed:@"m_4_100"];
 78         }
 79     }
 80    
 81     return cell;
 82 }
 83 
 84 //告訴tableView 每組頭部顯示什麼東西
 85 - (NSString *) tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{
 86     if( section == 0){
 87        return @"header第0組";
 88     }else if( section == 0){
 89        return @"header第1組";
 90     }else {
 91        return @"header第2組";
 92     }
 93 }
 94 
 95 //告訴tableView 每組尾部顯示什麼東西
 96 - (NSString *) tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section{
 97     if( section == 0){
 98         return @"footer第0組";
 99     }else if( section == 0){
100         return @"footer第1組";
101     }else {
102         return @"footer第2組";
103     }
104 
105 }
106 
107 @end

example2-使用模型展現 UITableView

1. 建立數據模型

新建XPCar

XPCar.h

#import <Foundation/Foundation.h>

@interface XPCar : NSObject
    @property(copy, nonatomic) NSString * name; //名稱
    @property(copy, nonatomic) NSString * icon; //圖標

    + (instancetype ) carWithName:(NSString *)name icon:(NSString *) icon ;

@end

XPCar.m

 1 #import "XPCar.h"
 2 
 3 @implementation XPCar
 4 
 5 + (instancetype)carWithName:(NSString *)name icon:(NSString *)icon{
 6     XPCar * car =[[XPCar alloc]init];
 7     car.name = name;
 8     car.icon = icon;
 9     return car;
10 }
11  
12 @end

新建XPCarGroup

XPCarGroup.h

1 #import <Foundation/Foundation.h>
2 
3 @interface XPCarGroup : NSObject
4 
5 　　@property(copy, nonatomic) NSString *header; //頭部標題
6 　　@property(copy, nonatomic) NSString *footer; //尾部標題
7 　　@property(copy, nonatomic) NSArray * cars; // 裏面裝着全部的車輛模型，這個數組裏存放的都是 XPCar。
8 @end

XPCarGroup.m

ViewController.m

 1 #import "ViewController.h"
 2 #import "XPCarGroup.h"
 3 #import "XPCar.h"
 4 
 5 @interface ViewController ()<UITableViewDataSource>
 6    @property (weak, nonatomic) IBOutlet UITableView *tableView;
 7     @property (nonatomic,strong) NSArray *groups; //全部組的數組模型數組
 8 
 9 @end
10 
11 @implementation ViewController
12 
13 - (void)viewDidLoad {
14     [super viewDidLoad];
15     self.tableView.dataSource =self;
16     
17     XPCarGroup * group0 = [[XPCarGroup alloc]init];
18     group0.header = @"頭部-哈哈1";
19     group0.footer = @"尾部-車庫裏的車";
20     group0.cars = @[  [XPCar carWithName:@"奧迪 aaa" icon:@"m_2_100"] ,
21                       [XPCar carWithName:@"奔馳" icon:@"m_3_100"] ,
22                       [XPCar carWithName:@"寶馬" icon:@"m_4_100"]
23                       ];
24     
25     XPCarGroup * group1 = [[XPCarGroup alloc]init];
26     group1.header = @"頭部-哈哈2";
27     group1.footer = @"尾部-車庫裏的車";
28     group1.cars = @[  [XPCar carWithName:@"奧迪" icon:@"m_2_100"] ,
29                       [XPCar carWithName:@"奔馳" icon:@"m_3_100"] ,
30                       [XPCar carWithName:@"寶馬" icon:@"m_4_100"]
31                       ];
32     
33     XPCarGroup * group2 = [[XPCarGroup alloc]init];
34     group2.header = @"頭部-哈哈3";
35     group2.footer = @"尾部-車庫裏的車";
36     group2.cars = @[  [XPCar carWithName:@"奧迪" icon:@"m_2_100"] ,
37                       [XPCar carWithName:@"奔馳" icon:@"m_3_100"] ,
38                       [XPCar carWithName:@"寶馬" icon:@"m_4_100"]
39                       ];
40     
41     self.groups= @[group0, group1, group2,group0,group1];
42 }
43 
44 #pragma mark - <UITableViewSource>
45 //這一組 返回多少行， section：告訴如今是第幾組
46 - (NSInteger)tableView:(UITableView *)tableView
47  numberOfRowsInSection:(NSInteger)section{
48     //拿出對應的組
49     XPCarGroup *group = self.groups[section];
50     
51     return group.cars.count;
52 }
53 
54 //告訴tableview一共有多少組
55 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
56    
57     return  self.groups.count;
58 }
59 
60 //告訴tableview 你要顯示什麼數據
61 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
62     /**
63      indexPath.row 行
64      indexPath.section 列
65  **/
66    
67     UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:nil];
68     //取出模型
69     XPCarGroup * group = self.groups[indexPath.section];
70     XPCar * car = group.cars[indexPath.row];
71     cell.textLabel.text = car.name;
72     cell.imageView.image =[UIImage imageNamed: car.icon];
73     
74     return cell;
75 }
76 
77 //告訴tableView 每組頭部顯示什麼東西
78 - (NSString *) tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{
79     //取出數據模型
80     XPCarGroup * group = self.groups[section];
81     return group.header;
82     
83 }
84 
85 //告訴tableView 每組尾部顯示什麼東西
86 - (NSString *) tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section{
87     //取出數據模型
88     XPCarGroup * group = self.groups[section];
89     return group.footer;
90 }
91 
92 @end