UITableView仿QQ好友的分组收缩展开界面

界面效果

 

主要思路：

1.利用viewForHeaderInSection方法，自定义UITableView的header,在其上放置一个按钮

2.点击按钮后，判断指定section的数据是否展开

3.在返回numberOfRowsInSection数量时，如果发现是收缩的，则返回0，展开时，才给真实数据的行号

这样就可以达到显示/隐含数据的效果

 

实现代码：

- (void)viewDidLoad {

    [super viewDidLoad];

 

//创建demo数据

    data = [[NSMutableArray alloc]initWithCapacity : 2];

 

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];

 

[tbView reloadData];

}

1.自定义UITableView的header

 

// 设置header的高度
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {

   return 40;
}

 

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section;  
{
 
  
 UIView *hView;
 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)];

 }
  
 UIButton* eButton = [[UIButton alloc] init];
  
 //按钮填充整个视图
 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)];
   
  
 //设置按钮显示颜色
 eButton.backgroundColor = [UIColor lightGrayColor];
 [eButton setTitle:[[data objectAtIndex:section] objectForKey:@"groupname"] forState:UIControlStateNormal];
 [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;

} 

2. 点击按钮后相关处理代码

//对指定的节进行“展开/折叠”操作
-(void)collapseOrExpand:(int)section{
 Boolean expanded = NO;
 //Boolean searched = NO;
 NSMutableDictionary* d=[data objectAtIndex:section];
 
 //若本节model中的“expanded”属性不为空，则取出来
 if([d objectForKey:@"expanded"]!=nil)
  expanded=[[d objectForKey:@"expanded"]intValue];
 
 //若原来是折叠的则展开，若原来是展开的则折叠
 [d setObject:[NSNumber numberWithBool:!expanded] forKey:@"expanded"];

}

//返回指定节的“expanded”值
-(Boolean)isExpanded:(int)section{
 Boolean expanded = NO;
 NSMutableDictionary* d=[data objectAtIndex:section];
 
 //若本节model中的“expanded”属性不为空，则取出来
 if([d objectForKey:@"expanded"]!=nil)
  expanded=[[d objectForKey:@"expanded"]intValue];
 
 return expanded;
}

//按钮被点击时触发
-(void)expandButtonClicked:(id)sender{
 
 UIButton* btn= (UIButton*)sender;
 int section= btn.tag; //取得tag知道点击对应哪个块
 
 // NSLog(@"click %d", section);
 [self collapseOrExpand:section];
 
 //刷新tableview
 [tbView reloadData];
 
}

  
 [eButton release];
 return hView;

}

3. 实现UITableView的Delegate

 

- (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.
 
 
 //对指定节进行“展开”判断
 if (![self isExpanded:section]) {
  
  //若本节是“折叠”的，其行数返回为0
  return 0;
 }
 
 NSDictionary* d=[data objectAtIndex:section];
 return [[d objectForKey:@"users"] count];
 
}

// 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.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;
}

源代码下载地址：http://download.csdn.net/detail/txinfo/4131623