首页 > 代码库 > iOS 实现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<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
欢迎下载
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。