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;

好了，我们来利用数据构造界面吧；

界面非常easy：

一个图片是自己的头像；

一个是自己的网名

一个在线状态

以下就是一个表格（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

欢迎下载