组TableView实现QQ好友列表效果

时间:2023-01-04 17:33:25

实际效果图

组TableView实现QQ好友列表效果




1.在storyboard创建好 好友cell的样式

组TableView实现QQ好友列表效果

2.设置tableviewCell属性

#import <UIKit/UIKit.h>


@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 <Foundation/Foundation.h>


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

}

组TableView实现QQ好友列表效果


#用设置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.tagwithRowAnimation: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];

}