表视图是ios开发中使用最频繁的视图。一般情况下,我们都会选择以表视图的形式来展示数据。
一、UITableView的分类
表视图分为两大类:
- 普通表视图:(Plain)主要用于动态表,一般在单元格未知的情况下使用
- 分类表视图:(Grouped)一般用于静态表,用于进行界面布局
二、cell(单元格)
这里说到表视图,不得不说表示图里面最重要的组成部分——cell(单元格)
cell由图标、标题和扩展视图组成,如图:
cell有四种样式,他们定义在UITableViewCellStyle枚举中,再初始化的时候决定cell的类型
1 typedef NS_ENUM(NSInteger, UITableViewCellStyle) {
2 UITableViewCellStyleDefault, //默认样式,只有图标和主标题
3 UITableViewCellStyleValue1, //无图标带副标题样式1
4 UITableViewCellStyleValue2, //无图标带副标题样式1
5 UITableViewCellStyleSubtitle //带有副标题的样式
6 };
我们在dataSource的代理方法中创建cell,通过代码创建简单的cell:
1 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
2 {
3 //可重用cell的标识符
4 static NSString * strID = @"tableView";
5 //查找可重用的cell
6 UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:strID];
7 if(!cell){
8 cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:strID];
9 }
10
11 //在cell上显示内容
12 cell.imageView.image = [UIImage imageNamed:@"gougou.jpg"];
13 cell.textLabel.text = @"gougou";
14
15 return cell;
16 }
三、UITableView的代理方法
UITableView有两个代理:UITableViewDataSource和UITableViewDelegate,想要创建UITableView,需要用到这两个代理的代理方法。
- dataSource为UITableView提供数据
方法 | 说明 |
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath | 为UITableView提供数据,该方法是必须实现的方法 |
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView | 返回节的个数 |
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section | 返回某个节的行数 |
- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView | 提供UITableView节索引标题 |
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section | 返回节头的标题 |
- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section | 返回节脚的标题 |
- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath | 为删除或修改提供数据 |
- UITableView的delegate方法主要用来设定表示图中节头和节脚的标题,并响应一些动作事件
方法 | 说明 |
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath | 设定cell的高度 |
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section | 为节头准备自定义视图 |
- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section | 为节脚准备自定义视图 |
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath | 响应选择cell时调用的方法 |
四、创建UITableView
初始化Table,并实现table的代理函数
1 #import "JZViewController.h"
2 #import "JZTableViewCell.h"
3
4 @interface JZViewController() <UITableViewDataSource, UITableViewDelegate>
5
6 @property (nonatomic, strong) UITableView * table;
7 @property (nonatomic, strong) NSMutableArray * cellArray;
8
9 @end
10
11 @implementation JZViewController
12
13 - (void)viewDidLoad
14 {
15 [super viewDidLoad];
16 self.title = @"table";
17 [self loadTwoSectionCell];
18 [self initTableView];
19 }
20
21 - (void)initTableView
22 {
23 //根据frame和style来创建tableView
24 UITableView * tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height) style:UITableViewStylePlain];
25 tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
26 tableView.delegate = self;
27 tableView.dataSource = self;
28 self.table = tableView;
29 [self.view addSubview:tableView];
30
31 //头部视图
32 UIImageView * imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 150)];
33 imageView.image = [UIImage imageNamed:@"详情页头图默认.png"];
34 tableView.tableHeaderView = imageView;
35 }
36
37 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
38 {
39 return 3;
40 }
41
42 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
43 {
44 if(section == 0){
45 return 1;
46 }else if(section == 1){
47 return 4;
48 }else if(section == 2){
49 return 4;
50 }
51
52 return 0;
53 }
54
55 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
56 {
57 static NSString * sjzID = @"sjz";
58 JZTableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:sjzID];
59 if(!cell){
60 cell = [[JZTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:sjzID];
61 }else{
62 //这里必须要删除子控件,要不重用的时候,子控件依然会现实出来
63 for(UIView * view in [cell.contentView subviews]){
64 [view removeFromSuperview];
65 }
66 }
67
68 [cell cellWithIndex:indexPath];
69
70 NSLog(@"%p", cell);
71
72 return cell;
73 }
74
75 - (void)loadTwoSectionCell
76 {
77 NSMutableArray * arr = [NSMutableArray arrayWithObjects:@"45", @"90", @"90", @"7", nil];
78 self.cellArray = arr;
79 }
80
81 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
82 {
83 if(indexPath.section == 0){
84 return 2 * ([UIScreen mainScreen].bounds.size.width / 4 + 15) + 7;
85 }else{
86 CGFloat cellHeight = [[self.cellArray objectAtIndex:indexPath.row] floatValue];;
87 return cellHeight;
88 }
89 }
90
91 @end
自定义cell:
1 #import <UIKit/UIKit.h>
2
3 @interface JZTableViewCell : UITableViewCell
4
5 - (void)cellWithIndex:(NSIndexPath *)indexPath;
6
7 @end
1 #import "JZTableViewCell.h"
2
3 @implementation JZTableViewCell
4
5 - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
6 {
7 self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
8 if(self){
9
10 }
11 return self;
12 }
13
14 - (void)cellWithIndex:(NSIndexPath *)indexPath
15 {
16 if(indexPath.section == 0){
17 [self cellForOneCell:indexPath];
18 }else if(indexPath.section == 1){
19 [self cellForTwoCell:indexPath];
20 }else if(indexPath.section == 2){
21 [self cellForThreeCell:indexPath];
22 }
23 }
24
25 - (void)cellForOneCell:(NSIndexPath *)indexPath
26 {
27 NSArray * imageArr = [NSArray arrayWithObjects:@"home_fastdepo_icon@2x.png", @"home_history_icon@2x.png", @"home_icon_notice@2x.png", @"home_myfocus_icon@2x.png", nil];
28 NSArray * titleArr = [NSArray arrayWithObjects:@"电话", @"定时", @"闹铃", @"收藏", nil];
29 CGFloat buttonW = [UIScreen mainScreen].bounds.size.width / 4;
30 CGFloat buttonH = buttonW + 15;
31
32 for(int i = 0; i < 8; i++){
33 int x = i % 4;
34 int y = i / 4;
35
36 UIImageView * imageView = [[UIImageView alloc] initWithFrame:CGRectMake((buttonW - 58) / 2 + buttonW * x, 10 + buttonH * y, 58, 58)];
37 imageView.image = [UIImage imageNamed:[imageArr objectAtIndex:x]];
38 [self.contentView addSubview:imageView];
39
40 NSString * title = [titleArr objectAtIndex:0];
41 CGSize titleSize = [title sizeWithFont:[UIFont systemFontOfSize:13]];
42 UILabel * label = [[UILabel alloc] initWithFrame:CGRectMake(buttonW * x, 10 + 58 + 5 + buttonH * y, buttonW, titleSize.height)];
43 label.backgroundColor = [UIColor clearColor];
44 label.text = [titleArr objectAtIndex:x];
45 label.textAlignment = NSTextAlignmentCenter;
46 label.font = [UIFont systemFontOfSize:13];
47 [self.contentView addSubview:label];
48
49
50 UIButton * button = [[UIButton alloc] initWithFrame:CGRectMake(buttonW * x, buttonH * y, buttonW, buttonH)];
51
52 [self.contentView addSubview:button];
53 }
54 [self addLineWithRect:CGRectMake(0, buttonH * 2, [UIScreen mainScreen].bounds.size.width, 7)];
55 }
56
57 - (void)cellForTwoCell:(NSIndexPath *)indexPath
58 {
59 if(indexPath.row == 0){
60 [self addLabelRect:CGRectMake(15, 0, [UIScreen mainScreen].bounds.size.width - 30, 45) text:@"联系人"];
61 self.selectionStyle = UITableViewCellSelectionStyleNone;
62 }else if (indexPath.row == 3){
63 [self addLineWithRect:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 7)];
64 self.selectionStyle = UITableViewCellSelectionStyleNone;
65 }else{
66 NSArray * imageArr = [NSArray arrayWithObjects:@"哆啦A梦.jpg", @"大雄.png", nil];
67 NSArray * nameArr = [NSArray arrayWithObjects:@"哆啦A梦", @"大雄", nil];
68 NSArray * iphone = [NSArray arrayWithObjects:@"123456789", @"987654321", nil];
69 NSArray * addArr = [NSArray arrayWithObjects:@"北京——海淀区", @"上海——虹桥区", nil];
70
71 UIImageView * imageView = [[UIImageView alloc] initWithFrame:CGRectMake(15, 10, 50, 70)];
72 imageView.image = [UIImage imageNamed:[imageArr objectAtIndex:indexPath.row - 1]];
73 [self.contentView addSubview:imageView];
74
75 NSString * name = @"联系人:";
76 CGSize nameSize = [name sizeWithFont:[UIFont systemFontOfSize:13]];
77 [self addLabelRect:CGRectMake(15 + 50 + 10, 10, nameSize.width, nameSize.height) text:name];
78 [self addLabelRect:CGRectMake(75 + nameSize.width, 10, [UIScreen mainScreen].bounds.size.width, nameSize.height) text:[nameArr objectAtIndex:indexPath.row - 1]];
79
80 NSString * address = @"地 址:";
81 [self addLabelRect:CGRectMake(15 + 50 + 10, 10 + 25, nameSize.width, nameSize.height) text:address];
82 [self addLabelRect:CGRectMake(75 + nameSize.width, 10 + 25, [UIScreen mainScreen].bounds.size.width, nameSize.height) text:[addArr objectAtIndex:indexPath.row - 1]];
83
84 NSString * iphon = @"电 话:";
85 [self addLabelRect:CGRectMake(15 + 50 + 10, 10 + 50, nameSize.width, nameSize.height) text:iphon];
86 [self addLabelRect:CGRectMake(75 + nameSize.width, 10 + 50, [UIScreen mainScreen].bounds.size.width, nameSize.height) text:[iphone objectAtIndex:indexPath.row - 1]];
87 }
88 }
89
90 - (void)cellForThreeCell:(NSIndexPath *)indexPath
91 {
92 if(indexPath.row == 0){
93 [self addLabelRect:CGRectMake(15, 0, [UIScreen mainScreen].bounds.size.width - 30, 45) text:@"闹铃"];
94 self.selectionStyle = UITableViewCellSelectionStyleNone;
95 }else if (indexPath.row == 3){
96 [self addLineWithRect:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 7)];
97 self.selectionStyle = UITableViewCellSelectionStyleNone;
98 }else{
99 NSArray * imageArr = [NSArray arrayWithObjects:@"home_icon_notice@2x.png", @"home_icon_notice@2x.png", nil];
100 NSArray * timeArr = [NSArray arrayWithObjects:@"16:40", @"6:30", nil];
101 NSArray * iphone = [NSArray arrayWithObjects:@"工作日", @"周末", nil];
102
103 UIImageView * imageView = [[UIImageView alloc] initWithFrame:CGRectMake(15, 20, 50, 50)];
104 imageView.image = [UIImage imageNamed:[imageArr objectAtIndex:indexPath.row - 1]];
105 [self.contentView addSubview:imageView];
106
107 NSString * name = @"时 间:";
108 CGSize nameSize = [name sizeWithFont:[UIFont systemFontOfSize:13]];
109 [self addLabelRect:CGRectMake(15 + 50 + 10, 20, nameSize.width, nameSize.height) text:name];
110 [self addLabelRect:CGRectMake(75 + nameSize.width, 20, [UIScreen mainScreen].bounds.size.width, nameSize.height) text:[timeArr objectAtIndex:indexPath.row - 1]];
111
112 NSString * address = @"周 期:";
113 [self addLabelRect:CGRectMake(15 + 50 + 10, 20 + 30, nameSize.width, nameSize.height) text:address];
114 [self addLabelRect:CGRectMake(75 + nameSize.width, 20 + 30, [UIScreen mainScreen].bounds.size.width, nameSize.height) text:[iphone objectAtIndex:indexPath.row - 1]];
115 }
116 }
117
118
119 - (void)addLabelRect:(CGRect)rect text:(NSString *)text
120 {
121 UILabel * label = [[UILabel alloc] initWithFrame:rect];
122 label.text = text;
123 label.font = [UIFont systemFontOfSize:13];
124 label.textAlignment = NSTextAlignmentLeft;
125 label.backgroundColor = [UIColor clearColor];
126 label.textColor = [UIColor blackColor];
127 [self.contentView addSubview:label];
128 }
129
130 - (void)addLineWithRect:(CGRect)rect
131 {
132 UIView * view = [[UIView alloc] initWithFrame:rect];
133 view.backgroundColor = [UIColor colorWithRed:225/255.0 green:225/255.0 blue:225/255.0 alpha:1.0];
134 [self.contentView addSubview:view];
135 }
136
137 @end
运行,界面如下: