iOS屏幕適配系列之Autoresizing技術

Autoresizing.png

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

通過Code使用Autoresizing技術

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

// 默認為YES
@property(nonatomic) BOOL autoresizesSubviews;
// 默認為UIViewAutoresizingNone
@property(nonatomic) UIViewAutoresizing autoresizingMask;

autoresizingMask屬性的取值為UIViewAutoresizing枚舉, 可以采用位運算(按位或)同時設置多個值

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

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

如果UIViewautoresizesSubviews屬性設置為YES, 當它的bounds發(fā)生改變時, 它會根據每個子視圖的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

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

// 示例: 讓子視圖與父視圖的右邊距和下邊距均固定為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發(fā)生改變時是否自動調整子視圖的布局

Autoresizing2-1.png

我們在子視圖的中設置autoresizingMask屬性, 用于標識當父視圖的bounds發(fā)生改變時如何自動調整自身的布局

Autoresizing2-2.png

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

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

下面再次通過IB的方式實現(xiàn)Code方式的兩個示例

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

Autoresizing2-3.png

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

Autoresizing2-4.png

注: 如果Xcode中默認開啟了Autolayout技術, 在使用Autoresizing技術前需要手動將其關閉

Autoresizing2-5.png
兩種方式的區(qū)別

IB中的設置最終都會轉化為Code運行, 所以二者在本質上沒有任何區(qū)別. 但是在設置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技術來進行精確布局

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市付材,隨后出現(xiàn)的幾起案子朦拖,更是在濱河造成了極大的恐慌,老刑警劉巖厌衔,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異捍岳,居然都是意外死亡富寿,警方通過查閱死者的電腦和手機睬隶,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來页徐,“玉大人苏潜,你說我怎么就攤上這事”溆拢” “怎么了恤左?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長搀绣。 經常有香客問我飞袋,道長,這世上最難降的妖魔是什么链患? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任口四,我火速辦了婚禮麸俘,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己等孵,他們只是感情好,可當我...
    茶點故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布忆谓。 她就那樣靜靜地躺著孙技,像睡著了一般。 火紅的嫁衣襯著肌膚如雪明棍。 梳的紋絲不亂的頭發(fā)上乡革,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天,我揣著相機與錄音击蹲,去河邊找鬼署拟。 笑死,一個胖子當著我的面吹牛歌豺,可吹牛的內容都是我干的推穷。 我是一名探鬼主播,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼类咧,長吁一口氣:“原來是場噩夢啊……” “哼馒铃!你這毒婦竟也來了?” 一聲冷哼從身側響起痕惋,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤区宇,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后值戳,有當地人在樹林里發(fā)現(xiàn)了一具尸體议谷,經...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年堕虹,在試婚紗的時候發(fā)現(xiàn)自己被綠了卧晓。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片芬首。...
    茶點故事閱讀 38,599評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖逼裆,靈堂內的尸體忽然破棺而出郁稍,到底是詐尸還是另有隱情,我是刑警寧澤胜宇,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布耀怜,位于F島的核電站,受9級特大地震影響桐愉,放射性物質發(fā)生泄漏财破。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一仅财、第九天 我趴在偏房一處隱蔽的房頂上張望狈究。 院中可真熱鬧,春花似錦盏求、人聲如沸抖锥。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽磅废。三九已至,卻和暖如春荆烈,著一層夾襖步出監(jiān)牢的瞬間拯勉,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工憔购, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留宫峦,地道東北人。 一個月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓玫鸟,卻偏偏與公主長得像导绷,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子屎飘,可洞房花燭夜當晚...
    茶點故事閱讀 43,465評論 2 348

推薦閱讀更多精彩內容