ios实现QQ界面

来源：互联网发布：ubuntu安装app 编辑：程序博客网时间：2024/05/19 17:24

应师傅要求编写个QQ界面来指教下我的代码问题。

编写个QQ界面，有三个组，每个组有人，并显示在线不在线；

先看一下效果图

这里省了事因为我的图片只用了一张，如果要根据人的不同设置，只要在cell里面改一下就行了；

主要是实现点击上面分组展开内容，再点击收回去。

废话不多说，上菜：

我们先来构造数据：

[objc] view plaincopy
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":@"离开"}]  
                                
                              }  
                          ];  

设置一个数组属性来接受数据；

[objc] view plaincopy
@property (nonatomic,copy) NSMutableArray * CellArray;  

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

界面很简单：

一个图片是自己的头像；

一个是自己的网名

一个在线状态

下面就是一个表格（tableview）

[objc] view plaincopy
@interface ViewController ()  
{  
    UITableView * TableV;  
}  
  
@end  

设置一个tableview ；

往里面放：

[objc] view plaincopy
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了

[objc] view plaincopy
-(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表示是打开的；

下面最难的就是，折叠打开的方式了；

[objc] view plaincopy
-(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

欢迎下载

0 0