iOS 實現QQ界面
阿新 • • 發佈:2017-06-03
mov end 點擊 gre blog state 數據 track prop
設置一個數組屬性 來接受數據;
好了,我們來利用數據構造界面吧;
設置一個tableview ;
然後就是我們來構造table了
這裏我想說一下。這個tag 。我想了非常半天,怎樣用來記錄這個分組是打開的還是折疊的呢。沒有辦法,最後想到了tag 用tag=1表示折疊的。=2表示是打開的;
上面是詳細的方式。假設看不懂,那就去看我的另外一篇博客http://blog.csdn.net/u010123208/article/details/38176943
應師傅要求編寫個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界面