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）能基本展示的“垃圾”代码

//  Created by 鑫 on 14-10-7.
//  Copyright (c) 2014年 梁镋鑫. All rights reserved.
//

#import "TXViewController.h"

@interface TXViewController ()<UITableViewDataSource>
@property (weak, nonatomic) IBOutlet UITableView *tableView;

@end

@implementation TXViewController

- (void)viewDidLoad
{
[super viewDidLoad];
self.tableView.dataSource = self;

}

- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

#pragma mark --数据源方法
/**
*  一共多少组
*
*  @param tableView <#tableView description#>
*
*  @return <#return value description#>
*/
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 2;
}
/**
*  第section组有多少行

*/
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
if (section ==0) {
return 3;
}
else
{
return 4;
}
}
/**
*  每行显示怎样的内容
*/
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:nil];

if (indexPath.section == 0) { // 德系品牌(第0组)

if (indexPath.row == 0) { // 第0组的第0行
cell.textLabel.text = @"奥迪";
} else if (indexPath.row == 1) { // 第0组的第1行
cell.textLabel.text = @"宝马";
} else if (indexPath.row == 2) {
cell.textLabel.text = @"奔驰";
}

} else if (indexPath.section == 1) { // 日韩品牌(第1组)

if (indexPath.row == 0) { // 第1组的第0行
cell.textLabel.text = @"本田";
} else if (indexPath.row == 1) { // 第1组的第1行
cell.textLabel.text = @"丰田";
} else if (indexPath.row == 2) {
cell.textLabel.text = @"铃木";
} else if (indexPath.row == 3) {
cell.textLabel.text = @"三菱";
}

} else if (indexPath.section == 2) { // 欧系品牌(第2组)

if (indexPath.row == 0) { // 第2组的第0行
cell.textLabel.text = @"兰博基尼";
} else if (indexPath.row == 1) { // 第2组的第1行
cell.textLabel.text = @"劳斯莱斯";
}

}

return cell;

}
/**
*  第section组显示怎样的投标
*/
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section
{
if (section == 0) {
return @"德系品牌";
} else if (section == 1) {
return @"日韩品牌";
} else {
return @"欧系品牌";
}
}
/**
第section组显示怎样的尾部标题
*/
- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section
{
if (section == 0) {
return @"世界一流品牌";
} else if(section == 1) {
return @"牛逼哄哄";
} else {
return @"价格昂贵";
}
}

@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中的位置