iOS 实现QQ界面

应师傅要求编写个QQ界面来指教下我的代码问题。编写个QQ界面，有三个组，每个组有人，并显示在线不在线；先看一下效果图这里省了事因为我的图片只用了一张，如果要根据人的不同设置，只要在cell里面改一下就行了；主要是实现点击上面分组展开内容，再点击收回去。废话不多说，上菜：我们先来构造数据： NSArray * InitArray =@[
@{
@"Name":@"朋友",
@"Group":@"YES",
@"Child":@[
@{@"Name":@"张三",
@"State":@"在线",},
@{@"Name":@"王五",
@"State":@"离开"}
]
},
@{
@"Name":@"家人",
@"Group":@"YES",
@"Child":@[@{@"Name":@"姐姐",
@"State":@"在线"},
@{@"Name":@"妹妹",
@"State":@"在线"},
@{@"Name":@"哥哥",
@"State":@"离开"},
@{@"Name":@"弟弟",
@"State":@"离开"}]
},
@{
@"Name":@"陌生人",
@"Group":@"YES",
@"Child":@[
@{@"Name":@"小王",
@"State":@"在线"},
@{@"Name":@"小李",
@"State":@"离开"},
@{@"Name":@"小红",
@"State":@"离开"}]

}
];设置一个数组属性来接受数据；@property （nonatomic,copy） NSMutableArray * CellArray;好了，我们来利用数据构造界面吧；界面很简单：一个图片是自己的头像；一个是自己的网名一个在线状态下面就是一个表格（tableview）@interface ViewController （）
{
UITableView * TableV;
}@end设置一个tableview ；往里面放：UIImageView *IconImageV = [[UIImageView alloc]initWithFrame:CGRectMake（15, 30, 60, 60）];
IconImageV.image = [UIImage imageNamed:@"icon.png"];
[self.view addSubview:IconImageV];
UILabel *NameLabel = [[UILabel alloc]initWithFrame:CGRectMake（100, 30, 100, 30）];
NameLabel.text = @"雪松";
NameLabel.textAlignment = 1;//设置文字的对其方式居中
[self.view addSubview:NameLabel];
UILabel *StateLabel = [[UILabel alloc]initWithFrame:CGRectMake（100, 60, 100, 30）];
StateLabel.text = @"在线";
NameLabel.textAlignment = 1;
[self.view addSubview:StateLabel];

TableV = [[UITableView alloc]initWithFrame:CGRectMake（15, 100, 290, 350）];
TableV.delegate = self;
TableV.dataSource = self;
TableV.separatorStyle=0;
TableV.backgroundColor =[UIColor yellowColor];
[self.view addSubview:TableV];然后就是我们来构造table了-（UITableViewCell *）tableView:（UITableView *）tableView cellForRowAtIndexPath:（NSIndexPath *）indexPath
{

UITableViewCell *cell ;
NSDictionary * dectionary = [_CellArray objectAtIndex:indexPath.row];
if（[dectionary objectForKey:@"Group"]）
{
cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleValue2 reuseIdentifier:@"Group"];
cell.textLabel.text = [dectionary objectForKey:@"Name"];
cell.textLabel.textAlignment=0;
cell.backgroundColor = [UIColor grayColor];
cell.tag = 1;
}
else
{
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"Child"];
cell.imageView.image = [UIImage imageNamed: @"icon.png"];
cell.textLabel.text = [dectionary objectForKey:@"Name"];
cell.detailTextLabel.text = [dectionary objectForKey:@"State"];
}
return cell;

}这里我想说一下，这个tag ，我想了很半天，如何用来记录这个分组是打开的还是折叠的呢，没有办法，最后想到了tag 用tag=1表示折叠的，=2表示是打开的；

下面最难的就是，折叠打开的方式了；-（void）tableView:（UITableView *）tableView didSelectRowAtIndexPath:（NSIndexPath *）indexPath
{
NSMutableDictionary * dictionary = [NSMutableDictionary dictionaryWithDictionary:[_CellArray objectAtIndex:indexPath.row]];

UITableViewCell *cell = [TableV cellForRowAtIndexPath:indexPath];
NSLog（@"%@",cell.textLabel.text）;
if（[dictionary objectForKey:@"Group"]）
{
NSArray *ChildArray = [dictionary objectForKey:@"Child"];
NSMutableArray *PathArray = [NSMutableArray array];

if（cell.tag==1）
{
cell.tag=2;
for （int i =0 ;i<ChildArray.count;i++）
{
dictionary = [ChildArray objectAtIndex:i];
[_CellArray insertObject:dictionary atIndex:i+indexPath.row+1];
NSIndexPath *path = [NSIndexPath indexPathForRow:i+indexPath.row+1 inSection:0];
[PathArray addObject:path];
}
[TableV insertRowsAtIndexPaths:PathArray withRowAnimation:UITableViewRowAnimationAutomatic];
}
else
{
cell.tag=1;
NSMutableIndexSet * deleteSet= [NSMutableIndexSet indexSet];
for （NSDictionary *dic in ChildArray）
{
NSInteger row= [_CellArray indexOfObject:dic];
NSIndexPath * Path = [NSIndexPath indexPathForRow:row inSection:0];
[PathArray addObject:Path];
[deleteSet addIndex:row];
}
[_CellArray removeObjectsAtIndexes:deleteSet];
[TableV deleteRowsAtIndexPaths:PathArray withRowAnimation:UITableViewRowAnimationBottom];
}
}

}上面是具体的方式，如果看不懂，那就去看我的另外一篇文章 http://www.linuxidc.com/Linux/2014-08/105802.htm 好了，QQ界面的源码在------------------------------------------分割线------------------------------------------免费下载地址在 http://linux.linuxidc.com/用户名与密码都是www.linuxidc.com具体下载目录在 /2014年资料/8月/25日/iOS 实现QQ界面下载方法见 http://www.linuxidc.com/Linux/2013-07/87684.htm------------------------------------------分割线------------------------------------------欢迎下载本文永久更新链接地址：http://www.linuxidc.com/Linux/2014-08/105803.htm