QQ列表

在这个例子中，学习到了一些新的知识点。如：二级控制器等

样例图片：

列表可以展开，点击好友可以跳到另一个页面

本实例没有使用xib或者storyboard。而是采用纯代码的方式添加view，进行界面布局，背景调整。

实现步骤如下：

1. 模型搭建

1）本例采用MVC的结构，首先添加三个文件夹，然后将其拖入项目，copy成为group。

就是黄色文件夹。

2）添加GroupModel.h和.m文件，实现组的模型

3）添加Friends.h和.m文件，实现好友模型

2. 实现UITableView

1) 设置二级控制器和主window

[objc]  view plain copy

1. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {  
2.     // Override point for customization after application launch.  
3.       
4.     self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];  
5.       
6.     self.window.backgroundColor = [UIColor whiteColor];  
7.       
8.     ListTableViewController *listVC = [[ListTableViewController alloc] init];  
9.     //二级控制器  
10.     UINavigationController *navCtrl = [[UINavigationController alloc] initWithRootViewController:listVC];  
11.       
12.     self.window.rootViewController = navCtrl;  
13.       
14.     //set it is a main window  
15.     [self.window makeKeyAndVisible];  
16.       
17.     return YES;  
18. }  

2）新建ListTableViewController继承自TableViewController

通过懒加载的方式绑定数据到ListTableViewController

3) 设置section数目，设置section内行数

4）创建Cell，并绑定数据到cell上，需要使用标示符

3. 自定义头视图

1）创建HeaderView.h和.m文件，继承自UITableViewHeaderFooterView

2）在实现文件中创建并初始化header

[objc]  view plain copy

1. + (instancetype)headerView:(UITableView *)tableView{  
2.     static NSString *identifier = @"header";  
3.     HeaderView *header = [tableView dequeueReusableCellWithIdentifier:identifier];  
4.       
5.     if(!header){  
6.         header = [[HeaderView alloc] initWithReuseIdentifier:identifier];  
7.     }  
8.     return header;  
9. }  
10.   
11. - (instancetype)initWithReuseIdentifier:(NSString *)reuseIdentifier{  
12.   
13.     if (self = [super init]) {  
14.         UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];  
15.         [button setBackgroundImage:[UIImage imageNamed:@"header_bg"] forState:UIControlStateNormal];  
16.         [button setBackgroundImage:[UIImage imageNamed:@"header_bg_highlighted"] forState:UIControlStateHighlighted];  
17.         [button setImage:[UIImage imageNamed:@"arrow"] forState:UIControlStateNormal];  
18.         [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];  
19.         button.contentEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0);  
20.         button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;  
21.         button.titleEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0);  
22.         [button addTarget:self action:@selector(buttonAction) forControlEvents:UIControlEventTouchUpInside];  
23.         button.imageView.clipsToBounds = NO;  
24.           
25.         _arrowBtn = button;  
26.         [self addSubview:_arrowBtn];  
27.           
28.         //create label, display current people number  
29.         UILabel *labelRight = [[UILabel alloc] init];  
30.         labelRight.textAlignment = NSTextAlignmentCenter;  
31.         _label = labelRight;  
32.         [self addSubview:_label];  
33.     }  
34.     return self;  
35. }  

2）设置header按钮上显示的值

[objc]  view plain copy

1. - (void)setGroupModel:(GroupModel *)groupModel{  
2.       
3.     _groupModel = groupModel;  
4.     [_arrowBtn setTitle:_groupModel.name forState:UIControlStateNormal];  
5.     _label.text = [NSString stringWithFormat:@"%@/%lu", _groupModel.online, (unsigned long)_groupModel.friends.count];  
6.       
7.       
8. }  

3）设置header上button和label的frame

[objc]  view plain copy

1. //layout:set the frame value of button and frame  
2. - (void)layoutSubviews{  
3.   
4.     [super layoutSubviews];  
5.     _arrowBtn.frame = self.bounds;  
6.     _label.frame = CGRectMake(self.frame.size.width - 70, 0, 60, self.frame.size.height);  
7. }  

4）在ListViewTableController.m中绑定header

[objc]  view plain copy

1. - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{  
2.       
3.       
4.     HeaderView *header = [HeaderView headerView:tableView];  
5.     header.delegate = self;  
6.     header.groupModel = self.dataArray[section];  
7.     return header;  
8.       
9. }  

5）在HeaderView中实现点击

[objc]  view plain copy

1. #import <UIKit/UIKit.h>  
2. #import "GroupModel.h"  
3.   
4. // for the click  
5. @protocol HeaderViewDelegate <NSObject>  
6.   
7. @optional  
8. - (void)clickView;  
9.   
10. @end  
11.   
12. @interface HeaderView : UITableViewHeaderFooterView  
13.   
14. @property (nonatomic, assign) id<HeaderViewDelegate> delegate;  
15. @property (nonatomic, strong) GroupModel *groupModel;  
16.   
17. + (instancetype)headerView:(UITableView *)tableView;  
18.   
19. @end  

[objc]  view plain copy

1. - (void)buttonAction{  
2.       
3.     self.groupModel.isOpen = !self.groupModel.isOpen;  
4.     if ([self.delegate respondsToSelector:@selector(clickView)]) {  
5.         [self.delegate clickView];  
6.     }  
7. }  

在ListTableViewController中

[objc]  view plain copy

1. - (void)clickView{  
2.     [self.tableView reloadData];  
3. }  

4. 实现好友点击

[objc]  view plain copy

1. - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{  
2.       
3.     ViewController *viewCtrl = [[ViewController alloc] init];  
4.     viewCtrl.view.backgroundColor = [UIColor grayColor];  
5.     [self.navigationController pushViewController:viewCtrl animated:NO];  
6.       
7. }  

5. 去除底线

[objc]  view plain copy

1. - (void)clipExtraCellLine:(UITableView *)tableView{  
2.   
3.     UIView *view = [[UIView alloc] init];  
4.     view.backgroundColor = [UIColor clearColor];  
5.     [self.tableView setTableFooterView:view];  
6. }  

6. 设置按钮点击后翻转

[objc]  view plain copy

1. - (void)didMoveToSuperview{  
2.   
3.     _arrowBtn.imageView.transform = self.groupModel.isOpen ?  
4.         CGAffineTransformMakeRotation(M_PI_2) :  
5.         CGAffineTransformMakeRotation(0);  
6. }