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

欢迎下载