应师傅要求编写个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://blog.csdn.net/u010123208/article/details/38176943
好了,QQ界面的源码在
http://download.csdn.net/detail/u010123208/7774851
欢迎下载