1. 程式人生 > >iOS 實現QQ界面

iOS 實現QQ界面

mov end 點擊 gre blog state 數據 track prop

應師傅要求編寫個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

歡迎下載

iOS 實現QQ界面