葡京网投哪个正规 > 联系我们 > AutoLayout从入门到精通,图的详解

原标题:AutoLayout从入门到精通,图的详解

浏览次数:132 时间:2019-11-30

iOS_关于封装AutoLayout的框架ZLAutoLayout

目前在iOS开发中,越来越多的不同尺寸的屏幕,让屏幕适配成为开发要点。

回顾之前的开发中,我们要么是用xib,要么用代码编写控件,需要拉伸则设置View的autoresizingMask里面的枚举值来进行设置拉伸属性。

这些都是绝对布局。

而AutoLayout的优势在那呢?

葡京网投哪个正规,AutoLayout是相对布局,也可以绝对布局。

什么是相对又什么是绝对呢?

相对是指,可以有参照点(View)来进行对它参考点进行约束。

绝对是指,只针对父View来进行布局排版,不能根据兄弟View来进行布局。

 

 

网上的AutoLayout教程已经非常之多。

那么我现在想讲的是ZLAutoLayout的框架,我自己抽空封装下,如果存有bug,请及时反馈~~

 

 

代码+示例程序的gitHub地址:

底层也是封装了AutoLayout的API,只不过写起来要简单快速很多。

只需要把分类文件导入到项目里即可。

 


 

常用的几个方法


 

// 相对父视图来进行约束,比如view.left = view.superview.left + 可选的inset.

- (void)autoPinSuperViewDirection:(ZLAutoLayoutDirection)direction;

- (void)autoPinSuperViewDirection:(ZLAutoLayoutDirection)direction withInset:(CGFloat)inset;



// view对view进行约束,比如aView.left = bView.left + 可选的multiplier + inset.

- (void)autoPinDirection:(ZLAutoLayoutDirection)direction toPinDirection:(ZLAutoLayoutDirection)toDircetion ofView:(UIView *)view;

- (void)autoPinDirection:(ZLAutoLayoutDirection)direction toPinDirection:(ZLAutoLayoutDirection)toDircetion ofView:(UIView *)view withInset:(CGFloat)inset;

- (void)autoPinDirection:(ZLAutoLayoutDirection)direction toPinDirection:(ZLAutoLayoutDirection)toDircetion ofView:(UIView *)ofView multiplier:(CGFloat)multiplier withInset:(CGFloat)inset;

// 设置view的尺寸,宽高或者宽于高

- (void)autoSetViewSize:(CGSize)size;

- (void)autoSetViewSizeWidthOrHeight:(ZLAutoLayoutSize)alSize withInset:(CGFloat)inset;

// view相对superView的垂直方向

- (void)autoSetAlignToSuperView:(ZLAutoLayoutAlign)align;

- (void)autoSetAlignToSuperView:(ZLAutoLayoutAlign)align withInset:(CGFloat)inset;

// view相对view的垂直方向 + 可选的inset

- (void)autoSetAlign:(ZLAutoLayoutAlign)align ofView:(UIView *)ofView;

- (void)autoSetAlign:(ZLAutoLayoutAlign)align ofView:(UIView *)ofView withInset:(CGFloat)inset;

// 让view与superView的约束一样

- (void)autoEqualToSuperViewAutoLayouts;

---- 部分代码实例 ----

 

两个View相对布局

 

 

// 实例两个View
    UIView *redView = [UIView instanceAutoLayoutView];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];

    UIView *blueView = [UIView instanceAutoLayoutView];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];

    // 相对父控件的Left/Top
    [redView autoPinSuperViewDirection:ZLAutoLayoutDirectionLeft];
    [redView autoPinSuperViewDirection:ZLAutoLayoutDirectionTop];
    // 设置redView的宽为100,高为200
    [redView autoSetViewSize:CGSizeMake(100, 200)];

    // 设置blueView的宽跟高跟redView相同
    [blueView autoSetViewSizeWidthOrHeight:ZLAutoLayoutSizeHeight ofView:redView];
    [blueView autoSetViewSizeWidthOrHeight:ZLAutoLayoutSizeWidth ofView:redView];
    // 设置blueView的Top与Left相对redView来布局
    [blueView autoPinDirection:ZLAutoLayoutDirectionTop toPinDirection:ZLAutoLayoutDirectionBottom ofView:redView withInset:20];
    [blueView autoPinDirection:ZLAutoLayoutDirectionLeft toPinDirection:ZLAutoLayoutDirectionLeft ofView:redView];

 

