iphone第十节:屏幕适配(Masonry约束)

最新推荐文章于 2021-09-22 14:27:14 发布

原创最新推荐文章于 2021-09-22 14:27:14 发布 · 576 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#iPhone课程

iOS学习专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了如何在iOS开发中使用Masonry约束来布局界面，包括屏幕适配、自定义cell和数据绑定等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

屏幕适配(Masonry约束)

iPhoneNo917Class-Prefix.pch

#ifndef iPhoneNo917Class_ViewController_pch
#define iPhoneNo917Class_ViewController_pch

#define MAS_SHORTHAND

#define MAS_SHORTHAND_GLOBALS

#import "Masonry.h"

#import "GlobalDefine.h"

#endif

GlobalDefine

#ifndef iPhoneNo829Class_GlobalDefine_h
#define iPhoneNo829Class_GlobalDefine_h
//屏幕宽高
#define SCWIDTH [[UIScreen mainScreen] bounds].size.width
#define SCHEIGHT [[UIScreen mainScreen] bounds].size.height
//传16进制，设置颜色
#define UIColorFromRGB(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]
//比例
#define RATIO SCWIDTH / 320

#endif

cellModel

#import <Foundation/Foundation.h>

@interface CellModel : NSObject

@property (nonatomic, strong) NSString * itemLabel;
@property (nonatomic, strong) NSString * detailText;

- (id)initWithItemLabel:(NSString *)itemLabel andDetailText:(NSString *)detailText;

@end
#import "CellModel.h"

@implementation CellModel

- (id)initWithItemLabel:(NSString *)itemLabel andDetailText:(NSString *)detailText
{
    if (self = [super init])
    {
        _itemLabel = itemLabel;
        _detailText = detailText;
    }
    return self;
}

@end

First

#import <UIKit/UIKit.h>

//第一种cell只有一行，且数据固定，不需要model
@interface FirstTableViewCell : UITableViewCell

@end
#import "FirstTableViewCell.h"

@implementation FirstTableViewCell

- (void)awakeFromNib {
    // Initialization code
}

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier])
    {
        //中间的竖线
        UIImageView * line = [[UIImageView alloc] init];
        line.backgroundColor = [UIColor blackColor];
        [self.contentView addSubview:line];
        [line mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(0);
            make.size.equalTo(CGSizeMake(1, 47));
            make.centerX.equalTo(self.contentView);
        }];
        
        //左边的label
        UILabel * nameLabel = [[UILabel alloc] init];
        nameLabel.textColor = [UIColor grayColor];
        nameLabel.textAlignment = NSTextAlignmentLeft;
        nameLabel.font = [UIFont systemFontOfSize:14.0];
        nameLabel.backgroundColor = [UIColor clearColor];
        nameLabel.text = @"真实姓名";
        [self.contentView addSubview:nameLabel];
        [nameLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(9);
            make.left.equalTo(14);
            make.height.equalTo(21);
            make.width.equalTo(56);
        }];
        
        //左边的输入框
        UITextField * nameText = [[UITextField alloc] init];
        nameText.textAlignment = NSTextAlignmentRight;
        nameText.textColor = [UIColor blackColor];
        nameText.font = [UIFont systemFontOfSize:14.0];
        nameText.backgroundColor = [UIColor clearColor];
        nameText.text = @"李毅";
        [self.contentView addSubview:nameText];
        [nameText mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(9);
            make.left.equalTo(70);
            //-代表左边偏移
            make.right.equalTo(line).offset(-8);
            make.height.equalTo(21);
        }];

        //右边的label
        UILabel * sexLabel = [[UILabel alloc] init];
        sexLabel.textColor = [UIColor grayColor];
        sexLabel.textAlignment = NSTextAlignmentLeft;
        sexLabel.font = [UIFont systemFontOfSize:14.0];
        sexLabel.backgroundColor = [UIColor clearColor];
        sexLabel.text = @"性别";
        [self.contentView addSubview:sexLabel];
        [sexLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(9);
            make.left.equalTo(line).offset(14);
            make.height.equalTo(21);
            make.width.equalTo(56);
        }];
        
        //右边的输入框
        UITextField * sexText = [[UITextField alloc] init];
        sexText.textAlignment = NSTextAlignmentRight;
        sexText.textColor = [UIColor blackColor];
        sexText.font = [UIFont systemFontOfSize:14.0];
        sexText.backgroundColor = [UIColor clearColor];
        sexText.text = @"男";
        [self.contentView addSubview:sexText];
        [sexText mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(9);
            make.left.equalTo(line.right).offset(70);
            make.right.equalTo(-17);
            make.height.equalTo(21);
        }];
    }
    return self;
}
- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
    [super setSelected:selected animated:animated];

    // Configure the view for the selected state
}

@end

Second

#import <UIKit/UIKit.h>
#import "CellModel.h"

@interface SecondTableViewCell : UITableViewCell

@property (nonatomic, strong) UILabel * itemLabel;
@property (nonatomic, strong) UITextField * detailText;

@end
#import "SecondTableViewCell.h"

@implementation SecondTableViewCell

