今天在工作的过程中,有一个页面的实现类似于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好友列表不同。由于时间问题,我没有实现。希望大神斧正。