运行效果

葡京网投哪个正规 1

 

 

 

目前在iOS开发中,越来越多的不同尺寸的屏幕,让屏幕适配成为开发要点。 回顾之前的开发中,我们要...

iOS回顾笔记(06) -- AutoLayout从入门到精通

随着iOS设备屏幕尺寸的增多,当下无论是纯代码开发还是Xib/StoryBoard开发,自动布局已经是必备的开发技能了。

我使用自动布局也有一段时间了,遇到了不少问题,在解决的过程中也收获了很多知识。尤其是在使用熟练之后开发速度上的提升非常明显。这里把AutoLayout的基本使用和个人使用心得汇总一下,希望能帮助到大家!

原文链接:

适配的概念

适配主要分两种

  • 系统适配

    系统适配主要指适配不同版本系统,如 iOS 6(拟物化) 到 iOS 7(扁平化)两个系统系统的适配,我们需要写不同的代码来保证项目在不同系统上的美观与可用。

  • 屏幕适配

    屏幕适配主要是针对不同尺寸的屏幕进行适配,同一个页面再不同尺寸屏幕上的布局,如Safari在手机横竖屏下的布局等等。

常见设备的分辨率:

葡京网投哪个正规 2

转载2015年10月21日 14:17:03

屏幕适配发展史

  • iPhone 4s 以前的时代

iPhone 4s 和之前设备的屏幕都是3.5英寸,可以说没有屏幕适配,所有的坐标点就是 320*480.
适配完全使用frame、bounds、center进行计算,代码基本写死。

// 直接写死
UIImageView *iv = [UIImageView new];
iv.frame = CGRectMake(50, 300, 200, 80);
[self.view addSubview:iv];
  • iPad、iPhone横屏时代

    • 出现 AutoResizing 技术

      • 葡京正网网投,优点:

        • 解决了父子控件相对位置的问题
        • 子控件可根据父控件的行为发生相对应的变化
        • 让横竖屏的适配变得简单
        • 无法处理兄弟控件相对位置的问题
      • 使用前提:

        • 关闭AutoLayout
      • 局限性:

        • 只能解决父子控件的相对关系,
        • 无法解决兄弟控件之间的相对关系

       

    • AutoResizing在Xib中的使用介绍

    在Xib中主要有6根线来设置AutoResizing

葡京网投哪个正规 3
外部四根线

外部四根线分别表示上、下、左、右四个方向,子控件相对于父控件的距离。
实线:表示固定位置
虚线:表示非固定位置

**内部两根线**

内部两根线分别表示水平和竖直方向,子控件是否根据父控件等比例缩放。
实线:该方向上跟随父控件等比缩放
虚线:该方向上不跟随父控件等比缩放


- **AutoResizing在代码中的使用介绍**

通常代码中子控件在添加到父控件之前设置AutoResizing对应的属性值,其代码属性值和Xib中相反,代码中设置可变部分,Xib中是选中部分为固定不变的。

    // 上下左右四个方向参数(与Xib中设置相反)
    UIViewAutoresizingNone                 = 0, 
    UIViewAutoresizingFlexibleLeftMargin   = 1 << 0,
    UIViewAutoresizingFlexibleRightMargin  = 1 << 2,
    UIViewAutoresizingFlexibleTopMargin    = 1 << 3,
    UIViewAutoresizingFlexibleBottomMargin = 1 << 5

    // 宽高是否根据父控件等比缩放
    UIViewAutoresizingFlexibleHeight       = 1 << 4,
    UIViewAutoresizingFlexibleWidth        = 1 << 1,

