應師傅要求編寫個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;
好了，我們來利用數據構造界面吧；
界面很簡單：
一個圖片是自己的頭像；
一個是自己的網名
一個在線狀態
下面就是一個表格（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://www.linuxidc.com/Linux/2014-08/105802.htm
好了，QQ界面的源碼在
------------------------------------------分割線------------------------------------------
免費下載地址在 http://linux.linuxidc.com/
用戶名與密碼都是www.linuxidc.com
具體下載目錄在 /2014年資料/8月/25日/iOS 實現QQ界面
下載方法見 http://www.linuxidc.com/Linux/2013-07/87684.htm
------------------------------------------分割線------------------------------------------
歡迎下載
