[课堂实践与项目]类似QQ好友列表的tableView的实现

思想;基本思路是把好友列表 作为 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;
}