比如要设置一个UIView与其父控件关系为右下角对齐
示例代码如下:

XYBannerView *banner = [XYBannerView bannerView];
banner.frame = CGRectMake(80, 20, 200, 90);
banner.autoresizingMask = UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleLeftMargin;
[self.view addSubview:banner];
  • iOS 6之后

    • 出现了AutoLayout技术

    AutoLayout弥补了AutoResizing的局限性,不仅可以解决父子控件之间的相对关系,还可以描述兄弟控件之间的相对关系,还可以描述自身关系等,功能非常强大。

    AutoLayout的两个核心概念

    • 参照
    • 约束

9564

AutoLayout介绍和使用

Xib中常用的面板

Xib 主要有以下三个面板

  • Align : 对齐方式

葡京网投哪个正规 4

  • Add New Constraint: 添加新的约束

葡京网投哪个正规 5

  • Resolve Auto Layout Issues : 修复自动布局问题 葡京网投哪个正规 6

AutoLayout的使用原则

AutoLayout是为了确定View的frame(确定View的Point和Size)。

  • 至少添加四个约束,宽高和位置来确定frame
  • 避免约束冲突
    1.如同一个View的宽设置两次,一个100,一个200,导致无法确定,形成冲突,冲突属于错误,须解决: 葡京网投哪个正规 7
    2.如约束不够,无法确定View的frame时候也会报错:

葡京网投哪个正规 8

  • AutoLayout的警告:警告一般是Xib中添加好了约束,但是对应View没有移动到对应位置导致。这种情况程序运行起来之后会是正确约束的样子,而不是Xib中的样子。

    • 警告解决办法:
      1.选中View,update frame 或使用快捷键‘command’ + ‘option’ + ‘=’
      2.如图:葡京网投哪个正规 9
  • 约束的修改:
    约束的修改有很多种方式,下面列举一种我常用的方式!
    葡京网投哪个正规 10

注意:上面说的Add New Constaints面板只能添加新的约束,修改不能在那里。

初代iPhone

AutoLayout案例练习

AutoLayout这种灵活的实用技术最直接的学习办法就是实战练习,下面几个小案例来展示一下。

2007年,初代iPhone发布,屏幕的宽高是 320 x 480 像素。下文也是按照宽度,高度的顺序排列。这个分辨率一直到iPhone 3GS也保持不变。

练习1

1.在控制器底部添加两个View,一个红色,一个蓝色
2.两个View的高度、宽度永远相等
3.距离父控件左边、右边、两者中间和距底边的距离相等
示意如图:
葡京网投哪个正规 11

根据:添加四个约束确定frame,避免冲突和警告的原则。我们按照要求添加约束
1.两者等高等宽:使用Add New Constraints面板
葡京网投哪个正规 12

或者可以直接拖线:选中红色 按住‘control’键拖线到蓝色
葡京网投哪个正规 13

2.设置红色View约束
选中红色View打开Add New Contraint面板设置对应约束
葡京网投哪个正规 14

3.设置蓝色View约束
选中红色View打开Add New Contraint面板设置对应约束,其中蓝色View的约束同上图,只需要设置蓝色的右边距同红色相等 为 20 即可(其他约束在设置红色的时候已经有了)

4.设置红蓝色View等高/底
设置等高/底 和上面设置两者等高等宽步骤一致,选择 Top/Bottom即可。

效果:
葡京网投哪个正规 15

 

那时编写iOS的App(应用程序),只支持绝对定位。比如一个按钮(x, y, width, height) = (20, 30, 40, 50),就表示它的宽度是40像素,高度是50像素,放在(20, 20)像素的位置。

练习2

同样两个View 一蓝一红
1.两个View的高度相等
2.红色View和蓝色View的右边对齐
3.蓝色View距离父控件的左右相等,且距离红色View的间距相等
4.红色View的左边和蓝色View中点对齐
葡京网投哪个正规 16

