iOS屏幕適配

一、iOS屏幕適配發(fā)展歷程

設(shè)備 適配技術(shù)
4及以前(iPad未出 直接用代碼計算
有了iPad autoResizing
有不同屏幕的iPhone后 autoLayout
有更多不同屏幕的iPhone后 sizeClass

二因悲、各個技術(shù)的特性

1像吻、 直接用代碼計算

由于屏幕的大小都一樣峻黍,只有橫豎屏的情況,可以直接計算

2拨匆、 autoResizing

適合于控件與其父控件的關(guān)系

各屬性的解釋

屬性 解釋
UIViewAutoresizingNone 不會隨父視圖的改變而改變
UIViewAutoresizingFlexibleLeftMargin 自動調(diào)整view與父視圖左邊距姆涩,以保證右邊距不變
UIViewAutoresizingFlexibleWidth 自動調(diào)整view的寬度,保證左邊距和右邊距不變
UIViewAutoresizingFlexibleRightMargin 自動調(diào)整view與父視圖右邊距惭每,以保證左邊距不變
UIViewAutoresizingFlexibleTopMargin 自動調(diào)整view與父視圖上邊距骨饿,以保證下邊距不變
UIViewAutoresizingFlexibleHeight 自動調(diào)整view的高度,以保證上邊距和下邊距不變
UIViewAutoresizingFlexibleBottomMargin 自動調(diào)整view與父視圖的下邊距台腥,以保證上邊距不變
  • view的autoresizesSubviews屬性為yes時(默認(rèn)為yes)宏赘,autoresizing才會生效。
  • 從XCODE6開始览爵,Storyboard&Xib默認(rèn)是自動布局置鼻,因此我們需要手動調(diào)整镇饮,才能使用autoresizing蜓竹。
  • autoresizing可以組合使用,如:
    UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleBottomMargin
3、autoLayout

幫我們確定在不同設(shè)備、不同(父view)環(huán)境下俱济,同一個可視單元所應(yīng)具有合適的位置和尺寸(任何兩個視圖的關(guān)系都可以確定)

1. autoLayout的用法:

  • 直接建立約束條件
    [self.view addConstraint: [NSLayoutConstraint
    constraintWithItem:blueView
    attribute:NSLayoutAttributeLeft
    relatedBy:NSLayoutRelationEqual
    toItem:redView
    attribute:NSLayoutAttributeLeft
    multiplier:1
    constant:0]];
    這樣雖然代碼量比較大嘶是,但是是絕對可行的辦法,也是使用autoLayout最根本的辦法之一蛛碌。
  • 使用VFL語言
    - (void)viewDidLoad {
    [super viewDidLoad];
    UIButton *button=[[UIButton alloc]init];
    [button setTitle:@"點(diǎn)擊一下" forState:UIControlStateNormal];
    button.translatesAutoresizingMaskIntoConstraints=NO;
    [button setBackgroundColor:[UIColor blackColor]];
    [self.view addSubview:button];
    NSArray *constraints1=[NSLayoutConstraint
    constraintsWithVisualFormat:@"H:|-[button]-|"
    options:0
    metrics:nil
    views:NSDictionaryOfVariableBindings(button)];
    NSArray *constraints2=[NSLayoutConstraint
    constraintsWithVisualFormat:@"V:|-20-[button(==30)]"
    options:0
    metrics:nil
    views:NSDictionaryOfVariableBindings(button)];
    [self.view addConstraints:constraints1];
    [self.view addConstraints:constraints2];
    }
  • 使用使用第三方庫聂喇,如:MasonryUIView+AutoLayout……
2. autoLayout的好處:
  • 你基本上可以不用考慮3.5寸和4寸以及即將上市的x.x寸屏幕不同分辨率的問題蔚携,你終于可以不用在viewDidLoad方法里判斷不同分辨率下希太,不同控件應(yīng)該放在哪里,或者針對不同分辨率寫不同的storyboard和xib酝蜒;
  • 你可以拋棄那些根據(jù)不同文字來計算tableViewCell誊辉、UILabel高度的代碼了,因?yàn)閍utolayout會幫你自動計算好亡脑;
  • 如果你的布局在橫屏豎屏下變化不是特別大,你不用再為橫著豎著寫兩套代碼或者寫兩個storyboard/xib了;
4涩搓、sizeClass

在iOS8中拇派,新增了Size Classes特性,它是對當(dāng)前所有iOS設(shè)備尺寸的一個抽象途戒。那我們就只把屏幕的寬和高分別分成三種情況:Compact:緊湊坑傅、Regular:寬松、Any:任意棺滞。

