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

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

作者: 沙漠骑士 | 来源:发表于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;
}

沙漠骑士

相关文章

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

    在网络上找了很久也没有一个完整的关于用户信息界面的介绍,本文带来两种方法布局界面,两种方法的界面效果都是一致,第一...

  • 网易云信开发相关

    网易云信 UI 组件 · iOS聊天界面排版自定义 云信用户信息获取 云信提供的方式有两种 服务器同步信息 和 客...

  • 5-API

    1-框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。 微信提供的...

  • 短信链接打开小程序

    方案:使用微信提供的url link方法 生成短链接 发送给用户 用户点击短链接会跳转到微信提供默认的默认页面 进...

  • 微信小程序API之数据缓存

    微信小程序框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。本文主...

  • 如何优雅的处理微信小程序授权登录

    前言 当微信小程序项目中涉及到获取用户信息并实现用户登录时,可以通过微信官方提供的登录能力方便地获取微信的用户身份...

  • 小程序API汇总

    框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。 API列表: ...

  • 微信小程序开发入门:4 API

    框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。 说明: wx....

  • django: 微信网页授权

    微信网页授权基础知识 网页授权的最终目的就是获取微信的用户信息,微信的网页授权方式有两种 snsapi_base:...

  • 微信小程序Api

    框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。说明: wx.o...

网友评论

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

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