1.设置蓝色View约束
蓝色View约束:距离父控件边距和红色View的边距
葡京网投哪个正规 17

2.设置红色View和蓝色View等高 和边距

1.设置两者等高,直接拖线即可
2.设置红色view的边距直:距右 20 和 距底边 20。(参考上图)

3.设置红色View与蓝色View的中心对齐

红色View和蓝色View的中心对齐可转化为 红色View长度为蓝色一半。可先设置等宽再修改等宽约束。
葡京网投哪个正规 18

效果图:

葡京网投哪个正规 19

iPhone 4

练习3

四个相同的View均分占据屏幕的四个角,如图
葡京网投哪个正规 20

1.四个view是等宽等高
直接分别设置四个的等宽等高,拖线就很方便

2.四个view互相之间的间距为零
使用Add New Contraint面板分别添加每个View的四边距 为0即可

最终效果如图:
葡京网投哪个正规 21

2010年,iPhone 4发布,率先采用Retina显示屏,在屏幕的物理尺寸不变的情况下,像素成倍增加,达到 640 x 960 像素。

AutoLayout 中的UILabel

UILabel相对比较特殊一点,需要单独说一下。

在不使用 AutoLayout的时候 UILabel 内部的文字默认是居中显示的,如果设置的Size较大,而内部文字较少就会造成上下留白,从而造成资源的浪费。

在实际的使过程中,需求往往是UILabel正好包裹住内部的文字。

有了AutoLayout之后的UILabel在添加约束的时候可以不用添加高度,系统会自动计算内部文字高度来自适应UILabel的高度!

葡京网投哪个正规 22

实际应用中经常需要设置UILabel的根据文字多少来自动适应高度,并且UILabel.width <= 某个值.
这种情况需要给UILabel添加宽度约束,比例关系设置为Less Than Or Equal
葡京网投哪个正规 23

这样就出现一个问题,怎么让原有的App运行在新的手机上面?iPhone手机一个优势,就是有众多优秀的App,假如不兼容原有的App,就相当于放弃这个得来不易的优势,是很不明智的。

练习4

1.设置两个View,两者间距为0,一红一绿,
2.红色View内部有一个UILabel,
3.根据Label内部的文字自适应高度,
4.点击屏幕修改Labe内部文字,让其父控件的frame也自动适应
葡京网投哪个正规 24

1.设置两个View一红一绿,分别设置边距等约束
2.红色View中添加UILabel,设置Label的文字和约束,设置Label高度自适应

最终效果图:
葡京网投哪个正规 25

这只是几个简单的小练习,若想使用熟练AutoLayout还需要认真练习

每当iPhone的屏幕有所变化,比如iPhone 3GS过渡到iPhone 4, iPhone 4过渡到iPhone 5, iPhone 5过渡到iPhone 6,苹果公司都需要想办法来解决上述的兼容问题。

AutoLayout在代码中的使用

以上讲了AutoLayout的可视化使用,但是项目中有很多页面是动态生成的,需要我们用代码实现,所以下面讲讲AutoLayout的代码实现

代码实现的特点:繁琐、技术含量低

Xib中的每一条拖线对应代码中一个 NSLayoutConstraint 对象,从NSLayoutConstraint头文件中可以查看其对象的创建方法:

    NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:view1 
    attribute:attr1 relatedBy:NSLayoutRelation toItem:view2 attribute:attr2 
    multiplier:multiplier constant:c];

    参数含义:

    view1:                  约束的第1个View
    attr1:                  第1个View的属性
    NSLayoutRelation:       两个View的属性之间的关系
    view2:                  约束的第2个View
    attr2:                  第2个View的属性
    multiplier:             倍数关系
    c:                      需要增加的常量

上面的方法可以整合成一个自动布局的核心计算公式

obj1.property = (obj2.property) * multiplier + c

为了运行之前的App,引入一个新的概念point(点)。点这个概念在iOS开发中十分重要,而非开发者很少关注。iPhone 4屏幕尺寸继续保持320 x 480,不过单位并非是像素,而是点。

