iOS開發——UI基礎-屏幕適配

1、適配

---

 

1.什麼是適配？
適應、兼容各類不一樣的狀況

2.移動開發中，適配的常見種類
2.1系統適配
針對不一樣版本的操做系統進行適配

2.2屏幕適配
針對不一樣大小的屏幕尺寸進行適配

 

2、點和像素

---

 

1.在用戶眼中
屏幕是由無數個像素組成的
像素越多，屏幕越清晰

2.在開發者眼中
屏幕是由無數個點組成的，點又是由像素組成的
像素越多，屏幕越清晰

 

3、Autoresizing簡介

---

 

1.在Autolayout以前，有Autoresizing能夠做屏幕適配，但侷限性較大，有些任務根本沒法完成
相比之下，Autolayout的功能比Autoresizing強大不少

2.Autolayout的2個核心概念
參照
約束

3.Autoresizing四周的四根線的做用:
1.只要勾選上某一根, 那麼當前控件距離父控件的距離就是固定的, 當前是多少, 之後永遠都是多少

2.Autoresizing中間兩條線的做用:
只要勾選上水平方向的線, 那麼當前控件的寬度就會隨着父控件的寬度等比拉伸
只要勾選上垂直方向的線, 那麼當前控件的高度就會隨着父控件的高度等比拉伸

3.不管是將子控件固定在父控件的某一個位置
仍是讓子控件隨着父控件的寬高的變化而變化
都是父子關係, 因此Autoresizing只能約束父子控件之間的關係, 不能約束兄弟控件之間的關係

4.Autoresizing代碼實現

// 1.建立父控件
UIView *greenView = [[UIView alloc] init];
greenView.frame = CGRectMake(0, 0, 200, 200);
greenView.backgroundColor = [UIColor greenColor];
[self.view addSubview:greenView];
self.greenView = greenView;

// 2.建立子控件
UIView *redView = [[UIView alloc] init];
redView.frame = CGRectMake(0, 0, 100, 100);
redView.backgroundColor = [UIColor redColor];
[greenView addSubview:redView];

// 3.設置子控件的autoresizing
/*
注意: 代碼中的上下左右和Storyboard中的是相反的
Storyboard中勾選上左邊, 就表明當前控件和父控件的左邊的距離是固定的
而在代碼中若是寫上FlexibleLeftMargin, 就表明當前控件和父控件的左邊是可拉伸的
換句話說就是: 若是設置了FlexibleLeftMargin, 就表明着右邊是固定的

UIViewAutoresizingFlexibleLeftMargin // 左邊能夠伸縮
UIViewAutoresizingFlexibleRightMargin // 右邊能夠伸縮
UIViewAutoresizingFlexibleTopMargin // 頂部能夠伸縮
UIViewAutoresizingFlexibleBottomMargin // 底部能夠伸縮

// 如下兩個和Storyboard中的是同樣的
UIViewAutoresizingFlexibleWidth // 寬度能夠伸縮
UIViewAutoresizingFlexibleHeight // 高度能夠伸縮
*/
redView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

 

4、autolayout簡介

---

 

1.Autolayout是一種「自動佈局」技術，專門用來佈局UI界面的
Autolayout自iOS 6開始引入，因爲Xcode 4的不給力，當時並無獲得很大推廣
自iOS 7（Xcode 5）開始，Autolayout的開發效率獲得很大的提高
蘋果官方也推薦開發者儘可能使用Autolayout來佈局UI界面
Autolayout能很輕鬆地解決屏幕適配的問題

2.Storyboard約束的注意點
2.1.約束
每在Storyboard中添加一個設置(autolayout的設置), 就表明添加一個約束

2.2.錯誤(紅色箭頭)
若是看到Storyboard中有紅色的箭頭, 表明約束有錯誤
注意: 約束有錯誤, 不表明運行會錯誤, 約束有錯誤一樣能夠運行
注意: 紅色箭頭是程序員必須解決的

