手机访问 | 设为首页 | 加入收藏 | 网站地图

当前位置:电脑中国 > 编程 > 移动开发 >

iOS UIScrollView控件介绍

2017-04-26 16:27|来源:未知 |作者:dnzg |点击:

iOS UIScrollView控件介绍:在众多移动应?用中,能看到各式各样的表格数据 。

在iOS中,要实现表格数据展示,最常用的做法就是使用UITableView,UITableView继承自UIScrollView,因此支持垂直滚动,?且性能极佳 。

UITableview有分组和不分组两种样式,可以在storyboard或者是用代码设置。

\

二、数据展示

UITableView需要?一个数据源(dataSource)来显示数据
UITableView会向数据源查询一共有多少行数据以及每?行显示什么数据等

没有设置数据源的UITableView只是个空壳

凡是遵守UITableViewDataSource协议的OC对象,都可以是UITableView的数据源

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
展示数据的过程:
 
(1)调用数据源的下面?法得知?一共有多少组数据
- (NSInteger)numberOfSectionsInTableView:(UITableView*)tableView;
 
(2)调用数据源的下面?法得知每一组有多少行数据
- (NSInteger)tableView:(UITableView*)tableViewnumberOfRowsInSection:(NSInteger)section;
 
(3)调?数据源的下??法得知每??显示什么内容
 
- (UITableViewCell *)tableView:(UITableView *)tableViewcellForRowAtIndexPath:(NSIndexPath *)indexPath;
 
三、代码示例
 
(1)能基本展示的“垃圾”代码
 
  1 #import "NJViewController.h"
  2
  3 @interface NJViewController ()
  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
 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 ()
  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
(责任编辑:dnzg)