美文网首页
类似于微信 用户信息界面(提供两种方法)

类似于微信 用户信息界面(提供两种方法)

作者: 沙漠骑士 | 来源:发表于2016-08-17 16:28 被阅读175次

    在网络上找了很久也没有一个完整的关于用户信息界面的介绍,本文带来两种方法布局界面,两种方法的界面效果都是一致,第一种就是纯代码,看起来很累,但是简单,建议使用第二种,结合XIB,这样可以大量减少ViewController里面的代码减,效果图如下:


    效果图

    第一种方法

    {
    UIImageView *_userImg;
        UILabel *_phoneNoLabel;
        UILabel *_timeLabel;
        UILabel *_addressLabel;
        UILabel *_verificationLabel;
        UILabel *_changePasswordLabel;
    }
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
        UITableViewCell *cell = [[UITableViewCell alloc]init];
        cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
        UILabel *infoName = [[UILabel alloc]init];
        
        [cell addSubview:infoName];
        
        infoName.font = [UIFont systemFontOfSize:16.0];
    
        [infoName mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.equalTo(cell.mas_left).with.offset(20);
            make.top.equalTo(cell.mas_top).with.offset(10);
            make.width.equalTo(@120);
            make.height.equalTo(@30);
        }];
        
        if (indexPath.section ==0) {
            
            if (indexPath.row == 0) {
                
                UILabel *infoName1 = [[UILabel alloc]init];
                infoName1.text = @"头像";
                [cell addSubview:infoName1];
    
                [infoName1 mas_makeConstraints:^(MASConstraintMaker *make) {
                    make.left.equalTo(cell.mas_left).with.offset(20);
                    make.top.equalTo(cell.mas_top).with.offset(25);
                    make.width.equalTo(@120);
                    make.height.equalTo(@30);
                }];
                cell.accessoryType = UITableViewCellAccessoryNone;
                _userImg = [[UIImageView alloc]init];
                _userImg.image = [UIImage imageWithContentsOfFile:HEADPATH];
                if (_userImg.image == nil) {
                    _userImg.image = [UIImage imageNamed:@"default_header_Icon"];
                }
                [cell addSubview:_userImg];           
                CGFloat cornerHeight = 70;
                [_userImg mas_makeConstraints:^(MASConstraintMaker *make) {
                    make.right.equalTo(cell.mas_right).with.offset(-15);
                    make.top.equalTo(@(5));
                    make.width.equalTo(@(cornerHeight));
                    make.height.equalTo(@(cornerHeight));
                }];    
                _userImg.userInteractionEnabled = YES;
                [_userImg.layer setBorderWidth:1];
                [_userImg.layer setBorderColor:[UIColor lightGrayColor].CGColor];
                _userImg.layer.cornerRadius = cornerHeight/2;
                _userImg.layer.masksToBounds = YES;
                UITapGestureRecognizer *tap  = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(magnifyImage)];    
                [_userImg addGestureRecognizer:tap]; 
                [cell.layer addSublayer:_userImg.layer];    
            }else if (indexPath.row == 1){
                _userNameLabel = [[UILabel alloc]init];
                [cell addSubview:_userNameLabel];
                infoName.text = @"昵称";
                 _userNameLabel.text = account.UserName;
                _userNameLabel.textAlignment = NSTextAlignmentRight;
                _userNameLabel.textColor = [UIColor lightGrayColor];
                _userNameLabel.font = [UIFont systemFontOfSize:15.0];
                
                [_userNameLabel mas_makeConstraints:^(MASConstraintMaker *make) {
                    make.right.equalTo(cell.mas_right).with.offset(-30);
                    make.top.equalTo(infoName);
                    make.height.equalTo(@30);
                    make.left.equalTo(infoName.mas_right).with.offset(10);
                }];
                
            }
            else if (indexPath.row == 2){
                infoName.text = @"性别";
                _sexLabel = [[UILabel alloc] init];
                [cell addSubview:_sexLabel];
              //从模型中取数据,下同(用你自己的数据,测试的时候你可以先写死)
                YLAccount *account = [YLAccountTool account];
                _sexLabel.text = account.sexText; 
                _sexLabel.textAlignment = NSTextAlignmentRight;
                _sexLabel.textColor = [UIColor lightGrayColor];
                _sexLabel.font = [UIFont systemFontOfSize:15.0];
                [_sexLabel mas_makeConstraints:^(MASConstraintMaker *make) {
                    make.right.equalTo(cell.mas_right).with.offset(-30);
                    make.top.equalTo(infoName);
                    make.height.equalTo(@30);
                    make.left.equalTo(infoName.mas_right).with.offset(10);
                }];    
            }
            else if (indexPath.row == 3){
                _timeLabel = [[UILabel alloc]init];
                [cell addSubview:_timeLabel];
                infoName.text = @"出生日期";
                YLAccount *account = [YLAccountTool account];
                
                _timeLabel.text = account.Birthday;
                _timeLabel.textAlignment = NSTextAlignmentRight;
                _timeLabel.textColor = [UIColor lightGrayColor];
                _timeLabel.font = [UIFont systemFontOfSize:15.0];
                
                [_timeLabel mas_makeConstraints:^(MASConstraintMaker *make) {
                    make.right.equalTo(cell.mas_right).with.offset(-30);
                    make.top.equalTo(infoName);
                    make.height.equalTo(@30);
                    make.left.equalTo(infoName.mas_right).with.offset(10);
                }];
    
                
            }
            else if (indexPath.row == 4){
                cell.accessoryType = UITableViewCellAccessoryNone;
                _phoneNoLabel = [[UILabel alloc]init];
                [cell addSubview:_phoneNoLabel];
                infoName.text = @"手机号码";
                YLAccount *account = [YLAccountTool account];          
                _phoneNoLabel.text = [account.phoneText stringByReplacingCharactersInRange:NSMakeRange(3, 4) withString:@"****"];
                _phoneNoLabel.textAlignment = NSTextAlignmentRight;
                _phoneNoLabel.textColor = [UIColor lightGrayColor];
                _phoneNoLabel.font = [UIFont systemFontOfSize:15.0];        
                [_phoneNoLabel mas_makeConstraints:^(MASConstraintMaker *make) {
                    make.right.equalTo(cell.mas_right).with.offset(-30);
                    make.top.equalTo(infoName);
                    make.height.equalTo(@30);
                    make.left.equalTo(infoName.mas_right).with.offset(10);
                }];           
            }
        }
        else {
            if (indexPath.row == 0){
                infoName.text = @"地址管理";
                _addressLabel = [[UILabel alloc] init];
                [cell addSubview:_addressLabel];
                _addressLabel.textAlignment = NSTextAlignmentRight;
                _addressLabel.textColor = [UIColor lightGrayColor];
                _addressLabel.font = [UIFont systemFontOfSize:15.0];
                [_addressLabel mas_makeConstraints:^(MASConstraintMaker *make) {
                    make.right.equalTo(cell.mas_right).with.offset(-40);
                    make.top.equalTo(infoName);
                    make.height.equalTo(@30);
                    make.left.equalTo(infoName.mas_right).with.offset(100);
                }];
            }   
            else if (indexPath.row == 1){
                infoName.text = @"身份证校验";
                _verificationLabel = [[UILabel alloc] init];
                [cell addSubview:_verificationLabel];
                YLAccount *account = [YLAccountTool account];   
                _verificationLabel.text = account.Verification;
                if ([account.Verification isEqualToString:@"已验证"]) {
                    cell.userInteractionEnabled = NO;
                    cell.accessoryType = UITableViewCellAccessoryNone;
                }
                _verificationLabel.textAlignment = NSTextAlignmentRight;
                _verificationLabel.textColor = [UIColor lightGrayColor];
                _verificationLabel.font = [UIFont systemFontOfSize:15.0];
                [_verificationLabel mas_makeConstraints:^(MASConstraintMaker *make) {
                    make.right.equalTo(cell.mas_right).with.offset(-40);
                    make.top.equalTo(infoName);
                    make.height.equalTo(@30);
                    make.left.equalTo(infoName.mas_right).with.offset(10);
                }];
            }
            else if (indexPath.row == 2){
                infoName.text = @"修改密码";
                _changePasswordLabel = [[UILabel alloc] init];
                [cell addSubview:_changePasswordLabel];
                _changePasswordLabel.text = @"可修改密码";
                _changePasswordLabel.textAlignment = NSTextAlignmentRight;
                _changePasswordLabel.textColor = [UIColor lightGrayColor];
                _changePasswordLabel.font = [UIFont systemFontOfSize:15.0];
                [_changePasswordLabel mas_makeConstraints:^(MASConstraintMaker *make) {
                    make.right.equalTo(cell.mas_right).with.offset(-40);
                    make.top.equalTo(infoName);
                    make.height.equalTo(@30);
                    make.left.equalTo(infoName.mas_right).with.offset(10);
                }];
            }
        }    
        cell.selectionStyle = UITableViewCellSelectionStyleNone;   
        return cell;
    }
    

    第二种方法,为了图方便,我只建立了一个Xib(第一行没有单独建立Xib),否则ViewController里面代码量会更少

    Xib 里面的元素

    此处需注意的就是“>”元素是一个imageView,不是像纯代码那样通过属性来设置
    xib文件

    //.h
    #import <UIKit/UIKit.h>
    
    @interface YLUserDetailTableViewCell : UITableViewCell
    - (void)cellTitleWithTitle:(NSString *)title
                     hintTitle:(NSString *)hintTitle
                    isIndicate:(BOOL)isIndicate;
    @end
    
    //.m
    #import "YLUserDetailTableViewCell.h"
    @interface YLUserDetailTableViewCell ()
    //注意连线
    @property (weak, nonatomic) IBOutlet UILabel *cellTitle;
    @property (weak, nonatomic) IBOutlet UIImageView *rightIndicate;
    @property (weak, nonatomic) IBOutlet UILabel *rightHint;
    @end
    @implementation YLUserDetailTableViewCell
    
    - (void)awakeFromNib {
        // Initialization code
    }
    
    - (void)setSelected:(BOOL)selected animated:(BOOL)animated {
        [super setSelected:selected animated:animated];
    
        // Configure the view for the selected state
    }
    
    - (void)cellTitleWithTitle:(NSString *)title hintTitle:(NSString *)hintTitle isIndicate:(BOOL)isIndicate
    {
        self.cellTitle.text = title;
        self.rightHint.text = hintTitle;
        self.rightIndicate.hidden = isIndicate;
    }
    @end
    
    //ViewController,关联Masonry
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
        YLUserDetailTableViewCell * cell = GETNIB(NSStringFromClass([YLUserDetailTableViewCell class]));
        YLAccount *account = [YLAccountTool account];//模型数据
        if (indexPath.section == 0) {
            if (indexPath.row == 0) {
                [cell cellTitleWithTitle:self.dataArray[indexPath.section][indexPath.row] hintTitle:@"" isIndicate:NO];
                _userImg = [[UIImageView alloc]init];
                _userImg.image = [UIImage imageWithContentsOfFile:HEADPATH];
                if (_userImg.image == nil) {
                    _userImg.image = [UIImage imageNamed:@"default_header_Icon"];
                }
                
                [cell addSubview:_userImg];
                
                CGFloat cornerHeight = 70;
                [_userImg mas_makeConstraints:^(MASConstraintMaker *make) {
                    make.right.equalTo(cell.mas_right).with.offset(-15);
                    make.top.equalTo(@(5));
                    make.width.equalTo(@(cornerHeight));
                    make.height.equalTo(@(cornerHeight));
                }];
                
                _userImg.userInteractionEnabled = YES;
                [_userImg.layer setBorderWidth:1];
                [_userImg.layer setBorderColor:[UIColor lightGrayColor].CGColor];
                _userImg.layer.cornerRadius = cornerHeight/2;
                _userImg.layer.masksToBounds = YES;
                UITapGestureRecognizer *tap  = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(magnifyImage)];
                
                [_userImg addGestureRecognizer:tap];
                
                [cell.layer addSublayer:_userImg.layer];
    
            }
            if (indexPath.row == 1) {
                
                [cell cellTitleWithTitle:self.dataArray[indexPath.section][indexPath.row] hintTitle:account.UserName isIndicate:NO];
            }
            if (indexPath.row == 2) {
                [cell cellTitleWithTitle:self.dataArray[indexPath.section][indexPath.row] hintTitle:account.sexText isIndicate:NO];
            }
            if (indexPath.row == 3) {
                [cell cellTitleWithTitle:self.dataArray[indexPath.section][indexPath.row] hintTitle:account.Birthday isIndicate:NO];
            }
            if (indexPath.row == 4) {
                //做隐藏中间四位处理
                NSString *tel = [account.phoneText stringByReplacingCharactersInRange:NSMakeRange(3, 4) withString:@"****"];
                [cell cellTitleWithTitle:self.dataArray[indexPath.section][indexPath.row] hintTitle:tel isIndicate:YES];
            }
        }else if (indexPath.section == 1){
            if (indexPath.row == 0) {
                
                [cell cellTitleWithTitle:self.dataArray[indexPath.section][indexPath.row] hintTitle:@"" isIndicate:NO];
            }
            if (indexPath.row == 1) {
                [cell cellTitleWithTitle:self.dataArray[indexPath.section][indexPath.row] hintTitle:account.Verification isIndicate:NO];
            }
            if (indexPath.row == 2) {
                [cell cellTitleWithTitle:self.dataArray[indexPath.section][indexPath.row] hintTitle:@"可修改密码" isIndicate:NO];
            }
        }
    
        return cell;
    }
    

    沙漠骑士

    相关文章

      网友评论

          本文标题:类似于微信 用户信息界面(提供两种方法)

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