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

在网络上找了很久也没有一个完整的关于用户信息界面的介绍，本文带来两种方法布局界面，两种方法的界面效果都是一致，第一种就是纯代码，看起来很累，但是简单，建议使用第二种，结合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;
}

沙漠骑士

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,670评论 5赞 460
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,928评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,926评论 0赞 320
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,238评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,112评论 4赞 356
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,138评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,545评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,232评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,496评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,596评论 2赞 310
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,369评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,226评论 3赞 313
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,600评论 3赞 299
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,906评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,185评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,516评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,721评论 2赞 335

推荐阅读更多精彩内容

  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,946评论 4赞 60
  • 淡不了美酒三杯
    小时候是很怕酒的。我想是因为从小没有得到这方面的熏陶的缘故。父亲的肾结石，据说就是烟酒引起，所以他老人家在多年前就...
    当时明月在zh阅读 349评论 0赞 1
  • 从你的全世界路过，感动的想流泪
    最近在读张佳嘉的《从你的全世界路过》，我已记不清上次看书看到两眼湿润是什么时候了。但看这本小说的时候，每看完一篇都...
    沧海一木阅读 550评论 0赞 3
  • 装38，最后我是1号战斗机
    一直在38两个号中纠结，最终自己确定是3号，跟组长聊完后，妥妥的1，而且是1中的战斗机。先说说组长是怎么一步步破碎...
    刘老师0阅读 292评论 0赞 5