IOS學習實例之三---QQ列表

今天跟着極客學院的視頻做了QQ列表。

在這個例子中，學習到了一些新的知識點。如：二級控制器等

樣例圖片：

列表可以展開，點擊好友可以跳到另一個頁面

本實例沒有使用xib或者storyboard。而是採用純代碼的方式添加view，進行界面佈局，背景調整。

實現步驟如下：

1. 模型搭建

1）本例採用MVC的結構，首先添加三個文件夾，然後將其拖入項目，copy成爲group。

就是黃色文件夾。

2）添加GroupModel.h和.m文件，實現組的模型

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

2. 實現UITableView

1) 設置二級控制器和主window

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Override point for customization after application launch.
    
    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    
    self.window.backgroundColor = [UIColor whiteColor];
    
    ListTableViewController *listVC = [[ListTableViewController alloc] init];
    //二級控制器
    UINavigationController *navCtrl = [[UINavigationController alloc] initWithRootViewController:listVC];
    
    self.window.rootViewController = navCtrl;
    
    //set it is a main window
    [self.window makeKeyAndVisible];
    
    return YES;
}

2）新建ListTableViewController繼承自TableViewController

通過懶加載的方式綁定數據到ListTableViewController

3) 設置section數目，設置section內行數

4）創建Cell，並綁定數據到cell上，需要使用標示符

3. 自定義頭視圖

1）創建HeaderView.h和.m文件，繼承自UITableViewHeaderFooterView

2）在實現文件中創建並初始化header

+ (instancetype)headerView:(UITableView *)tableView{
    static NSString *identifier = @"header";
    HeaderView *header = [tableView dequeueReusableCellWithIdentifier:identifier];
    
    if(!header){
        header = [[HeaderView alloc] initWithReuseIdentifier:identifier];
    }
    return header;
}

- (instancetype)initWithReuseIdentifier:(NSString *)reuseIdentifier{

    if (self = [super init]) {
        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
        [button setBackgroundImage:[UIImage imageNamed:@"header_bg"] forState:UIControlStateNormal];
        [button setBackgroundImage:[UIImage imageNamed:@"header_bg_highlighted"] forState:UIControlStateHighlighted];
        [button setImage:[UIImage imageNamed:@"arrow"] forState:UIControlStateNormal];
        [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        button.contentEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0);
        button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
        button.titleEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0);
        [button addTarget:self action:@selector(buttonAction) forControlEvents:UIControlEventTouchUpInside];
        button.imageView.clipsToBounds = NO;
        
        _arrowBtn = button;
        [self addSubview:_arrowBtn];
        
        //create label, display current people number
        UILabel *labelRight = [[UILabel alloc] init];
        labelRight.textAlignment = NSTextAlignmentCenter;
        _label = labelRight;
        [self addSubview:_label];
    }
    return self;
}

2）設置header按鈕上顯示的值

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

3）設置header上button和label的frame

//layout:set the frame value of button and frame
- (void)layoutSubviews{

    [super layoutSubviews];
    _arrowBtn.frame = self.bounds;
    _label.frame = CGRectMake(self.frame.size.width - 70, 0, 60, self.frame.size.height);
}

4）在ListViewTableController.m中綁定header

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
    
    
    HeaderView *header = [HeaderView headerView:tableView];
    header.delegate = self;
    header.groupModel = self.dataArray[section];
    return header;
    
}

5）在HeaderView中實現點擊

#import <UIKit/UIKit.h>
#import "GroupModel.h"

// for the click
@protocol HeaderViewDelegate <NSObject>

@optional
- (void)clickView;

@end

@interface HeaderView : UITableViewHeaderFooterView

@property (nonatomic, assign) id<HeaderViewDelegate> delegate;
@property (nonatomic, strong) GroupModel *groupModel;

+ (instancetype)headerView:(UITableView *)tableView;

@end

- (void)buttonAction{
    
    self.groupModel.isOpen = !self.groupModel.isOpen;
    if ([self.delegate respondsToSelector:@selector(clickView)]) {
        [self.delegate clickView];
    }
}

在ListTableViewController中

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

4. 實現好友點擊

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

5. 去除底線

- (void)clipExtraCellLine:(UITableView *)tableView{

    UIView *view = [[UIView alloc] init];
    view.backgroundColor = [UIColor clearColor];
    [self.tableView setTableFooterView:view];
}

6. 設置按鈕點擊後翻轉

- (void)didMoveToSuperview{

    _arrowBtn.imageView.transform = self.groupModel.isOpen ?
        CGAffineTransformMakeRotation(M_PI_2) :
        CGAffineTransformMakeRotation(0);
}