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)section101 {102     if (0 == section) {103         return @"高端大氣上檔次";104     }else105     {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)section109 {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中的位置 

 

 

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