组TableView实现QQ好友列表效果
实际效果图
1.在storyboard创建好 好友cell的样式
#import
@interface FriendTableViewCell : UITableViewCell
@property (weak, nonatomic) IBOutlet UIImageView *photoView;
@property (weak, nonatomic) IBOutlet UILabel *isOnLineLabel;
@property (weak, nonatomic) IBOutlet UILabel *stateLabel;
@property (weak, nonatomic) IBOutlet UILabel *nameLabel;
@end
3.好友数据模型groupModel
#import
@interface GroupModel : NSObject
@property (nonatomic, assign)BOOL isOpened;
@property (nonatomic, retain)NSString *groupName;
@property (nonatomic, assign)NSInteger groupCount;
@property (nonatomic, retain)NSArray *groupArray;
@end
4.在viewController
#在-(void)loadData 里加载好友数据;#
-(void)loadData{
dataSource = [[NSMutableArray alloc]init];
NSDictionary *JSONDic = @{@"group":
@[@{@"groupName":@"RM",
@"groupCount":@"2",
@"groupArray":@[
@{@"name":@"HAHA",
@"isOnLine":@"0",
@"state":@"你好"
},
@{@"name":@"智孝",
@"isOnLine":@"1",
@"state":@"你好"
}
]
},
@{@"groupName":@"我的好友",
@"groupCount":@"2",
@"groupArray":@[
@{@"name":@"小明",
@"isOnLine":@"1",
@"state":@"你好"
},
@{@"name":@"小红",
@"isOnLine":@"1",
@"state":@"你好"
}
]
}
]
};
for (NSDictionary *groupDic in JSONDic[@"group"]) {
GroupModel *group = [[GroupModel alloc]init];
group.groupName = groupDic[@"groupName"];
group.groupCount = [groupDic[@"groupCount"] intValue];
group.groupArray = groupDic[@"groupArray"];
group.isOpened = NO;
[dataSource addObject:group];
}
}
#给每个好友cell填充数据;#
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
return dataSource.count;
}
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
GroupModel *groupModel = dataSource[section];
NSInteger count = groupModel.isOpened?groupModel.groupArray.count:0;
return count;
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
FriendTableViewCell *cell =[tableView dequeueReusableCellWithIdentifier:@"friendCell"];
GroupModel *groupModel = dataSource[indexPath.section];
NSDictionary *friendInfoDic = groupModel.groupArray[indexPath.row];
cell.nameLabel.text = friendInfoDic[@"name"];
cell.photoView.image = [UIImage imageNamed:@"baike"];
if ([friendInfoDic[@"isOnLine"] isEqualToString:@"1"]) {
cell.isOnLineLabel.text = @"[在线]";
}else{
cell.isOnLineLabel.text = @"[不在线]";
}
cell.stateLabel.text = friendInfoDic[@"state"];
return cell;
}
#用设置sectionHeader实现分组的效果#
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
UIView *sectionView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 44)];
sectionView.backgroundColor = [UIColor colorWithWhite:1 alpha:1];
GroupModel *group = dataSource[section];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setFrame:sectionView.bounds];
[button setTag:section];
button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
[button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[button setTitle:group.groupName forState:UIControlStateNormal];
[button setTitleEdgeInsets:UIEdgeInsetsMake(0, 30, 0, 0)];
[button addTarget:self action:@selector(buttonPress:) forControlEvents:UIControlEventTouchUpInside];
[sectionView addSubview:button];
UIImageView *line = [[UIImageView alloc]initWithFrame:CGRectMake(0, button.frame.size.height-1, button.frame.size.width, 1)];
line.image = [UIImage imageNamed:@"line_real"];
[sectionView addSubview:line];
if (group.isOpened) {
UIImageView * _imgView = [[UIImageView alloc]initWithFrame:CGRectMake(10, (44-16)/2, 10, 12)];
[_imgView setImage:[UIImage imageNamed:@"ico_list"]];
[sectionView addSubview:_imgView];
/*
在OC中，通过transform属性可以修改对象的平移、缩放比例和旋转角度
常用的创建transform结构体方法分两大类
（1） 创建“基于控件初始位置”的形变
CGAffineTransformMakeTranslation（平移）
CGAffineTransformMakeScale（缩放）
CGAffineTransformMakeRotation（旋转）
（2） 创建“基于transform参数”的形变
CGAffineTransformTranslate
CGAffineTransformScale
CGAffineTransformRotate
在OC中，所有跟角度相关的数值，都是弧度值，180° = M_PI
正数表示顺时针旋转
负数表示逆时针旋转
*/
CGAffineTransform currentTransform = _imgView.transform;
CGAffineTransform newTransform = CGAffineTransformRotate(currentTransform, M_PI/2); // 在现在的基础上旋转指定角度
_imgView.transform = newTransform;
objc_setAssociatedObject(button, buttonKey, _imgView, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}else{
UIImageView * _imgView = [[UIImageView alloc]initWithFrame:CGRectMake(10, (44-16)/2, 10, 12)];
[_imgView setImage:[UIImage imageNamed:@"ico_list"]];
[sectionView addSubview:_imgView];
objc_setAssociatedObject(button, buttonKey, _imgView, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
UILabel *numberLabel = [[UILabel alloc]initWithFrame:CGRectMake(self.view.frame.size.width-40, (44-20)/2, 40, 20)];
[numberLabel setBackgroundColor:[UIColor clearColor]];
[numberLabel setFont:[UIFont systemFontOfSize:14]];
NSInteger onLineCount = 0;
for (NSDictionary *friendInfoDic in group.groupArray) {
if ([friendInfoDic[@"isOnLine"] isEqualToString:@"1"]) {
onLineCount++;
}
}
[numberLabel setText:[NSString stringWithFormat:@"%ld/%ld",onLineCount,group.groupCount]];
[sectionView addSubview:numberLabel];
return sectionView;
}
#我们怎么点击sectionHeader也就是分组，显示出分组里的好友呢？利用[self.tableView reloadSections:[NSIndexSet indexSetWithIndex:sender.tag] withRowAnimation:UITableViewRowAnimationAutomatic];的方法来实现#
对于OC-objc_getAssociatedObject 的详解:http://blog.leichunfeng.com/blog/2015/06/26/objective-c-associated-objects-implementation-principle/
- (void)buttonPress:(UIButton *)sender//headButton点击
{
GroupModel *groupModel = dataSource[sender.tag];
UIImageView *imageView = objc_getAssociatedObject(sender,buttonKey);
if (groupModel.isOpened) {
[UIView animateWithDuration:0.3 delay:0.0 options:UIViewAnimationOptionTransitionNone animations:^{
CGAffineTransform currentTransform = imageView.transform;
CGAffineTransform newTransform = CGAffineTransformRotate(currentTransform, -M_PI/2); // 在现在的基础上旋转指定角度
imageView.transform = newTransform;
} completion:^(BOOL finished) {
}];
}else{
[UIView animateWithDuration:0.3 delay:0.0 options: UIViewAnimationOptionAllowUserInteraction |UIViewAnimationOptionCurveLinear animations:^{
CGAffineTransform currentTransform = imageView.transform;
CGAffineTransform newTransform = CGAffineTransformRotate(currentTransform, M_PI/2); // 在现在的基础上旋转指定角度
imageView.transform = newTransform;
} completion:^(BOOL finished) {
}];
}
groupModel.isOpened = !groupModel.isOpened;
[self.tableView reloadSections:[NSIndexSet indexSetWithIndex:sender.tag] withRowAnimation:UITableViewRowAnimationAutomatic];
}