iOS学习笔记-037.UITableView示例一——qq列表

UITableView示例一——qq列表

一、注意

在添加分组的名字的时候，
我们使用

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section

时，需要使用

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section

方法来返回高度，不然无法显示我们的分组名。

二、代码

//
//  ViewController.m
//  03_UIView30_qq好友列表
//
//  Created by 杞文明 on 2016/01/10 17:56:54   星期日.
//  Copyright © 2016年 杞文明. All rights reserved.
//

#import "ViewController.h"

@interface ViewController (){
    UITableView * _tableView;
    NSArray * _friendsList;
    NSMutableDictionary * _selectInfo;
}

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self createLayout];
    [self loadData];
}

#pragma mark - 创建布局
-(void)createLayout{
    UITableView * tableView = [[UITableView alloc]initWithFrame:self.view.bounds style:UITableViewStylePlain];
    [tableView setDataSource:self];
    [tableView setDelegate:self];
    [self.view addSubview:tableView];
    _tableView = tableView;
}

#pragma mark - 加载数据
-(void)loadData{
    NSString * path = [[NSBundle mainBundle]pathForResource:@"friends" ofType:@"plist"];
    _friendsList = [NSArray arrayWithContentsOfFile:path];
    _selectInfo = [[NSMutableDictionary alloc]init];
    for (NSInteger i=0; i<_friendsList.count; i++) {
        NSDictionary * dict = _friendsList[i];
        [_selectInfo setValue:@(0) forKey:dict[@"group"]];
    }
}

#pragma mark - 分组的个数
-(NSInteger)numberOfSectionsInTableView:(nonnull UITableView *)tableView{
    return _friendsList.count;
}

#pragma mark - 每个每组里面的条目的个数
-(NSInteger)tableView:(nonnull UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    NSDictionary * friendDic = _friendsList[section];
    NSInteger i = [_selectInfo[friendDic[@"group"]]integerValue];
    if(i==0){
        return 0;
    }
    NSArray * array = friendDic[@"friends"];
    return array.count;
}

#pragma mark - 分组的名称
-(UIView*)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
    // 分组的头也需要做优化,
    // 注意:如果需要分组头优化,需要使用xib文件自定义分组头,或者使用代码的方式自定义分组头控件
    static NSString *HeaderID = @"myHeader";
    UIView *myHeader = [tableView dequeueReusableHeaderFooterViewWithIdentifier:HeaderID];

    if (myHeader == nil) {
        myHeader = [[UIView alloc]init];
        NSLog(@"建立表格标题");
    }

    [myHeader setBackgroundColor:[UIColor orangeColor]];

    // 增加三角指示图片
    UIImage *image = [UIImage imageNamed:@"disclosure.png"];
    UIImageView *imageView = [[UIImageView alloc]initWithImage:image];
    [imageView setFrame:CGRectMake(10.0, 9, 32, 32)];
    [myHeader addSubview:imageView];

    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button setFrame:CGRectMake(0, 0, 320, 50)];
    NSDictionary *dict = _friendsList[section];
    [button setTitle:dict[@"group"] forState:UIControlStateNormal];
    [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];

    // 用button的tag属性记录section数值
    [button setTag:section];
    // 监听按钮事件
    [button addTarget:self action:@selector(clickHeader:) forControlEvents:UIControlEventTouchUpInside];

    [myHeader addSubview:button];

    // 可以根据对应的sction设定三角图片的旋转角度
    NSInteger sectionStatus = [_selectInfo[dict[@"group"]]integerValue];
    // 如果是0,表示折叠, 如果是1,表示展开,旋转90
    if (sectionStatus == 0) {
        [imageView setTransform:CGAffineTransformMakeRotation(0)];
    } else {
        [imageView setTransform:CGAffineTransformMakeRotation(M_PI_2)];
    }

    return myHeader;
}

#pragma mark - 条目
-(UITableViewCell*)tableView:(nonnull UITableView *)tableView cellForRowAtIndexPath:(nonnull NSIndexPath *)indexPath{
    static NSString * identifier = @"UITableCell";
    UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier:identifier];
    if(cell==nil){
        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier];
    }

    NSDictionary * friendDic = _friendsList[indexPath.section];
    NSArray * array = friendDic[@"friends"];
    NSString * text = array[indexPath.row];;
    //设置文字
    [cell.textLabel setText: text];
    //设置图片
    NSString * magePath =[NSString stringWithFormat:@"head%d.png",arc4random_uniform(8)+1];
    UIImage * image = [UIImage imageNamed:magePath];
    [cell.imageView setImage:image];
    //设置详情
    [cell.detailTextLabel setText:@"你猜猜这是什么呀"];
    return cell;
}

#pragma mark -  头部的高度
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 50.0;
}

#pragma mark - Actions
- (void)clickHeader:(UIButton *)button
{
    NSLog(@"摸我了");
    // 1. 知道点击的sction
    NSInteger section = button.tag;
    // 根据sctionInfo中的数值求反就可了.
    // 1.1 先从friendList中取出对应的字典
    NSDictionary *dict = _friendsList[section];
    // 1.2 从字典中取出组名
    NSString *groupName = dict[@"group"];
    // 1.3 设置sctionInfo中的数值
    NSInteger sectionNumber = [_selectInfo[groupName]integerValue];

    [_selectInfo setValue:@(!sectionNumber) forKey:groupName];

    // 2. 收起列表=>通过设置行数=0
    // 3. 要重新设置行数=>刷新表格
    // 在刷新表格之前,我们需要记录住表格当前是展开的还是折叠的
    // 使用一个成员变量的"字典",来记录表格的展开折叠情况
    // 因为我们的分组是多个的,应用程序应该允许用户同时展开或折叠多个表格项

    // 局部刷新指定section中的所有行
    // 建立sction中的所有行的indexPath数组
    //    NSArray *friendsInSection = dict[@"friends"];
    //    NSMutableArray *indexPathArray = [NSMutableArray arrayWithCapacity:friendsInSection.count];
    //    for (NSInteger i = 0; i < friendsInSection.count; i++) {
    //        NSIndexPath *path = [NSIndexPath indexPathForRow:i inSection:section];
    //
    //        [indexPathArray addObject:path];
    //    }
    //    // 刷新指定的行
    //    [_tableView reloadRowsAtIndexPaths:indexPathArray withRowAnimation:UITableViewRowAnimationMiddle];

    // 刷新所有数据
    [_tableView reloadData];
    // a. 如果现在时展开的,那么折叠表格
    // b. 如果现在时折叠的,那么展开表格
}
@end

三、图示