iOS开发UI系列之屏幕适配

来源：互联网发布：win32 编程编辑：程序博客网时间：2024/06/07 07:59

一. 设备分辨率

设备

尺寸

像素

点

iPhone \ iPhone 3G \ iPhone 3GS

3.5 inch

320 x 480

iPhone 4 \ iPhone 4S

3.5 inch

640 x 960

320 x 480

iPhone 5 \ iPhone 5C \ iPhone 5S

4.0 inch

640 x 1136

320 x 568

iPhone6

4.7 inch

750 x 1334

375 x 667

iPhone6 plus

5.5 inch

1242 x 2208

414 x 736

iPad \ iPad2

9.7 inch

768 x 1024

iPad 3(The new iPad) \ iPad4 \ iPad Air

9.7 inch

1536 x 2048

768 x 1024

iPad Mini

7.9 inch

768 x 1024

iPad Mini 2(iPad Mini with retina display)

7.9 inch

1536 x 2048

768 x 1024

二. autoreszing的设置

1. autoreszing和autolayout相关冲突,当使用autureszing时需要在storyboard中把autolayout关闭

2. 在storyboard中设置autoreszing

3. 代码实现autoreszing

    /*
     UIViewAutoresizingNone                 没有设置任何线段
     UIViewAutoresizingFlexibleLeftMargin   距离右边固定(距离左边可拉伸)
     UIViewAutoresizingFlexibleRightMargin  距离左边固定(距离右边可拉伸)
     UIViewAutoresizingFlexibleTopMargin    距离下边固定(距离上边可拉伸)
     UIViewAutoresizingFlexibleBottomMargin 距离上边固定(距离下边可拉伸)
     UIViewAutoresizingFlexibleWidth        宽度可拉伸
     UIViewAutoresizingFlexibleHeight       高度可拉伸
     */
blueView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin;

三. autolayout(自动布局)的使用

1. autolayout在storyboard中设置

2. autolayout实现动画

1> 将需要改变的约束条件进行托线

eg:将UILabel的上边距距离View的约束条件托线

/**
 *  约束条件托线
 */
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *labelTop;

2> 更改托线的属性的值

self.labelTop.constant += 100;

3> 执行动画

/**
 *  autolay动画实现
 */
- (void)move
{
    // 1.更改约束条件
    self.labelTop.constant += 100;
    // 2.执行动画
    [UIView animateWithDuration:2.0 animations:^{
        [self.label layoutIfNeeded];
    }];
}

3. autolayout代码实现布局

1> 创建View

将将某个控件添加到某个View前需要关闭autoresizing
blueView.translatesAutoresizingMaskIntoConstraints = NO;

UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
blueView.translatesAutoresizingMaskIntoConstraints = NO; // 将autuoresizing关闭
[self.view addSubview:blueView];
UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
redView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:redView];

2> 创建约束条件

创建约束条件

NSLayoutConstraint *blueLeftCon = [NSLayoutConstraint
     constraintWithItem:blueView
     attribute:NSLayoutAttributeLeft
     relatedBy:NSLayoutRelationEqual
     toItem:self.view
     attribute:NSLayoutAttributeLeft
     multiplier:1.0
     constant:30];
将约束条件添加到对应的控件上

[self.view addConstraint:blueLeftCon];

// 2.设置约束条件
/*
 attribute :
 NSLayoutAttributeLeft = 1,
 NSLayoutAttributeRight,
 NSLayoutAttributeTop,
 NSLayoutAttributeBottom,
 NSLayoutAttributeLeading,
 NSLayoutAttributeTrailing,
 NSLayoutAttributeWidth,
 NSLayoutAttributeHeight,
 NSLayoutAttributeCenterX,
 NSLayoutAttributeCenterY,
 NSLayoutAttributeBaseline,
 NSLayoutAttributeLastBaseline = NSLayoutAttributeBaseline,
 NSLayoutAttributeFirstBaseline NS_ENUM_AVAILABLE_IOS(8_0),
 
 NSLayoutAttributeLeftMargin NS_ENUM_AVAILABLE_IOS(8_0),
 NSLayoutAttributeRightMargin NS_ENUM_AVAILABLE_IOS(8_0),
 NSLayoutAttributeTopMargin NS_ENUM_AVAILABLE_IOS(8_0),
 NSLayoutAttributeBottomMargin NS_ENUM_AVAILABLE_IOS(8_0),
 NSLayoutAttributeLeadingMargin NS_ENUM_AVAILABLE_IOS(8_0),
 NSLayoutAttributeTrailingMargin NS_ENUM_AVAILABLE_IOS(8_0),
 NSLayoutAttributeCenterXWithinMargins NS_ENUM_AVAILABLE_IOS(8_0),
 NSLayoutAttributeCenterYWithinMargins NS_ENUM_AVAILABLE_IOS(8_0),
 
 NSLayoutAttributeNotAnAttribute = 0
 
 relateBy :
 NSLayoutRelationLessThanOrEqual = -1,
 NSLayoutRelationEqual = 0,
 NSLayoutRelationGreaterThanOrEqual = 1,
 */
