iOS屏幕適配系列(一): Autoresizing技術

Autoresizing.png

蘋果在iOS2中引入了Autoresizing技術用於屏幕適配, 其用於指定當父視圖的bounds發生改變時如何自動調整子視圖的佈局

經過Code使用Autoresizing技術

Autoresizing技術涉及到兩個UIView的屬性: autoresizesSubviews屬性用於標識當自身的bounds發生改變時是否自動調整子視圖的佈局; autoresizingMask屬性用於標識當父視圖的bounds發生改變時如何自動調整自身的佈局

// 默認爲YES
@property(nonatomic) BOOL autoresizesSubviews;
// 默認爲UIViewAutoresizingNone
@property(nonatomic) UIViewAutoresizing autoresizingMask;複製代碼

autoresizingMask屬性的取值爲UIViewAutoresizing枚舉, 能夠採用位運算(按位或)同時設置多個值

UIViewAutoresizingNone                 = 0,      不執行任何調整
UIViewAutoresizingFlexibleLeftMargin   = 1 << 0, 自動調整與父視圖的左邊距
UIViewAutoresizingFlexibleWidth        = 1 << 1, 自動調整自身的寬度
UIViewAutoresizingFlexibleRightMargin  = 1 << 2, 自動調整與父視圖的右邊距
UIViewAutoresizingFlexibleTopMargin    = 1 << 3, 自動調整與父視圖的上邊距
UIViewAutoresizingFlexibleHeight       = 1 << 4, 自動調整自身的高度
UIViewAutoresizingFlexibleBottomMargin = 1 << 5, 自動調整與父視圖的下邊距複製代碼

注: 每一個值僅用於標識子視圖如何調整指定維度的佈局. 例如: UIViewAutoresizingFlexibleLeftMargin僅用於標識子視圖自動調整與父視圖的左邊距, 並不影響如何調整自身的寬度和與父視圖的右邊距

若是UIView的autoresizesSubviews屬性設置爲YES, 當它的bounds發生改變時, 它會根據每一個子視圖的autoresizingMask屬性設置自動爲其調整佈局

// 示例: 讓子視圖的寬度和高度保持不變, 且與父視圖的右邊距和下邊距均固定爲20pt

CGFloat width = [[UIScreen mainScreen] bounds].size.width;
CGFloat height = [[UIScreen mainScreen] bounds].size.height;

UIView *redView = [[UIView alloc] initWithFrame:CGRectMake(width-120, height-120, 100, 100)];
redView.backgroundColor = [UIColor redColor];
redView.autoresizingMask = UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleLeftMargin;
[self.view addSubview:redView];複製代碼

Autoresizing1-1.gif

若是UIView的autoresizingMask屬性在同一個軸線上同時設置了多個值, 默認行爲是根據各自維度的可調整部分按照比例來分配調整部分. 例如: 若是UIView的autoresizingMask屬性設置在x軸上包含UIViewAutoresizingFlexibleWidth和UIViewAutoresizingFlexibleRightMargin, 而不包含UIViewAutoresizingFlexibleLeftMargin, 則表明與父視圖的左邊距是固定的, 而自身的寬度和與父視圖右邊距會根據各自維度的可調整部分按照比例發生變化

// 示例: 讓子視圖與父視圖的右邊距和下邊距均固定爲20pt, 且與父視圖的左邊距和自身的寬度按照比例自動調整

CGFloat width = [[UIScreen mainScreen] bounds].size.width;
CGFloat height = [[UIScreen mainScreen] bounds].size.height;

UIView *redView = [[UIView alloc] initWithFrame:CGRectMake(width-120, height-120, 100, 100)];
redView.backgroundColor = [UIColor redColor];
redView.autoresizingMask = UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleWidth;
[self.view addSubview:redView];複製代碼

Autoresizing1-2.gif

經過IB使用Autoresizing技術

IB中的設置最終都會轉化爲Code運行, 因此咱們在這部分只須要了解如何設置autoresizesSubviews屬性和autoresizingMask屬性便可

咱們在父視圖的Attributes inspector中設置autoresizesSubviews屬性, 用於標識當自身的bounds發生改變時是否自動調整子視圖的佈局

Autoresizing2-1.png

咱們在子視圖的中設置autoresizingMask屬性, 用於標識當父視圖的bounds發生改變時如何自動調整自身的佈局

Autoresizing2-2.png

autoresizingMask屬性的設置由六根線標識, 其中位於外部的四根線分別用於標識如何自動調整與父視圖的上、下、左、右邊距; 位於內部的兩根線分別用於標識如何自動調整自身的寬度和高度

注: 位於外部的四根線(柱狀線段), 若是是實線即表明不自動調整; 位於內部的兩根線(箭頭線段), 若是是實線即表明自動調整

下面再次經過IB的方式實現Code方式的兩個示例

示例: 讓子視圖的寬度和高度保持不變, 且與父視圖的右邊距和下邊距均固定爲20pt

Autoresizing2-3.png

示例: 讓子視圖與父視圖的右邊距和下邊距均固定爲20pt, 且與父視圖的左邊距和自身的寬度按照比例自動調整

Autoresizing2-4.png

注: 若是Xcode中默認開啓了Autolayout技術, 在使用Autoresizing技術前須要手動將其關閉

Autoresizing2-5.png

兩種方式的區別

IB中的設置最終都會轉化爲Code運行, 因此兩者在本質上沒有任何區別. 可是在設置autoresizingMask屬性時, 兩者的思考方式不一樣

在Code中, autoresizingMask屬性顯式設置的值即表明自動調整, 未設置的值即表明不自動調整

在IB中, autoresizingMask屬性位於外部的四根線(柱狀線段), 若是是實線即表明不自動調整; 位於內部的兩根線(箭頭線段), 若是是實線即表明自動調整

下面經過兩個示例對比說明

示例: 讓子視圖與父視圖的上、下、左、右邊距保持不變, 且自身的寬度和高度自動調整

redView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;複製代碼

Autoresizing3-1.png

示例: 讓子視圖與父視圖的上、下、左、右邊距以及自身的寬度和高度按照比例自動調整

redView.autoresizingMask = UIViewContentModeLeft | UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleBottomMargin;複製代碼

Autoresizing3-2.png

注: 若是Autoresizing技術不能知足你對界面的精確佈局需求, 你能夠使用一個自定義視圖做爲容器, 並經過重寫其layoutSubviews方法來精確地佈局其子視圖, 或者使用iOS6新引入的Autolayout技術來進行精確佈局