適配
什么是適配？
適應、兼容各種不同的情況
移動開發(fā)中掌逛，適配的常見種類
系統(tǒng)適配
針對不同版本的操作系統(tǒng)進行適配
屏幕適配
針對不同大小的屏幕尺寸進行適配
iOS 4:autoResizing做屏幕適配
iOS 6 autoLayout 使用最廣泛的屏幕適配
iOS 8 sizeClass 最新的屏幕適配
屏幕適配
iPhone的尺寸
3.5inch畏线、4.0inch、4.7inch究流、5.5inch
iPad的尺寸
7.9inch、9.7inch
屏幕方向
豎屏
橫屏
適配的歷史:
4S以前:
坐標都是寫死的
Uibutton *btn = nil;
Btn.frame = CGRectMake(20,20,320,480);
注意:之前高度寬度都是寫死的
點和像素
在用戶眼中
屏幕是由無數(shù)個像素組成的
像素越多动遭，屏幕越清晰
在開發(fā)者眼中
屏幕是由無數(shù)個點組成的芬探，點又是由像素組成的
像素越多，屏幕越清晰
什么是Autolayout ?
Autolayout是一種“自動布局”技術厘惦，專門用來布局UI界面的
Autolayout自iOS 6開始引入偷仿，由于Xcode 4的不給力哩簿，當時并沒有得到很大推廣
自iOS 7（Xcode 5）開始，Autolayout的開發(fā)效率得到很大的提升
蘋果官方也推薦開發(fā)者盡量使用Autolayout來布局UI界面
Autolayout能很輕松地解決屏幕適配的問題
簡介
Autoresizing(局限性很大不能很好的滿足開發(fā)者,所以有了Autolayou的產(chǎn)生)
在Autolayout之前酝静，有Autoresizing可以作屏幕適配节榜，但局限性較大，有些任務根本無法完成
相比之下别智，Autolayout的功能比Autoresizing強大很多
Autolayout的2個核心概念
參照
約束
Autolayout的警告和錯誤
警告
控件的frame不匹配所添加的約束,
比如
比如約束控件的寬度為100,
而控件現(xiàn)在的寬度是110
錯誤
缺乏必要的約束, 比如
只約束了寬度和高度,
沒有約束具體的位置
(就是只有給這個控件設置了寬度和高度,但是沒告訴它具體顯示在哪個位置,這時候會報錯)
兩個約束沖突, 比如
1個約束控件的寬度為100, 1個約束控件的寬度為110
代碼實現(xiàn)Autolayout
代碼實現(xiàn)Autolayout的步驟
利用NSLayoutConstraint類創(chuàng)建具體的約束對象
添加約束對象到相應的view上
(void)addConstraint:(NSLayoutConstraint *)constraint;
(void)addConstraints:(NSArray *)constraints;
例:
NSLayoutConstraint
*blueRightLc = [NSLayoutConstraint
constraintWithItem:blueView
attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual
toItem:redView attribute:NSLayoutAttributeLeft
multiplier:1.0 constant:-20];
[self.view
addConstraint:blueRightLc];
NSLayoutConstraint
一個NSLayoutConstraint對象就代表一個約束
創(chuàng)建約束對象的常用方法
+(id)constraintWithItem:(id)view1
attribute:(NSLayoutAttribute)attr1
relatedBy:(NSLayoutRelation)relation
toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;
view1 ：要約束的控件
attr1 ：約束的類型（做怎樣的約束）
relation ：與參照控件之間的關系
view2 ：參照的控件
attr2 ：約束的類型（做怎樣的約束）
multiplier ：乘數(shù)
c ：常量
代碼實現(xiàn)Autolayout的注意點
要先禁止autoresizing功能宗苍，設置view的下面屬性為NO,不設置否則無法實現(xiàn)
view.translatesAutoresizingMaskIntoConstraints= NO;
添加約束之前，一定要保證相關控件都已經(jīng)在各自的父控件上
不用再給view設置frame
自動布局的核心計算公式
自動布局的核心計算公式
obj1.property1 =（obj2.property2 * multiplier）+ constant
value
VFL示例
H:[cancelButton(72)]-12-[acceptButton(50)]
canelButton寬72薄榛，acceptButton寬50讳窟，它們之間間距12
H:[wideView(>=60@700)]
wideView寬度大于等于60point，該約束條件優(yōu)先級為700（優(yōu)先級最大值為1000敞恋，優(yōu)先級越高的約束越先被滿足）
V:[redBox][yellowBox(==redBox)]
豎直方向上丽啡，先有一個redBox，其下方緊接一個高度等于redBox高度的yellowBox
H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|
水平方向上硬猫，F(xiàn)ind距離父view左邊緣默認間隔寬度补箍，之后是FindNext距離Find間隔默認寬度；再之后是寬度不小于20的FindField浦徊，它和FindNext以及父view右邊緣的間距都是默認寬度馏予。（豎線“|” 表示superview的邊緣）
VFL的使用
使用VFL來創(chuàng)建約束數(shù)組
(NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary
*)metrics views:(NSDictionary *)views;
format ：VFL語句
opts ：約束類型
metrics ：VFL語句中用到的具體數(shù)值
views ：VFL語句中用到的控件
創(chuàng)建一個字典（內(nèi)部包含VFL語句中用到的控件）的快捷宏定義
NSDictionaryOfVariableBindings(...)
基于Autolayout的動畫:
在修改了約束之后，只要執(zhí)行下面代碼盔性，就能做動畫效果
[UIView animateWithDuration:1.0 animations:^{
[添加了約束的view layoutIfNeeded];(強制自動布局)
}];
Masonry
目前最流行的Autolayout第三方框架
用優(yōu)雅的代碼方式編寫Autolayout
省去了蘋果官方惡心的Autolayout代碼
大大提高了開發(fā)效率
框架地址：
https://github.com/SnapKit/Masonry
mas_equalTo和equalTo
默認情況下
mas_equalTo有自動包裝功能霞丧，比如自動將20包裝為@20
equalTo沒有自動包裝功能
如果添加了下面的宏，那么mas_equalTo和equalTo就沒有區(qū)別
define MAS_SHORTHAND_GLOBALS
// 注意：這個宏一定要添加到#import "Masonry.h"前面
mas_width和width
默認情況下
width是make對象的一個屬性冕香，用來添加寬度約束用的蛹尝，表示對寬度進行約束
mas_width是一個屬性值，用來當做equalTo的參數(shù)悉尾，表示某個控件的寬度屬性
如果添加了下面的宏突那，mas_width也可以寫成width
define MAS_SHORTHAND
mas_height、mas_centerX以此類推
可有可無的用法
以下方法都僅僅是為了提高可讀性构眯，可有可無
-
(MASConstraint*)with {
return
self;
}
-
(MASConstraint*)and {
return
self;
}
***********************NO6******************************
***********************NO6******************************
- 適配的歷史
4s 以前 不需要適配
坐標都是寫死的
[uiScreen mainScreen ].bounds.size
UIButton *btn = nil;
btn.frame = CGRectMake(20,20,320,480)
ios 4
autoResizing 做屏幕適配
ios 6
autoLayout 使用最廣泛的屏幕適配
ios 8
sizeClass 最新的屏幕適配
- autoResizing
注意點 不能跟autoLayout 共存
高度/寬度 跟著父控件的高度/寬度進行縮放
四根線 固定那個位置 一般兩根線就能確定一個位置
局限性 兄弟控件不能設置間距 只能是相對于父控件
使用代碼 實現(xiàn)autoResizing 控件.autoresizingMask與storyboard中相反的 storyboard中是 固定那個方向 代碼是拉伸那個方向
UIViewAutoresizingNone = 0,
UIViewAutoresizingFlexibleLeftMargin = 1 << 0,
UIViewAutoresizingFlexibleRightMargin = 1 << 2,
UIViewAutoresizingFlexibleTopMargin = 1 << 3,
UIViewAutoresizingFlexibleBottomMargin = 1 << 5
UIViewAutoresizingFlexibleHeight = 1 << 4,
UIViewAutoresizingFlexibleWidth = 1 <<1,
- autoLayout:
概念
1. 參照
相對哪個控件設置約束
哪個控件離當前空間最近,就參照哪個控件
2. 約束
尺寸
寬高
位置
xy
trailing 右邊
leading 左邊
思路
1. 如果是兩個控件的話 那么先搞定一個
4.autoLayout使用代碼布局
autoLayout 與 autoResizing 不能共存
view.translatesAutoresizingMaskIntoConstraints = NO;(關閉autoResizing功能)
使用NSLayoutConstrain 調(diào)用 constrainWithItem
第一個參數(shù) 需要約束的控件
第二個參數(shù) 控件的屬性
第三個參數(shù) 等于 / ＜= / 大于等于
第四個參數(shù) 相對那個控件的約束
第五個參數(shù) 相對哪個控件的屬性
第六個參數(shù) multiplier 乘以??
第七個參數(shù) 常量 需要加還是減
注意點 以上操作哪個控件最大 就添加到哪個控件上,如果是兄弟那么就添加到老爸身上, 同一個爺爺?shù)牟煌陌职?br> 添加到爺爺身上
"添加約束到最大的控件上"
- vfl 布局子控件
抽象語言知道是神馬東西就可以了
H:|(控制器左邊)-20(間距)-redView-20(間距)-[blueView(顯示的控件)(==redView(控件的寬度等于紅色控件的寬度))]-20-|(控制器的右邊)
使用NSLayoutConstrain constraintsWithVisualFormat
第一個參數(shù) 水平或者是垂直方向的約束(字符串)
第二個參數(shù) 對齊的選項
第三個參數(shù) 使用到數(shù)字可以添加到字典中
第四個參數(shù) 將所有的控件的添加到字典中, 鍵值對
名字都是一樣的
"添加數(shù)組到self.view"
6.masonry使用
使用步驟
1. 導入masonry的頭文件
2. A控件需要約束
使用A 調(diào)用mas_makeConstrain
在block中設置約束
make 就相當于
調(diào)用者(控件)
- 優(yōu)先級
& 動畫
優(yōu)先級最高是的1000
最低的是0
只要是優(yōu)先級小于1000的 那么就第二次執(zhí)行(當最高優(yōu)先級不存在)
動畫
當界面發(fā)生改變的時候 如果需要動畫重新布局
[self.view layoutIfNeeded]
**************************筆記****************************
注意:
如果使用autolayout來約束控件,
那fraem就失效了, 官方也不建議我們再設置frame了
寬度: 100
高度: 100
水平居中: X
垂直居中: Y
注意: 如果利用autolayout約束一個控件, 和我們以前使用frame約束控件一樣, 必須設置寬度/高度/X/Y , 如果缺少某一個約束就會報錯, 報錯有可能會引發(fā)一些未知的bug
如果有紅色警告:
代表缺少約束
如果有黃色警告:
代表控件當前的位置大小和約束的位置大小不一樣
距離頂部: 20 相當于設置了Y
距離左邊:20 相當于設置了X
距離右邊:20 相當于設置了寬度
距離底部:20 相當于設置了高度
注意:
在使用Autolayout時,最好給每個控件起一個名稱, 方便閱讀
紅色:
距離左邊:20 X
距離底部:20 Y
高度: 50
寬度:
紅色距離藍色有20的間隙
設置紅色的寬度和藍色的寬度一樣
藍色:
距離右邊:20 X
距離底部:20 Y
高度: 50
寬度:
iOS8,默認情況下,
左右兩邊會留出一段距離,,
紅色:
距離底部和左邊20 x/y
高度: 50
紅色距離藍色20 ((自動根據(jù)屏幕的寬度- 紅色左邊的20 + 藍色右邊的20 + 紅色和藍色之間的20 ) / 2)
藍色:
距離右邊20 x
Y: 設置藍色的頂部和紅色對齊
高度: 設置藍色的底部和紅色對齊
寬度: 50
藍色:
距離頂部:20 Y
距離左邊:20 X
距離右邊:20 寬
高度: 50
紅色:
高度和藍色一樣 高度
紅色右邊和藍色右邊對齊 X
距離藍色20 Y
first
item 紅色
relation
等于
second
item 藍色
constant
加上多少
multiplier
乘以多少
priority
優(yōu)先級
藍色:
距離頂部:20 Y
距離左邊:20 X
距離右邊:20 寬
高度: 50
紅色:
高度和藍色一樣 高度
紅色右邊和藍色右邊對齊 X
距離藍色20 Y
水平居中
圖片:
水平居中
垂直居中
距離左右為0
高度: 568 == 4inch
如果設置紅色View的寬度, 約束會自動添加到紅色VIew中
如果是設置紅色View和綠色View的左邊距離固定,約束會自動添加到綠色中(父子關系)
如果是設置紅色View和黑色View之間的距離固定, 約束會自動添加到控制器的View上(兄弟)
