类似qq好友列表的实现

今天在工作的过程中，有一个页面的实现类似于qq好友列表。经过上网查资料，自己进行了简单的实现。

数据源（为plist文件）：
<array>
 <dict>
  <key>groupname</key>
  <string>初中同学</string>
  <key>list</key>
  <array>
   <dict>
    <key>name</key>
    <string>初中同学1</string>
    <key>isonline</key>
    <true/>
    <key>imagename</key>
    <string>head01</string>
   </dict>
   <dict>
    <key>name</key>
    <string>初中同学2</string>
    <key>isonline</key>
    <true/>
    <key>imagename</key>
    <string>head02</string>
   </dict>
   <dict>
    <key>name</key>
    <string>初中同学3</string>
    <key>isonline</key>
    <false/>
    <key>imagename</key>
    <string>head03</string>
   </dict>
  </array>
 </dict>
 <dict>
  <key>groupname</key>
  <string>高中同学</string>
  <key>list</key>
  <array>
   <dict>
    <key>name</key>
    <string>高中同学1</string>
    <key>isonline</key>
    <true/>
    <key>imagename</key>
    <string>head08</string>
   </dict>
   <dict>
    <key>name</key>
    <string>高中同学2</string>
    <key>isonline</key>
    <true/>
    <key>imagename</key>
    <string>head05</string>
   </dict>
   <dict>
    <key>name</key>
    <string>初中同学3</string>
    <key>isonline</key>
    <false/>
    <key>imagename</key>
    <string>head07</string>
   </dict>
  </array>
 </dict>
 <dict>
  <key>groupname</key>
  <string>大学同学</string>
  <key>list</key>
  <array>
   <dict>
    <key>name</key>
    <string>大学同学1</string>
    <key>isonline</key>
    <true/>
    <key>imagename</key>
    <string>head04</string>
   </dict>
   <dict>
    <key>name</key>
    <string>大学同学2</string>
    <key>isonline</key>
    <false/>
    <key>imagename</key>
    <string>head07</string>
   </dict>
  </array>
 </dict>
</array>

通过代码，将上面的数据通过代码进行调整，可以实现类似于qq好友列表的样式：标题分别是初中同学、高中同学、大学同学。
  整体思路是这样的，整个页面是一个分组样式的tableView，这些标题可以放到headerView上，通过点击headerView来判断该分区是开还是收。不多说了，直接上代码。

@interface MyDevicesTableViewController ()

@property (nonatomic, retain)NSArray * dataList;            // 全部的好友信息
@property (nonatomic, retain)NSMutableArray * groupNames;   // 分组标题
@property (nonatomic, retain)NSMutableDictionary * headers; // 存放headerView的状态的字典
@property (nonatomic, retain)NSString * isOpen;             // headerView的状态

@end

/**
 *  获取数据
 */
- (void)loadData
{
    NSString *path = [[NSBundle mainBundle] pathForResource:@"friends" ofType:@"plist"];
    self.dataList = [NSArray arrayWithContentsOfFile:path];
    self.groupNames = [NSMutableArray arrayWithCapacity:self.dataList.count];
    
    for (NSInteger i = 0; i < self.dataList.count; i++)
    {
        NSDictionary *dict = self.dataList[i];
        [self.headers setObject:@"NO" forKey:[NSString stringWithFormat:@"%d",i]];
        [self.groupNames addObject:dict[@"groupname"]];
    }
//    NSLog(@"_dataList = %@", self.dataList);
//    NSLog(@"_headers = %@", self.headers);
//    NSLog(@"_groupNames = %@", self.groupNames);
}

实现tableView的代理方法：
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {

    return self.groupNames.count;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

    self.isOpen = [self.headers objectForKey:[NSString stringWithFormat:@"%d", section]];
    NSArray *array = self.dataList[section][@"list"];
    if ([self.isOpen isEqualToString:@"YES"]) {
        
        return array.count;
    } else {
        
        return 0;
    }
}

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 45;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return 50;
}

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    UIButton * button = [UIButton buttonWithType:UIButtonTypeCustom];
    button.tag = section + 100;
    button.bounds = CGRectMake(0, 0, self.view.frame.size.width, 45);
    button.backgroundColor = [UIColor colorWithRed:0.4 green:0.4 blue:0.8 alpha:1.0];
    button.titleLabel.font = [UIFont systemFontOfSize:16.0f];
    NSString *title = self.groupNames[section];
    [button setTitle:title forState:UIControlStateNormal];
    [button addTarget:self action:@selector(expandFriends:) forControlEvents:UIControlEventTouchUpInside];
    
    return button;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    static NSString *TableSampleIdentifier = @"myDevices";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:TableSampleIdentifier];
    
    if (cell == nil) {
        
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:TableSampleIdentifier];
    }
    
    NSArray *array = self.dataList[indexPath.section][@"list"];
    cell.textLabel.text = [array objectAtIndex:indexPath.row][@"name"];
    
    return cell;
}

- (void)expandFriends:(UIButton *)header
{
    
    NSInteger section = header.tag - 100;
    
    self.isOpen = [self.headers objectForKey:[NSString stringWithFormat:@"%d", section]];
    if ([self.isOpen isEqualToString:@"YES"]) {
        
        self.isOpen = @"NO";
    } else {
        
        self.isOpen = @"YES";
    }
    
    [self.headers setObject:self.isOpen forKey:[NSString stringWithFormat:@"%d", section]];
    [self.tableView reloadData];
}

以上就是全部的代码，希望能够对你起到帮助。当然，这只是进行了简单实现，没有进一步的完善。比如：标题现在没有图片，并且文字居中，和qq好友列表不同。由于时间问题，我没有实现。希望大神斧正。