iOS 實現QQ界面 – iPhone手機開發技術文章 iPhone軟體開發教學課程

應師傅要求編寫個QQ界面來指教下我的代碼問題。

編寫個QQ界面,有三個組,每個組有人,並顯示在線不在線;

先看一下效果圖

這裡省瞭事因為我的圖片隻用瞭一張,如果要根據人的不同設置,隻要在cell裡面改一下就行瞭;vcD4KPHA+1vfSqsrHyrXP1rXju/fJz8Pmt9bX6dW5v6rE2sjdo6zU2bXju/fK1bvYyKWhozwvcD4KPHA+t8+7sLK7tuDLtaOsyc+yy6O6PC9wPgo8cD7O0sPHz8jAtLm51OzK/b7do7o8L3A+CjxwPjxwcmUgY2xhc3M9″brush:java;”> 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;

好瞭,我們來利用數據構造界面吧;

界面很簡單:

一個圖片是自己的頭像;

一個是自己的網名

一個在線狀態

下面就是一個表格(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];
        }
    }
    
}

上面是具體的方式,如果看不懂,那就去看我的另外一篇博客https://blog.csdn.net/u010123208/article/details/38176943

好瞭,QQ界面的源碼在

https://download.csdn.net/detail/u010123208/7774851

歡迎下載

發佈留言