NSLayoutConstraint *blueLeftCon = [NSLayoutConstraint
                                 constraintWithItem:blueView
                                 attribute:NSLayoutAttributeLeft
                                 relatedBy:NSLayoutRelationEqual
                                 toItem:self.view
                                 attribute:NSLayoutAttributeLeft
                                 multiplier:1.0
                                 constant:30];
NSLayoutConstraint *blueBottomCon = [NSLayoutConstraint
                                  constraintWithItem:blueView
                                  attribute:NSLayoutAttributeBottom
                                  relatedBy:NSLayoutRelationEqual
                                  toItem:self.view
                                  attribute:NSLayoutAttributeBottom
                                  multiplier:1.0
                                  constant:-30];
NSLayoutConstraint *blueHeightCon = [NSLayoutConstraint
                                     constraintWithItem:blueView
                                     attribute:NSLayoutAttributeHeight
                                     relatedBy:NSLayoutRelationEqual
                                     toItem:nil
                                     attribute:NSLayoutAttributeNotAnAttribute
                                     multiplier:0.0
                                     constant:50];
// 添加约束条件
[self.view addConstraint:blueLeftCon];
[blueView addConstraint:blueHeightCon];
[self.view addConstraint:blueBottomCon];
NSLayoutConstraint *redRightCon = [NSLayoutConstraint
                                   constraintWithItem:redView
                                   attribute:NSLayoutAttributeRight
                                   relatedBy:NSLayoutRelationEqual
                                   toItem:self.view
                                   attribute:NSLayoutAttributeRight
                                   multiplier:1.0
                                   constant:-30];
NSLayoutConstraint *redHeightCon = [NSLayoutConstraint
                                    constraintWithItem:redView
                                    attribute:NSLayoutAttributeHeight
                                    relatedBy:NSLayoutRelationEqual
                                    toItem:blueView
                                    attribute:NSLayoutAttributeHeight
                                    multiplier:1.0
                                    constant:0];
NSLayoutConstraint *redWidthCon = [NSLayoutConstraint
                                   constraintWithItem:redView
                                   attribute:NSLayoutAttributeWidth
                                   relatedBy:NSLayoutRelationEqual
                                   toItem:blueView
                                   attribute:NSLayoutAttributeWidth
                                   multiplier:1.0
                                   constant:0];
NSLayoutConstraint *redMarginCon = [NSLayoutConstraint
                                    constraintWithItem:redView
                                    attribute:NSLayoutAttributeLeft
                                    relatedBy:NSLayoutRelationEqual
                                    toItem:blueView
                                    attribute:NSLayoutAttributeRight
                                    multiplier:1.0
                                    constant:30];
NSLayoutConstraint *redBottomCon = [NSLayoutConstraint
                                    constraintWithItem:redView
                                    attribute:NSLayoutAttributeBottom
                                    relatedBy:NSLayoutRelationEqual
                                    toItem:blueView
                                    attribute:NSLayoutAttributeBottom
                                    multiplier:1.0
                                    constant:0];
[self.view addConstraint:redRightCon];
[self.view addConstraint:redHeightCon];
[self.view addConstraint:redWidthCon];
[self.view addConstraint:redMarginCon];
[self.view addConstraint:redBottomCon];

4.VFL语言

pVFL全称是Visual Format Language，翻译过来是“可视化格式语言”

pVFL是苹果公司为了简化Autolayout的编码而推出的抽象语言

VFL示例

H:[cancelButton(72)]-12-[acceptButton(50)]

pcanelButton宽72，acceptButton宽50，它们之间间距12

H:[wideView(>=60@700)]

wideView宽度大于等于60point，该约束条件优先级为700（优先级最大值为1000，优先级越高的约束越先被满足）

V:[redBox][yellowBox(==redBox)]

竖直方向上，先有一个redBox，其下方紧接一个高度等于redBox高度的yellowBox

H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|

水平方向上，Find距离父view左边缘默认间隔宽度，之后是FindNext距离Find间隔默认宽度；再之后是宽度不小于20的FindField，它和FindNext以及父view右边缘的间距都是默认宽度。（竖线“|” 表示superview的边缘）

VFL的使用

使用VFL来创建约束数组

+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;

format ：VFL语句

opts ：约束类型

metrics ：VFL语句中用到的具体数值

views ：VFL语句中用到的控件

创建一个字典（内部包含VFL语句中用到的控件）的快捷宏定义

NSDictionaryOfVariableBindings(...)

5. Masonry实现自动布局

1> 导入Masonry框架,将核心代码文件夹Masonry导入到项目中,并把此文件夹下的info.plist文件删除

2> 创建约束条件

left/equalTo : 后面跟对象

mas_left/mas_equalTo : 后面直接跟常量

[redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.right.equalTo(blueView.mas_right);
        make.top.equalTo(blueView.mas_bottom).offset(30);
        make.left.equalTo(self.view.mas_centerX);
        make.height.equalTo(blueView.mas_height);
    }];

0 0