這樣寬和高三三一整合裁蚁,一共9中情況。如下圖所示继准,針對每一種情況枉证。我們可以在每種情況下設(shè)置不同的布局(包括控件的約束,甚至是控件是否顯示)

sizeClass.png

** 對sizeClass的理解:**
sizeClass的實(shí)質(zhì)是將iOS屏幕分成了不同的抽象概念移必,這些不同的抽象組合室谚,對應(yīng)著不同的設(shè)備屏幕。所以崔泵,利用sizeClass可以針對同一套UI秒赤,來適配所有的屏幕。注意:這些所有的適配憎瘸,都是利用autoLayout來實(shí)現(xiàn)的入篮,sizeClass只是負(fù)責(zé)提供不同的屏幕尺寸。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末幌甘,一起剝皮案震驚了整個濱河市潮售,隨后出現(xiàn)的幾起案子痊项,更是在濱河造成了極大的恐慌,老刑警劉巖酥诽,帶你破解...
    沈念sama閱讀 211,639評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鞍泉,死亡現(xiàn)場離奇詭異,居然都是意外死亡肮帐,警方通過查閱死者的電腦和手機(jī)咖驮,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來训枢,“玉大人托修,你說我怎么就攤上這事『憬纾” “怎么了诀黍?”我有些...
    開封第一講書人閱讀 157,221評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長仗处。 經(jīng)常有香客問我眯勾,道長,這世上最難降的妖魔是什么婆誓? 我笑而不...
    開封第一講書人閱讀 56,474評論 1 283
  • 正文 為了忘掉前任吃环,我火速辦了婚禮,結(jié)果婚禮上洋幻,老公的妹妹穿的比我還像新娘郁轻。我一直安慰自己,他們只是感情好文留,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,570評論 6 386
  • 文/花漫 我一把揭開白布好唯。 她就那樣靜靜地躺著,像睡著了一般燥翅。 火紅的嫁衣襯著肌膚如雪骑篙。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,816評論 1 290
  • 那天森书,我揣著相機(jī)與錄音靶端,去河邊找鬼。 笑死凛膏,一個胖子當(dāng)著我的面吹牛杨名,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播猖毫,決...
    沈念sama閱讀 38,957評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼台谍,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了吁断?” 一聲冷哼從身側(cè)響起趁蕊,我...
    開封第一講書人閱讀 37,718評論 0 266
  • 序言:老撾萬榮一對情侶失蹤镊折,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后介衔,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,176評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡骂因,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,511評論 2 327
  • 正文 我和宋清朗相戀三年炎咖,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片寒波。...
    茶點(diǎn)故事閱讀 38,646評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡乘盼,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出俄烁,到底是詐尸還是另有隱情绸栅,我是刑警寧澤,帶...
    沈念sama閱讀 34,322評論 4 330
  • 正文 年R本政府宣布页屠,位于F島的核電站粹胯,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏辰企。R本人自食惡果不足惜风纠,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,934評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望牢贸。 院中可真熱鬧竹观,春花似錦、人聲如沸潜索。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽竹习。三九已至誊抛,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間整陌,已是汗流浹背芍锚。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蔓榄,地道東北人并炮。 一個月前我還...
    沈念sama閱讀 46,358評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像甥郑,于是被迫代替她去往敵國和親逃魄。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,514評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 一澜搅、iOS屏幕適配發(fā)展歷程 設(shè)備 ...
    LeoCao閱讀 674評論 0 0
  • 前言 iPhone自誕生以來觅丰,隨著其屏幕尺寸不斷的多樣化,屏幕適配的技術(shù)一直在發(fā)展更新妨退。目前妇萄,iOS系統(tǒng)版本已經(jīng)更...
    VV木公子閱讀 15,365評論 24 170
  • 屏幕適配的發(fā)展歷史 iPhone3GS\iPhone4沒有屏幕適配可言全部用frame、bounds咬荷、center...
    嗶哩嗶哩智能喵閱讀 607評論 0 0
  • 前天下午幸乒,下班路上教練給我打電話:玫瑰懦底,你今晚過來上課嗎?嗯罕扎,上的聚唐。那今晚見面再談! 空中瑜伽一直約課的人...
    陳玫瑰7W6閱讀 445評論 0 2
  • 我相信人有靈魂腔召,你呢拱层? 我也相信人與人之間是有磁場的,你呢宴咧? 我微信里有個聊過兩次天的好友根灯,她叫羅羅,我向她發(fā)送好...
    山水平生閱讀 1,456評論 18 15