代码添加AutoLayout的步骤

  • 利用NSLayoutConstraint类创建具体的约束对象
  • 添加约束到对应的View上
- (void)addConstraint:(NSLayoutConstraint *)constraint; 
- (void)addConstraints:(NSArray<__kindof NSLayoutConstraint *> *)constraints;

在iPhone 3GS中,1个点等于1个像素。也就是说,点跟像素可以直接互换。

代码添加AutoLayout的注意点

  • 需要先禁止AutoResizing功能,设置如下
view.translatesAutoresizingMaskIntoConstraints = NO;
  • 添加约束之前,确保所有View已经添加到父控件上
  • 设置AutoLayout之后无需再设置frame

在iPhone 4中,1个点等于2个像素。

代码添加约束的规则

  1. 对于兄弟控件之间的约束要添加到共同的父控件上
  2. 对于不同层级的'兄弟'控件的约束要添加到最近的‘父控件’上
  3. 两个父子控件之间的约束要添加到父控件上

下面代码实现一个如图自动布局
葡京网投哪个正规 26

    UIView * view = [UIView new];
    view.translatesAutoresizingMaskIntoConstraints = NO;
    view.backgroundColor  = [UIColor redColor];
//    view.frame = CGRectMake(10, 10, 100, 100);   ---> 不再设置frame
    [self.view addSubview:view];


    //设置底边约束
    NSLayoutConstraint * bottomConstraint = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-10];

    //设置右边约束
    NSLayoutConstraint * rightConstraint = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-10];

    //设置width约束
    NSLayoutConstraint * widthConstraint = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0 constant:100];

    //设置height约束
    NSLayoutConstraint * heightConstraint = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0 constant:100];


    [self.view addConstraint:bottomConstraint]; ----> 与父控件相关的约束添加到父控件上
    [self.view addConstraint:rightConstraint];
    [view addConstraint:widthConstraint];
    [view addConstraint:heightConstraint];

代码实现AutoLayout相对比较繁琐,但是如果懂得了原理还是能很好实现出来的。

iPhone 4和iPhone 3GS的屏幕尺寸实际上是一样的,都是3.5英寸。同样一个点,实际上看起来是一样的。只是iPhone 4在单位英寸上像素更多,看起来更细腻。

AutoLayout三方框架

由于AutoLayout技术代码实现起来特别繁琐,并且技术含量不高、代码冗余等问题。有一些大牛开源了一些自己写的三方自动布局框架,使用起来非常简单。

目前最流行的是:Masnory

至于使用方法请自行搜索、学习。

开发iOS的时候,使用点作为基本单位会更加方便。列表对比

小结

  1. AutoLayout功能强大、是现在屏幕适配的首选
  2. AutoLayout在Xib上使用非常简单灵活,代码实现非常繁琐
  3. 自动布局非常灵活,想要熟练需要多用多练

重要的事情多说一遍:自动布局非常灵活,想要熟练需要多用多练

葡京网投哪个正规 27

这里的屏幕模式可以初步理解成,一个点等于多少个像素。2x,就是1个点等于2个像素。

总结一下单位

手机屏幕的物理长度,使用英寸作为单位。比如iPhone 4屏幕是3.5英寸,iPhone 5 是4英寸,iphone 6是4.7英寸,这里的数字是指手机屏幕对角线的物理长度。

屏幕像素,比如iPhone 3GS屏幕是320 x 480像素,iPhone 4是640 x 960像素,这里的像素可以想象成屏幕上真正用来显示颜色的发光小点。

点,开发App时候使用的单位,是一个虚拟的单位,并非实际存在的,因此点有时也叫虚拟点。点这个单位,用于屏蔽各个屏幕设备的不同,兼容以前的程序。