- (void)awakeFromNib {
    // Initialization code
}

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier])
    {
        //label
        _itemLabel = [[UILabel alloc] init];
        _itemLabel.textColor = [UIColor grayColor];
        _itemLabel.textAlignment = NSTextAlignmentLeft;
        _itemLabel.font = [UIFont systemFontOfSize:14.0];
        _itemLabel.backgroundColor = [UIColor clearColor];
        [self.contentView addSubview:_itemLabel];
        [_itemLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(9);
            make.left.equalTo(14);
            make.height.equalTo(21);
            make.width.equalTo(56);
        }];
        
        //输入框
        _detailText = [[UITextField alloc] init];
        _detailText.textAlignment = NSTextAlignmentRight;
        _detailText.textColor = [UIColor blackColor];
        _detailText.font = [UIFont systemFontOfSize:14.0];
        _detailText.backgroundColor = [UIColor clearColor];
        [self.contentView addSubview:_detailText];
        [_detailText mas_makeConstraints:^(MASConstraintMaker *make) {
            make.top.equalTo(9);
            make.left.equalTo(70);
            make.right.equalTo(-17);
            make.height.equalTo(21);
        }];
    }
    return self;
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
    [super setSelected:selected animated:animated];

    // Configure the view for the selected state
}

@end

Custom

#import <UIKit/UIKit.h>

@interface CustomHeaderImage : UIView

@end
#import "CustomHeaderImage.h"

@implementation CustomHeaderImage

- (id)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame])
    {
        UIImageView * bigImage = [[UIImageView alloc] init];
        bigImage.image = [UIImage imageNamed:@"contact_图层-2"];
        [self addSubview:bigImage];
        [bigImage mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.right.top.bottom.equalTo(0);
        }];
        
        UIImageView * headImage = [[UIImageView alloc] init];
        headImage.image = [UIImage imageNamed:@"头像bg"];
        [bigImage addSubview:headImage];
        [headImage mas_makeConstraints:^(MASConstraintMaker *make) {
            make.centerX.equalTo(bigImage);
            make.centerY.equalTo(bigImage);
        }];
    }
    return self;
}

@end

Controller

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property (nonatomic, strong) UITableView * tableView;

@end

#import "ViewController.h"
#import "CellModel.h"
#import "FirstTableViewCell.h"
#import "SecondTableViewCell.h"
#import "CustomHeaderImage.h"

@interface ViewController () <UITableViewDataSource, UITableViewDelegate>

{
    NSArray * itemArray;
    NSArray * detailArray;
    NSMutableArray * modelArray;
}

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    [self initTableView];
    
    itemArray = [NSArray arrayWithObjects:@"出生日期", @"身份证号", @"手机号码", @"单位", @"职位", @"座机", @"邮箱", nil];
    detailArray = [NSArray arrayWithObjects:@"2000-01-01", @"1234567890", @"18600882776", @"国务院", @"总理",@"010-110", @"1234567890@qq.com", nil];
    modelArray = [[NSMutableArray alloc] initWithCapacity:1];
    
    for (int i = 0; i < 7; i++)
    {
        CellModel * model = [[CellModel alloc] initWithItemLabel:[itemArray objectAtIndex:i] andDetailText:[detailArray objectAtIndex:i]];
        [modelArray addObject:model];
    }
    
}

//headerView
//- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
//{
//    UIView * header = [[UIView alloc] initWithFrame:CGRectMake(0, 64, SCWIDTH, 142 * RATIO)];
//    CustomHeaderImage * headerImage = [[CustomHeaderImage alloc] init];
//    [header addSubview:headerImage];
//    [headerImage mas_makeConstraints:^(MASConstraintMaker *make) {
//        make.left.right.top.bottom.equalTo(0);
//    }];
//    return header;
//}
//
//- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
//{
//    return 142 * RATIO;
//}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [modelArray count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    CellModel * model = [modelArray objectAtIndex:indexPath.row];
    FirstTableViewCell * firstCell = nil;
    SecondTableViewCell * secondCell = nil;
    //根据行数，返回不同的cell
    if (indexPath.row == 0)
    {
        NSString * reuseID = @"reuseIDFirst";
        firstCell = [_tableView dequeueReusableCellWithIdentifier:reuseID];
        if (!firstCell)
        {
            firstCell = [[FirstTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:reuseID];
            return firstCell;
        }
    }
    else
    {
        NSString * reuseID = @"reuseIDSecond";
        secondCell = [_tableView dequeueReusableCellWithIdentifier:reuseID];
        if (!secondCell)
        {
            secondCell = [[SecondTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:reuseID];
        }
        secondCell.itemLabel.text = model.itemLabel;
        secondCell.detailText.text = model.detailText;
    }
    return secondCell;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (indexPath.row == 0)
    {
        return 47;
    }
    else
        return 44;
}

- (void)initTableView
{
    _tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, SCWIDTH, SCHEIGHT) style:UITableViewStylePlain];
    //分隔线
//    _tableView.separatorInset =  UIEdgeInsetsMake(0, 0, 0, 0);
    _tableView.separatorInset =  UIEdgeInsetsZero;
    _tableView.layoutMargins = UIEdgeInsetsZero;
    _tableView.separatorColor = [UIColor blackColor];
    //下方(多余)分割线去掉
    _tableView.tableFooterView = [[UIView alloc] init];
    
    //headerView
    CustomHeaderImage * headerImage = [[CustomHeaderImage alloc] init];
    _tableView.tableHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, SCWIDTH, 142 * RATIO)];

    [_tableView.tableHeaderView addSubview:headerImage];
    [headerImage mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.right.equalTo(0);
        make.top.equalTo(0);
        make.height.equalTo(142 * RATIO);
    }];

    _tableView.dataSource = self;
    _tableView.delegate = self;
    [self.view addSubview:_tableView];
}

//iOS8需要实现这个才能让分隔线等于屏宽
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    if ([cell respondsToSelector:@selector(setSeparatorInset:)]) {
        [cell setSeparatorInset:UIEdgeInsetsZero];
    }
    if ([cell respondsToSelector:@selector(setLayoutMargins:)]) {
        [cell setLayoutMargins:UIEdgeInsetsZero];
    }
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end