思想;基本思路是把好友列表 作为 headerView。只需要把headerVIew使用Button完全覆盖就行了。。
这个demo是别人的。但是我觉得这个demo真的很不错,但是数据处理方面还有少许问题。我就来分析吧
先看看效果
2.先看看h文件 ,我会在代码注释中一一解释
#import <UIKit/UIKit.h>
@interface expandListViewController : UIViewController<UITableViewDelegate, UITableViewDataSource> {
UITableView *tbView; //tableVIew 表
NSMutableArray *data; //一个数据demo
}
@end
3.再看看m文件
1)先看看我们的数据文件,以便于在后面加载的时候有一个清晰的认识
#import "expandListViewController.h"
@implementation expandListViewController
- (void)viewDidLoad {
[super viewDidLoad];
//创建demo数据
data = [[NSMutableArray alloc]initWithCapacity : 2]; //数组作为root,里面有两个字典,每个字典又包含两个key-value值。一个是string类型的,一个是array类型的。
NSMutableDictionary *dict = [[NSMutableDictionary alloc]initWithCapacity : 2];
[dict setObject:@"好友" forKey:@"groupname"];
//利用数组来填充数据
NSMutableArray *arr = [[NSMutableArray alloc] initWithCapacity : 2];
[arr addObject: @"关羽"];
[arr addObject: @"张飞"];
[arr addObject: @"孔明"];
[dict setObject:arr forKey:@"users"];
[arr release];
[data addObject: dict];
[dict release];
dict = [[NSMutableDictionary alloc]initWithCapacity : 2];
[dict setObject:@"对手" forKey:@"groupname"];
arr = [[NSMutableArray alloc] initWithCapacity : 2];
[arr addObject: @"曹操"];
[arr addObject: @"司马懿"];
[arr addObject: @"张辽"];
[dict setObject:arr forKey:@"users"];
[arr release];
[data addObject: dict];
[dict release];
//创建一个tableView视图
//创建UITableView 并指定代理
CGRect frame = [UIScreen mainScreen].applicationFrame;
frame.origin.y = 0;
tbView = [[UITableView alloc]initWithFrame: frame style:UITableViewStylePlain];
[tbView setDelegate: self];
[tbView setDataSource: self];
[self.view addSubview: tbView];
[tbView release];
//刷新当前的tableView
[tbView reloadData];
}
2)我们来看看UitableViewDatasource的除 cell绘制的实现文件
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
// Return the number of sections.
//返回分组的个数。由于我们的里面有 好友,敌人两项,所以就分两组
return [data count];
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
// Return the number of rows in the section.
//返回 每个分组中的row的个数。我们要依赖于选中的section的展开与否进行return相应的值
//对指定节进行“展开”判断
if (![self isExpanded:section]) {
//若本节是“折叠”的,其行数返回为0
return 0;
}
NSDictionary* d=[data objectAtIndex:section];
return [[d objectForKey:@"users"] count]; //返回相应的section的array的个数。
}
// 设置header的高度
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
return 40;
}
3)设置内嵌tableView的View。我们设置为点击headerView的时候进行展开相应的View。
这段代码比较复杂晦涩,后续我会简化
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section;
{
UIView *hView; //设置点击出现的View的大小
if (UIInterfaceOrientationLandscapeRight == [[UIDevice currentDevice] orientation] ||
UIInterfaceOrientationLandscapeLeft == [[UIDevice currentDevice] orientation])
{
hView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 480, 40)];
}
else
{
hView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 320, 40)];
//self.tableView.tableHeaderView.frame = CGRectMake(0.f, 0.f, 320.f, 44.f);
}
//UIView *hView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 320, 40)];
UIButton* eButton = [[UIButton alloc] init];
//按钮填充整个headerView视图
eButton.frame = hView.frame;
[eButton addTarget:self action:@selector(expandButtonClicked:)
forControlEvents:UIControlEventTouchUpInside];
eButton.tag = section;//把节号保存到按钮tag,以便传递到expandButtonClicked方法
//根据是否展开,切换按钮显示图片
if ([self isExpanded:section])
[eButton setImage: [ UIImage imageNamed: @"btn_down.png" ] forState:UIControlStateNormal];
else
[eButton setImage: [ UIImage imageNamed: @"btn_right.png" ] forState:UIControlStateNormal];
//由于按钮的标题,
//4个参数是上边界,左边界,下边界,右边界。
eButton.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
[eButton setTitleEdgeInsets:UIEdgeInsetsMake(5, 10, 0, 0)];
[eButton setImageEdgeInsets:UIEdgeInsetsMake(5, 5, 0, 0)];
//设置headerView上button的image,title的位置
//设置按钮显示颜色
eButton.backgroundColor = [UIColor lightGrayColor];
//根据我们字典里的group name设置button的title值
[eButton setTitle:[[data objectAtIndex:section] objectForKey:@"groupname"] forState:UIControlStateNormal]; //设置button的title。
[eButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
//[eButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[eButton setBackgroundImage: [ UIImage imageNamed: @"btn_listbg.png" ] forState:UIControlStateNormal];//btn_line.png"
//[eButton setTitleShadowColor:[UIColor colorWithWhite:0.1 alpha:1] forState:UIControlStateNormal];
//[eButton.titleLabel setShadowOffset:CGSizeMake(1, 1)];
[hView addSubview: eButton];
[eButton release];
return hView;
}
4)cell的绘制
// Customize the appearance of table view cells.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellIdentifier = @"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
}
NSDictionary* m= (NSDictionary*)[data objectAtIndex: indexPath.section];
NSArray *d = (NSArray*)[m objectForKey:@"users"];
if (d == nil) {
return cell;
}
//显示联系人名称
cell.textLabel.text = [d objectAtIndex: indexPath.row];
//cell属性的设置
cell.textLabel.backgroundColor = [UIColor clearColor];
//UIColor *newColor = [[UIColor alloc] initWithRed:(float) green:(float) blue:(float) alpha:(float)];
cell.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"btn_listbg.png"]];
cell.imageView.image = [UIImage imageNamed:@"mod_user.png"];
//选中行时灰色
cell.selectionStyle = UITableViewCellSelectionStyleGray;
[cell setAccessoryType: UITableViewCellAccessoryDisclosureIndicator];
return cell;
}