每英寸有多少个像素,称为ppi(pixel per inch)。我们可以简单算算,iPhone 4是640 x 960像素,对角线就是1154像素,除以3.5英寸,应该是330ppi。而官方给出的数字是326ppi。当像素太密,超过300ppi的时候,人眼也就不能区分出每个像素。因此iPhone 4的屏幕叫作Retina显示屏。Retina在英文中,是视网膜的意思。

iPhone 4之后(x, y, width, height) = (20, 30, 40, 50),就表示高度为40个点,宽度为50个点,放在(20, 20)个点的位置。这种处理方法,将之前以像素作为单位自动转换成以点作为单位,使得iPhone 3GS的应用程序,不用修改也可运行在iPhone 4上面。

文字,颜色等是矢量数据,放大不会失真。原有的iPhone 3GS程序,在iPhone 4上面运行,文字显示也十分清晰。

而图片并非矢量数据,处理方式有所不同。假设图片 example.png,大小为 30 x 40像素(这里的单位是像素,数字图片的单位通常都为像素)。当这张example.png在iPhone 3GS和iPhone 4中使用时候,都占据屏幕上30 x 40个点。而因为iPhone 4中1个点等于2个像素,也就是30 x 40像素的图片,占据了60 x 80像素的屏幕,因此这图片在iPhone 4中看起来就会模糊。

开发的时候,为使得图片清晰,需要进行图片适配。这时需要准备两张内容相同的图片,放在同一目录下。

example.png      // 30 x 40像素

example@2x.png   // 60 x 80像素

当程序中使用example.png的时候,会根据屏幕模式自动选择对应的图片。屏幕1x模式,就会选择example.png, 2x模式就会优先选择example@2x.png,假如example@2x.png不存在,就选择example.png。

图片跟屏幕一样,也有1x模式,2x模式。在iPhone 6 Plus中,还出现3x模式,原理是一样的。

当iPhone 4选中example@2x.png的图片,就会生成一张大小为30 x 40个点,2x模式的图片。这个时候,图片看起来就会很清晰了。而没有适配的旧程序,example@2x.png不存在,就选中example.png,生成大小为30 x 40个点,1x模式的图片,看起来比较模糊。但它们占据的屏幕点数是一样的。

iPhone 5

2012年,苹果发布iPhone 5。我们将所有机型对比,依然采用点作为单位。

葡京网投哪个正规 28

跟iPhone 4做比较, iPhone 5的宽度保持不变。高度增加568 - 480 = 88个点。

在iOS开发中,44这个数字比较特殊。iOS界面指南写着,人类的手指有一定大小,点击区域低于44个点的时候,就难以点中。44的两倍就是88。

当原有程序没有适配iPhone 5的时候,也可以正常运行,但多出来的88个点将会将会被自动均分为上下两部分,使得上下出现黑边。我找不到好看的图片。

葡京网投哪个正规 29

那么怎样才能告诉iOS系统,应用程序已经适配了iPhone 5呢?在这里,我们先扯开一下,谈一下启动图片。

点击主屏幕的图标,进入App的时候,会立即显示一张图片,这张图片就是启动图片(Launch Image)。App在正式启动的时需要做一些初始化处理,这通常比较费时。先出现启动图片,可以使用户觉得系统立即有响应,减少等待的焦虑感。

每个机型,比如同时支持iPhone和iPad的程序,需要分别为iPhone跟iPad指定启动图片。当旧的iPhone 4的程序,运行在iPhone 5上面,没有iPhone 5的启动图片,就采用兼容模式,上下留黑边。当为iPhone 5指定了新的启动图片,系统就认为这个应用程序是已经适配了iPhone 5的,上下就不会留黑边了。下面是微信启动图片,应该都很熟悉了。

葡京网投哪个正规 30

微信启动图片中出现的那个地球,叫蓝色弹珠(The Blue Marble),是在1972年12月7日由阿波罗17号太空船的船员所拍摄的。这张照片当年很震撼,是普通人第一次可以通过照片直接看到地球的全貌。见问题为什么微信启动界面的地球图片没有转到中国这部分?这是否有损用户体验?

