本文主要講述如何利用UITableView來實現(xiàn)類似于QQ聯(lián)系人列表的界面展示遭殉。首先說一下創(chuàng)建的文件：
文件類目圖片
上圖可知情连，demo中我創(chuàng)建了一個自定義的cell以及一個自定義的基于UITableViewHeaderFooterView的MyHeaderView规丽，用來顯示分組折疊時候的樣式和內(nèi)容鹦倚。
接下來按照文件來詳細(xì)說一下具體的代碼內(nèi)容：
1栅屏、自定義cell文件：FriendsListCell
主要寫了一個imageView用來展示聯(lián)系人頭像戈次、一個label來顯示聯(lián)系人昵稱。
效果圖1
2隘世、自定義view文件：MyHeaderView
在.h文件中主要寫了一個代理去實現(xiàn)點擊分組視圖時的響應(yīng)事件可柿。
#import <UIKit/UIKit.h>
@protocol MyHeaderViewDelegate <NSObject>
- (void)whenHeaderViewDidTapWithTag:(NSInteger)headerTag;
@end
@interface MyHeaderView : UITableViewHeaderFooterView
@property (nonatomic ,strong) UILabel *label;
@property (nonatomic ,weak) id <MyHeaderViewDelegate> headerDelegate;
@end
在.m文件中就是實現(xiàn)控件的搭建而已。我就直接展示代碼了（此處丙者、請忽略本寶寶粗糙的女漢子審美复斥，我們重點看效果）
#import "MyHeaderView.h"
@implementation MyHeaderView
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
[self createContentView];
}
return self;
}
- (void)createContentView
{
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 5, 30, 30)];
imageView.backgroundColor = [UIColor redColor];
[self addSubview:imageView];
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(60, 5, 100, 30)];
[self addSubview:label];
self.label = label;
UILabel *label2 = [[UILabel alloc] initWithFrame:CGRectMake([UIScreen mainScreen].bounds.size.width - 20 - 50, 5, 50, 30)];
label2.text = @"4/9";
label2.textColor = [UIColor grayColor];
label2.textAlignment = NSTextAlignmentRight;
[self addSubview:label2];
UITapGestureRecognizer *tapGes = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapHeaderView)];
[self addGestureRecognizer:tapGes];
}
- (void)tapHeaderView
{
if ([self.headerDelegate respondsToSelector:@selector(whenHeaderViewDidTapWithTag:)]) {
[self.headerDelegate whenHeaderViewDidTapWithTag:self.tag];
}
}
@end
3、接下來就是在VC中實現(xiàn)：
"鑒于代碼注釋還是很詳細(xì)的械媒，此處就不再贅述目锭，看代碼。纷捞。痢虹。"
#import "ViewController.h"
#import "FriendsListCell.h"
#import "MyHeaderView.h"
@interface ViewController ()<UITableViewDelegate,UITableViewDataSource,MyHeaderViewDelegate>
@property (nonatomic ,strong) UITableView *tableView;
@property (nonatomic ,strong) NSArray *dataArray;
@property (nonatomic ,strong) NSArray *sectionArray;
@property (nonatomic ,strong) NSMutableArray *stateArray;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self setupAllArrays];
[self setupTableView];
}
- (void)setupAllArrays
{
// 初始化數(shù)據(jù) (這里是我隨便寫的一些，具體可根據(jù)數(shù)據(jù)請求結(jié)果來寫)
_sectionArray = @[@"我的好友",@"大學(xué)同學(xué)",@"我的同事",@"高中同學(xué)",@"陌生人"];
NSArray *data = @[@"好友001",@"好友002",@"好友003",@"好友004",@"好友005",@"好友006",@"好友007",@"好友008",@"好友009"];
_dataArray = [NSArray arrayWithObjects:data,data,data,data,data,nil];
_stateArray = [NSMutableArray array];
for (int i = 0; i < _dataArray.count; i++) {
[_stateArray addObject:@"0"];
}
}
- (void)setupTableView
{
// 設(shè)置tableView的style為: UITableViewStylePlain
UITableView *tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 64, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height) style:UITableViewStylePlain];
tableView.delegate = self;
tableView.dataSource = self;
tableView.rowHeight = 50;
[self.view addSubview:tableView];
self.tableView = tableView;
}
// 返回分組數(shù)量(_sectionArray.count)
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return _sectionArray.count;
}
// 自定義分組頭視圖(viewForHeaderInSection)
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
// 聯(lián)系人分組組名稱
// 點擊可控制列表折疊或展開
MyHeaderView *headerview = [[MyHeaderView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 40)];
headerview.headerDelegate = self;
headerview.tag = (section + 10);
headerview.label.text = _sectionArray[section];
return headerview;
}
// 設(shè)置分組視圖的高
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
return 40;
}
// 根據(jù)展開或者折疊狀態(tài)設(shè)置行數(shù)－－row
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
if ([_stateArray[section] isEqualToString:@"1"]) {
// 展開狀態(tài)
NSArray *array = [_dataArray objectAtIndex:section];
return array.count;
}else
{
return 0;
}
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
FriendsListCell *cell = [FriendsListCell cellWithTableView:tableView];
cell.nameLabel.text = _dataArray[indexPath.section][indexPath.row];
return cell;
}
// headerView 的代理方法主儡，點擊控制展開／折疊
- (void)whenHeaderViewDidTapWithTag:(NSInteger)headerTag
{
// 判斷目前分組是否展開
if ([_stateArray[headerTag - 10] isEqualToString:@"1"])
{
[_stateArray replaceObjectAtIndex:(headerTag - 10) withObject:@"0"];
}else
{
[_stateArray replaceObjectAtIndex:(headerTag - 10) withObject:@"1"];
}
// 刷新tableView的數(shù)據(jù)
[self.tableView reloadSections:[NSIndexSet indexSetWithIndex:(headerTag - 10)] withRowAnimation:UITableViewRowAnimationAutomatic];
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
NSLog(@"第%ld組 -- 第%ld行",indexPath.section,indexPath.row);
}
@end
效果圖2
希望我的文章能對大家有所幫助奖唯。康撒米噠～～～
