• iOS8学习笔记2--autolayout


    iOS支持的设备如今已经具有了很多的尺寸,针对这些不同的尺寸每一个都做一个独立的APP肯定是不现实的,于是苹果在iOS8之后推出了autolayout和sizeclass,同时还有VFL界面设计语言

    先说一下iOS屏幕的旋转,首先,对于开发者而言,关注的并不是屏幕的像素,而是一个点的概念,也就是说,尺寸相同的设备,不同的分辨率,开发者认为他们的点是相同的,系统底层负责将一个点与对应的像素关联起来,例如ipad普通的屏幕像素为1024*768,而retina的屏幕像素为2048*1536,但是他们的屏幕尺寸是一样的,所以对点而言,依然是1024*268个点,只是retina的每一个点对应四个像素,普通的一个点对应一个像素.

    在屏幕旋转的时候,一般而言,界面也会跟着旋转,那么就会造成UI的变形,因为大部分的设备不是正方形,这个时候,就必须制定旋转的规则,否则旋转出来的界面会丢失UI或者极其难看,这个时候,就有三种方式来管理规则,UI创建约束,代码制定约束,或者干脆做几套UI.

    在创建的iOS配置中,可以指定app支持的约束,在如下位置

    portrait 正常竖直状态 landscape left 左转 landscape right 右转

    打开此处自后就默认打开了旋转,但是还需要在代码中指定支持旋转的方向,在view对应的类文件中实现继承至父类的方法supportedInterfaceOrientations,返回一个NSUinteger的,具体代码如下

    - (NSUInteger)supportedInterfaceOrientations
    {
        return UIInterfaceOrientationMaskLandscapeLeft|UIInterfaceOrientationMaskLandscapeRight|UIInterfaceOrientationMaskPortrait;
    }

    返回的参数是宏进行或运算自后的结果,当这个方法被调用之后,如果支持这个方向的旋转,那么系统就会发出消息,进行这个方向的旋转

    接下来支持旋转之后,就要进行UI的设计,使其能适配旋转,关于autolayout的相关知识和操作请参考这个网页

    http://blog.csdn.net/pucker/article/details/41832939

    重点在于autolayout允许开发者在界面上的任意两个视图之间建立精确的线性变化规则。所谓线性变化就是数学中的一次函数,即:

    y = m*x + c

    其中x和y是界面中任意两个视图的某个布局属性,m为比例系数,c为常量。

    http://blog.csdn.net/pucker/article/details/41843511

    该文章重点在于

    通过这个比例关系,就能得出控件与控件之间的关系

    另外还有一个注意点

    当使用自动布局为Scroll View添加约束时,除了需要确定ScrollView本身的位置尺寸之外,还需要明确ScrollView的ContentSize大小。对于上述例子,Scroll View本身会占用下半部分屏幕,但是其ContentSize的大小是不确定的,所以会出现异常滚动效果。因此我们还需要为两个Label确定宽高,这样才能计算出ContentSize。按住Command键,在文档结构窗口中选中Logo Image、Name Label与Description Label,点击Pin按钮,在弹出的窗口中选中Equal Width,这样就使得两个Label的宽度总与Image View的宽度相等,即Scroll View的ContentSize的宽度总是和Scroll View本身的宽度相同,因此就不会出现横向滚动的情况了

    到这里,自动约束就说完了,还要记得,采用直接按住control拉动控件的方式建立的约束是按照当前控件状态建立的约束,是需要自己再去手动调整的

    以上是使用IB工具进行autolayout,还可以使用代码进行autolayout

    具体参考该网页

    http://blog.csdn.net/pucker/article/details/45070955

    主要描述了几个类

    NSLayoutConstraint 主要用来描述约束的形式

    NSLayoutAttribute 枚举对其的格式

    NSLayoutRelation layout的关系式

    还有这么一段需要注意

    苹果在iOS 6当中引入了自动布局的新概念,但在那时仍然有很多旧的代码使用autoresizingMask与setFrame:的方式构建界面。试想,如果将一个已经设置好frame并使用autoresizingMask的视图添加到一个使用自动布局的视图中时,运行时需要隐式地将前者的frame和autoresizingMask转化为自动布局约束(这些隐式转换的约束的类型为NSAutoresizingMaskLayoutConstraint),这样才能明确其位置与尺寸而不会导致约束的缺失。这个隐式转换的过程,是由UIView的translatesAutoresizingMaskIntoConstraints属性的值决定的。默认情况下,该值为YES,表示需要运行时自动进行隐式转换。这对于兼容旧的代码当然是好的,然而当我们明确为视图添加了约束后,我们就不希望再进行autoresizingMask的隐式转换了,否则就会引起约束的冲突。因此,需要特别注意的是,当我们使用代码创建视图时,需要将translatesAutoresizingMaskIntoConstraints属性的值设置为NO

    这样就可以用代码的方式来设定界面的layout属性了

    但是使用这种办法显得比较繁琐,接下来可以用VFL语言来进行layout管理,参考的网页为

    http://blog.csdn.net/pucker/article/details/45093483

    VFL是一种创建约束的新的形式,实际上创建的依然是NSLayoutConstraint对象,只是生成该对象的方式更加的简单

    简单的规则如下

    参数format是一个符合VFL语法的字符串。上述代码中的H:表示本VFL字符串描述的是水平方向的约束,与之相对的是V:表示垂直方向。如果VFL字符串没有指明H:还是V:,则默认为水平方向。|表示父视图。VFL要求所有视图的名字必须放在中括号之内,[logoImageView]指代的就是logoImageView。-0-表示的是间距值为0。 
    所以@”H:|-0-[logoImageView]-0-|”表示在水平方向上,logoImageView左侧与其父视图左侧的间距为0,logoImageView右侧与其父视图右侧的间距为0。@”V:|-0-[logoImageView]”表示在垂直方向上,logoImageView顶部与其父视图顶部的间距为0。 
    另外说一句,-0-可以不写,也就是说如果间距为0则不用明确写出,所以@”H:|-0-[logoImageView]-0-|”可以精简为@”H:|[logoImageView]|”,@”V:|-0-[logoImageView]”可以精简为@”V:|[logoImageView]”

    另外,这种办法并不是万能的,有下面的注意点

    VFL并不能表达所有的约束,例如“logoImageView高度为父视图高度一半”这样的具有比例关系的约束,就无法使用VFL表达出来,所以这时我们只能直接创建NSLayoutConstraint实例了,就像上面的代码那样。 

    好了,约束的大部分类容就是这些,相信看完那三个网页基本上布局也就没什么难度了.关键还是在那个公式y=ax+b,掌握这个公式的具体意义,就能知道参数的设置,布局就是体力活了.

  • 相关阅读:
    JavaScript中的原型和继承
    Classical Inheritance in JavaScript
    jquery.cookie 使用方法
    Backbone.js 使用 Collection
    Backbone.js 中使用 Model
    Backbone.js 使用模板
    Java并发编程:volatile关键字解析zz
    eclipse 搭建Swt 环境
    Adams输出宏代码
    根据圆上三点求圆心及半径
  • 原文地址:https://www.cnblogs.com/dengxiaojun/p/4613087.html
Copyright © 2020-2023  润新知