微信的启动图,为适配iPhone 5,相比与iPhone 4, 很明显狭长了。

典型iPhone应用程序(游戏除外),很多是上面一个导航栏,下面一个工具栏或者标签栏, 中间一大块用于显示的内容区。iPhone 5拉长了,对于程序的适配,也不算麻烦,内容区的内容基本是动态生成的。适配时候可以简单上下不变,中间的内容区拉长就行了。注意,导航栏和工具栏的高度也是44个点。下面是同一程序,在iPhone 4跟iPhone 5的对比。

葡京网投哪个正规 31

葡京网投哪个正规 32

AutoLayout

到了这个时候,传统绝对定位的弱点就显露出来了。这时iPhone按照点作为单位,已经出现了两种不同尺寸的屏幕,算上iPad, 就有3种尺寸(有些App可以同时兼容iPhone和iPad,称为Universal)。

从iOS 6系统发布后,iOS开发中可以采用一种AutoLayout的技术。AutoLayout就像网页一样,指定View,Button,Text之间的相对位置,比如靠左多少,靠右多少,居中多少等等。举个例子,像下面的简单布局。

葡京网投哪个正规 33

假设左上角的区域为view1, 右上角的区域为view2, 下面的区域为view3。AutoLayout会说:

view1.left = 20               // View1的左边距离边界20个点

view1.top = 20                // View1的上边距离边界20个点

view2.right = 20              // View2的右边距离边界20个点

view2.top = 20                // View2的上边距离边界20个点

view2.left = view1.left + 20  // View2的左边距离View1右边20个点

view2.width = view1.width     // View1的宽度等于View2的宽度

view2.height = view1.height   // view1高度等于view2高度

view3.left = view1.left       // view3的跟view1左对齐

view3.right = view2.right     // view3跟view2右对齐

view3.top = view1.bottom + 20 // view3的上边距离view1下边20个点

view3.bottom = 20             // view3下边距离边界20个点

view3.height = view1.height   // view3高度等于view1高度

指定上面的约束条件后,AutoLayout就会自动算出对应的布局。上面我写得比较繁琐,事实上很多操作都是可以使用鼠标拖拉来指定的,并不一定需要使用代码。但就算用代码,也有简写的方法。下面是在xib中,拖拉鼠标指定约束时的界面。

葡京网投哪个正规 34

而绝对定位,会直接说

view1.frame = (x1, y1, width1, height1)

view2.frame = (x2, y2, width2, height2)

view3.frame = (x3, y3, width3, height3)

绝对定位并非指定约束条件,而是开发者自己来精确指定View,Button, Text等的实际坐标大小。

对于一个屏幕,绝对定位可能跟AutoLayout的区别不算大,甚至绝对定位会更方便些。但当需要同时适配多个屏幕,AutoLayout根本不需要更改。而绝对定位就需要根据屏幕大小,一个个算出来。比如横屏,在AutoLayout下面,就自动变成。

葡京网投哪个正规 35

这里不过是3个控件的布局,当出现的控件数越多,屏幕尺寸越多,AutoLayout的优势就显露出来了。另外AutoLayout有个好处是容易支持多语言,不同语言下,同一个意思文字的长度是不同的,使用AutoLayout也可以自动适配。

在iOS 6的时候,AutoLayout还比较少人使用,当时屏幕尺寸还比较少。iOS 7的时候,就开始很多人使用了。而到现在iOS 8了, 更加上iPhone 6, iPhone 6 Plus需要适配,AutoLayout大势所趋,不用不行了。

iPhone 6, iPhone 6 Plus

2014年,iPhone 6, iPhone 6 Plus发布后,情况又有新的变化。再次比较所有iPhone机型。

葡京网投哪个正规 36

屏幕尺寸再度分裂。但是我们比较iPhone 5 跟 iPhone 6的宽高比例。

葡京网投哪个正规 37

可以看出,iPhone 6跟iPhone 5虽然屏幕尺寸改变了,但是它们的比例是不变的。都是 9 ÷ 16 = 0.5625 的屏幕。

