美文网首页iOS Developer
iOS实现类似于QQ点击弹出好友界面

iOS实现类似于QQ点击弹出好友界面

作者: 喝着咖啡敲代码 | 来源:发表于2016-11-17 17:04 被阅读810次

    一些局部效果的分享和自我总结

    iOS实现点击目录展开里面内容,效果如下图,点击图一的目录

    图一 图2

    实现于tableview,原理:每一个目录相当于一个section,目录的内容为cell,目录的标签(如上为本地环境检查设置)是一个headerview,点击headerview,重新计算cell的个数并reload tableview。同样的原理也可适用于collectionview ,代码如下:

    1.先声明两个全局变量并赋值一个用于判断改section是否为展开状态一个用于存放section里的row个数

    NSMutableArray *_arrOpenedInSection;

    NSArray *_arrRowOfSection;

    _arrOpenedInSection =[[NSMutableArray alloc]initWithObjects:@"0",@"0",@"0",@"0",nil];//用于判断是否为展开状态

    _arrRowOfSection =[[NSArray alloc]initWithObjects:@"3",@"3",@"2",@"2",nil];//每个section的个数 可自己定义于服务器传入数据的个数

    2.tableview部分代码section返回个数如果判断section为1则展开相应个数的row否则收起

    -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView

    { return4;}

    -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

    //判断每个section是否需要展开有返回相应个数的row

    if([[_arrOpenedInSection objectAtIndex:section]intValue]== 1){

    return[[_arrRowOfSection objectAtIndex:section]intValue];

    }

    return 0;

    }

    3.填入cell里面的数据

    -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath*)indexPath

    {

    TestingTableViewCell *cell =[tableView dequeueReusableCellWithIdentifier:@"Cell"];

    cell.selectionStyle = UITableViewCellSelectionStyleNone;

    switch(indexPath.section){

    case 0:{

    if([indexPath row]== 0){

    cell.labelContentItem.text = @"设备ID";

    }else if([indexPath row]== 1){

    cell.labelContentItem.text = @"手机类型";

    }else if([indexPath row]== 2){

    cell.labelContentItem.text = @"系统版本";

    }

    break;

    }

    …..

    }

    return cell;

    }

    4.重新部署viewForHeaderInSection设置一个button充满整个header点击的时候旋转一个icon提示已经旋转成功

    -(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{

    UIView *viewHeader =[[UIView alloc]initWithFrame:CGRectZero];

    viewHeader.backgroundColor =[UIColor whiteColor];

    for(int i = 0;i < 4;i++){

    if(section == i){

    //点击header,弹出或收起section的按钮与header一样大

    UIButton *btnContent =[[UIButton alloc]init];

    [viewHeader addSubview:btnContent];

    [btnContent setTitle:@"" forState:UIControlStateNormal];

    btnContent.tag = 100+section;//给每个特定的按钮添加标记

    [btnContent addTarget:self action:@selector(contentButtonClick:)forControlEvents:UIControlEventTouchUpInside];//添加响应事件

    //button的约束 Masonry实现

    [btnContent mas_makeConstraints:^(MASConstraintMaker *make){

    make.width.equalTo(viewHeader);

    make.height.equalTo(viewHeader);

    make.left.equalTo(viewHeader);

    make.right.equalTo(viewHeader);

    }];

    //点击header时候出现更多内容该图片旋转提示用户该section的不同状态

    UIImageView *imageIvMore =[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"iv_more"]];

    imageIvMore.contentMode = UIViewContentModeScaleAspectFill;

    [viewHeader addSubview:imageIvMore];

    [imageIvMore mas_makeConstraints:^(MASConstraintMaker *make){

    make.centerY.equalTo(labelIvName);

    make.right.equalTo(viewHeader).offset(-57);

    make.width.equalTo(@8);

    make.height.equalTo(@12);

    }];

    CGFloat rotation =[[_arrOpenedInSection objectAtIndex:section]intValue]?M_PI_2 : 0;

    imageIvMore.transform = CGAffineTransformMakeRotation(rotation);

    return viewHeader;

    }}

    return viewHeader;

    }

    5.header按钮点击响应事件

    -(void)contentButtonClick:(UIButton *)sender{

    //header的button事件,判断指定按钮对应的值:1弹出,0收起;判断完设置_ivOpenedInSectionArr的值,重新加载tableview

    if([[_arrOpenedInSection objectAtIndex:sender.tag - 100]intValue]== 0){

    [_arrOpenedInSection replaceObjectAtIndex:sender.tag - 100 withObject:@"1"];

    }

    else{

    [_arrOpenedInSection replaceObjectAtIndex:sender.tag - 100 withObject:@"0"];

    [self.tableview reloadData];

    }

    如上,实现了类似于QQ点击弹出内容效果,上述数据笔者是直接在本地存放的,需要读取传入数据的需要修改部分代码。

    欢迎coder来一起交流,萌新还在学习的路上...

    相关文章

      网友评论

        本文标题:iOS实现类似于QQ点击弹出好友界面

        本文链接:https://www.haomeiwen.com/subject/jvqtpttx.html