IOS開發——UI基礎-螢幕適配

標籤：

一、適配

 

1.什麼是適配？
適應、相容各種不同的情況

2.移動開發中，適配的常見種類
2.1系統適配
針對不同版本的作業系統進行適配

2.2螢幕適配
針對不同大小的螢幕尺寸進行適配

 

二、點和像素

 

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

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

 

三、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;

 

四、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上

五、VFL語言

 

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

2.VFL樣本
H:[cancelButton(72)]-12-[acceptButton(50)]
canelButton寬72，acceptButton寬50，它們之間間距12

H:[wideView(>[email protected])]
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(...)

六、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;
}

IOS開發——UI基礎-螢幕適配