当旧的iPhone 5程序运行在iPhone 6上面,假如没有经过适配。旧程序自动等比放大,铺满新手机,旧程序也可以正常运行。这种方案可算是自动适配。但因为旧程序拉伸了,整体看起来有点虚,也不能更好利用大屏空间。

当需要开发者手动适配的时候,跟iPhone 4过渡到iPhone 5一样,在新程序中,指定一张新的启动图片。当指定了启动图,屏幕分辨率就已经变成应有的大小,这时候利用AutoLayout进行布局,同一份代码,就可以支持多个机型。新手机的屏幕更大,有更多的虚拟点,可以显示更多的内容。

值得注意一点是,iPhone 6 Plus。它的宽高是414 × 736个点,3x模式,理想上来说,应该有1242 × 2208像素。但iPhone 6 Plus的实际像素是 1080 × 1920,是比理想值要少一点的。iPhone 6 Plus的处理方式是将程序整体稍微缩小一点。分辨率很高,这点区别,实际上也看不出来。这样处理,可以使得44个点的点击区域约束,在物理上的真实长度,基本保持不变。

由分析可以看到,慢慢的为了适配多个机型,程序的启动图片也逐渐增多,为解决这个问题。iOS之后,可以使用xib来搭建启动界面,这样就可以同一个启动界面,适配多个机型,减少启动图片占用的空间。

建议

1、以后的应用程序,都使用AutoLayout, 不要再用绝对定位。

2、使用类似网页的方式来设计界面。

3、设计师好,程序员也好,尽量使用点这个单位进行思考,而不要使用像素。比如,你需要做44 x 66个点的按钮,2x模式,就乘以2, 3x模式就乘以3。这样的思考方式可以大致估计到真实的物理长度。44个点,就是手机上导航栏,工具栏的高度。假如用像素思考,容易使得做出的图片过大或者过小。

4、非矢量素材,就可以做尺寸最大的,之后再进行缩小。比如你需要兼容3x的屏幕,就直接做最高那种图片。

5、而当使用Flash之类的矢量工具来做素材的时候,应该直接做点那个尺寸。比如44 x 66个点的按钮。就建立一个44 x 66的场景。之后再导出成2倍图,3倍图,因为矢量放大不失真。不要建立一个3x的场景,导出成大图片,再进行缩小,这样就容易失真。更理想的是直接使用矢量图。

6、假如是那种导航栏,工具栏之类的背景图,需要横跨整个屏幕。可以只切一小块,让程序拉伸,拉伸方式是保持两边的像素不动,只拉伸最中间的一列像素。需要拉伸的话,横方向就不要出现一些渐变色。

7、按钮的点击区域,不应该少于44像素,就算按钮的图片看起来比较小,也应该使得点按钮周围的透明区也有反应。

8、可以按照你当前最方便测试机子的型号来做一些主要预览图,效果图。比如你手头有iPhone 5,可以按照iPhone 5的尺寸,320 x 568个点,需要兼容iPhone 6 Plus,就使用3x的模式。这样方便将图片放进手机里面看实际的效果。有多个测试机,就选较大的,之后再进行一些细调。假如支持iPhone 6 Plus的横屏模式,需要另外处理。

9、上面说的是应用的处理方式,游戏会有些特殊。现在很多游戏,按照1136 x 768的像素尺寸来设计场景,这样可以同时兼容iPad和iPhone,并只使用一份图。iPad 1x模式下尺寸是1024 x 768像素,iPhone 6在2x模式下,是1136 * 640。这种尺寸,可以简单将场景居中显示,各自将场景拉伸到最大。

本文由葡京网投哪个正规发布于联系我们,转载请注明出处:AutoLayout从入门到精通,图的详解

关键词:

上一篇:CPU使用率过高的,详细研究WinXP中CPU占用100葡京网投哪个正规:

下一篇:文件传输协议FTP,揭开复制大文件的断点续传之谜