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

三、图示