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