iOS 實現QQ介面

標籤：介面   源碼   

應師傅要求編寫個QQ介面來指教下My Code問題。

編寫個QQ介面，有三個組，每個組有人，並顯示線上不線上；

先看一下

這裡省了事因為我的圖片只用了一張，如果要根據人的不同設定，只要在cell裡面改一下就行了；

主要是實現點擊上面分組展開內容，再點擊收回去。

廢話不多說，上菜：

我們先來構造資料：

 NSArray * InitArray [email protected][                           @{                               @"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

歡迎下載