类似于微信 用户信息界面（提供两种方法）
2016-08-17 本文已影响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;
}
