iOS 实现QQ界面

来源：互联网发布：unity3d 烘焙编辑：程序博客网时间：2024/05/28 23:12

应师傅要求编写个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

欢迎下载

12 2