linux系统qq的界面,iOS 实现QQ界面

应师傅要求编写个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

{

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];

}

}

}

好了，QQ界面的源码在

------------------------------------------分割线------------------------------------------

具体下载目录在 /2014年资料/8月/25日/iOS 实现QQ界面

------------------------------------------分割线------------------------------------------

欢迎下载