2.3.爲何會有約束錯誤?
2.3.1缺乏約束
>autolayout的本質和frame差很少
>若是經過frame來設置一個控件, 必須設置這個控件的x/y/w/h, 控件才能按照咱們的需求顯示
>若是是經過autolayout來設置一個控件, 也必須設置這個控件的x/y/w/h, 控件才能按照咱們的需求顯示
>也就是說, 若是說x/y/w/h只要有一個沒有設置都會報錯, 就是缺乏約束

2.3.2約束衝突
>約束能夠重複添加
>例如先約束寬度等於100, 又添加一個約束, 約束寬度等200, 那麼就會報錯

2.4.警告
若是看到Storyboard中有黃色的箭頭, 就是警告
> 表明着當前控件預覽的位置或者尺寸和咱們約束的位置尺寸不同
注意:黃金警告並不會影響咱們運行
注意:黃色箭頭, 程序員能夠忽略

3.autolayout動畫
在修改了約束以後，只要執行下面代碼，就能作動畫效果
[UIView animateWithDuration:1.0 animations:^{

// 強制更新界面
// 會更新當前控件和當前控件全部的子控件
[添加了約束的view layoutIfNeeded];
}];

4.NSLayoutConstraint（代碼實現Autolayout）
4.1 代碼實現Autolayout的步驟
利用NSLayoutConstraint類建立具體的約束對象
添加約束對象到相應的view上

- (void)addConstraint:(NSLayoutConstraint *)constraint;
- (void)addConstraints:(NSArray *)constraints;

 

4.2 代碼實現Autolayout的注意點

要先禁止autoresizing功能，設置view的下面屬性爲NO
view.translatesAutoresizingMaskIntoConstraints = NO;
添加約束以前，必定要保證相關控件都已經在各自的父控件上
不用再給view設置frame

4.3 NSLayoutConstraint對象就表明一個約束

建立約束對象的經常使用方法

+(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 ：乘數
c ：常量

5.自動佈局的核心計算公式
obj1.property1 =（obj2.property2 * multiplier）+ constant value

6.添加約束的規則
在建立約束以後，須要將其添加到做用的view上
在添加時要注意目標view須要遵循如下規則：
1.對於兩個同層級view之間的約束關係，添加到它們的父view上
2.對於兩個不一樣層級view之間的約束關係，添加到他們最近的共同父view上
3.對於有層次關係的兩個view之間的約束關係，添加到層次較高的父view上

5、VFL語言

---

 

1.什麼是VFL語言
VFL全稱是Visual Format Language，翻譯過來是「可視化格式語言」
VFL是蘋果公司爲了簡化Autolayout的編碼而推出的抽象語言

2.VFL示例
H:[cancelButton(72)]-12-[acceptButton(50)]
canelButton寬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的邊緣）

3.VFL的使用
使用VFL來建立約束數組

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

format ：VFL語句
opts ：約束類型
metrics ：VFL語句中用到的具體數值
views ：VFL語句中用到的控件

建立一個字典（內部包含VFL語句中用到的控件）的快捷宏定義
NSDictionaryOfVariableBindings(...)

6、Masonry

---

 

1.目前最流行的Autolayout第三方框架
用優雅的代碼方式編寫Autolayout
省去了蘋果官方噁心的Autolayout代碼
大大提升了開發效率

2.框架地址：
https://github.com/SnapKit/Masonry

3.mas_equalTo和equalTo
默認狀況下
mas_equalTo有自動包裝功能，好比自動將20包裝爲@20
equalTo沒有自動包裝功能

若是添加了下面的宏，那麼mas_equalTo和equalTo就沒有區別
#define MAS_SHORTHAND_GLOBALS
// 注意：這個宏必定要添加到#import "Masonry.h"前面

4.mas_width和width
默認狀況下
width是make對象的一個屬性，用來添加寬度約束用的，表示對寬度進行約束
mas_width是一個屬性值，用來當作equalTo的參數，表示某個控件的寬度屬性

若是添加了下面的宏，mas_width也能夠寫成width
#define MAS_SHORTHAND

mas_height、mas_centerX以此類推

5.如下方法都僅僅是爲了提升可讀性，無關緊要
- (MASConstraint *)with {
return self;
}

- (MASConstraint *)and { return self;}