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技術來進行精確布局