iOS知識(shí)點(diǎn)之屏幕適配

1.為什么要進(jìn)行屏幕適配
我們都知道現(xiàn)在市場(chǎng)上蘋(píng)果手機(jī)已經(jīng)有了很多款式例如:iPhone4,iPhone4s描扯,iPhone5倡怎,iPhone5s,iPhone5c奸晴,iPhone6冤馏,iPhone6p,iPhone6s寄啼,iPhone6sp等逮光。他們的尺寸也各有不同這里就不一一細(xì)說(shuō)了,我們看下兩張圖就知道為什么要屏幕適配了墩划。


![Simulator Screen Shot 2016年5月12日 下午3.37.17.png](http://upload-images.jianshu.io/upload_images/1400051-6283e928eda18de9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

這兩張圖就可以看出同是一個(gè)開(kāi)始按鈕涕刚,左邊的(iPhone4s)按鈕在靠右下角,右邊的(iPhone6)按鈕卻在中間乙帮。
那么怎么才能讓它們都在中間而不出現(xiàn)上述情況呢副女?這就是我要說(shuō)的第二點(diǎn)怎么進(jìn)行屏幕適配。
2.怎樣進(jìn)行屏幕適配
1)直接用storyboard和xib進(jìn)行可視化開(kāi)發(fā)
這種方法的優(yōu)點(diǎn)是:所見(jiàn)即所得蚣旱。意思就是直接將需要的UI控件放進(jìn)自己的controller或者view中然后拖線(xiàn)建立約束碑幅。
我們還是以上圖的開(kāi)始按鈕為例來(lái)進(jìn)行適配,由于該是配方法屬于直接拖線(xiàn)所以不存在寫(xiě)代碼那么我就直接用圖說(shuō)明吧H獭9嫡恰!
1.將按鈕拖入controller:

![Uploading 311637BB-71C ![Uploading 311637BB-71C4-4EAE-A5AC-1A64D07A4DAE_909434.jpg . . .] 4-4EAE-A5AC-1A64D07A4DAE_886283.jpg . . .]

2.建立約束:

311637BB-71C4-4EAE-A5AC-1A64D07A4DAE.jpg

這樣我們就將這個(gè)開(kāi)始按鈕放在了屏幕中央异吻,就不會(huì)存在上圖iPhone4s和iPhone6在不同的地方了裹赴。如圖:


Simulator Screen Shot 2016年5月12日 下午3.37.17.png
Simulator Screen Shot 2016年5月12日 下午3.38.22.png

左圖為iPhone4s,右圖為iPhone6诀浪。
有利必有弊棋返,這種方法的缺點(diǎn)就是:如果界面的東西一旦多了那么拖的約束條件也就越多了,看的讓人眼花繚亂雷猪,而且一旦多了過(guò)后代碼維護(hù)起來(lái)就相當(dāng)麻煩了睛竣。怎么解決這種情況?當(dāng)然還有別的方法求摇,下面我們來(lái)看第二種用代碼進(jìn)行屏幕適配射沟。
2)代碼進(jìn)行屏幕適配
代碼適配又幾種常用的方法:
1.是蘋(píng)果原生的Auto Layout(自動(dòng)布局)殊者。
2.還有就是Auto Layout問(wèn)世之前所有的iOS開(kāi)發(fā)所用的每個(gè)UI控件都有一個(gè)屬性- (instancetype)initWithFrame:(CGRect)frame 來(lái)約束控件的位置,這種方法的缺點(diǎn)是并不能實(shí)現(xiàn)自動(dòng)的布局验夯,意思是如上圖的開(kāi)始按鈕他的長(zhǎng)寬都是被固定死的猖吴,不能根據(jù)上面的字?jǐn)?shù),字體自動(dòng)適應(yīng)大小挥转。
3.masonry這是一些大神在有了Auto Layout后覺(jué)得代碼量過(guò)大海蔽,書(shū)寫(xiě)很不方便。因此對(duì)Auto Layout進(jìn)行了二次封裝绑谣,masonry的出現(xiàn)很大程度上簡(jiǎn)化了iOS開(kāi)發(fā)中的屏幕適配問(wèn)題党窜。
現(xiàn)在我就將masonry和Auto Layout進(jìn)行下對(duì)比吧!S虺稹刑然!
這里我們創(chuàng)建一個(gè)button然后給他進(jìn)行屏幕適配(也就是建立約束):
UIButton *button = [[UIButton alloc] init];
button.translatesAutoresizingMaskIntoConstraints = NO;
button.backgroundColor = [UIColor greenColor];
[self.view addSubview:button];
//這樣我們就創(chuàng)建了一個(gè)button但是他的位置和尺寸并沒(méi)有確定∷吕蓿現(xiàn)在用Auto Layout建立約束暇务。
[self.view addConstraints:@[[NSLayoutConstraint constraintWithItem:button
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:10],
//上面這段代碼大體意思是建立self.view和button之間的頂部約束,距離頂端為10怔软,放大倍數(shù)為1垦细。(沒(méi)搞懂放大倍數(shù)是什么意思)下面代碼依次是左邊,下邊挡逼,右邊的約束條件括改。

[NSLayoutConstraint constraintWithItem:button
attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeLeft
multiplier:1.0
constant:10],

 [NSLayoutConstraint constraintWithItem:button
  attribute:NSLayoutAttributeBottom
  relatedBy:NSLayoutRelationEqual
 toItem:self.view

attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:-10],

  [NSLayoutConstraint constraintWithItem:button
    attribute:NSLayoutAttributeRight
    relatedBy:NSLayoutRelationEqual
   toItem:self.view
  attribute:NSLayoutAttributeRight
  multiplier:1
   constant:-10],
    ]];

看過(guò)Auto Layout建立的約束我們?cè)趤?lái)看下用masonry建立的約束:
與上述一樣我們先創(chuàng)建一個(gè)button
UIButton *button = [[UIButton alloc] init];
button.translatesAutoresizingMaskIntoConstraints = NO;
button.backgroundColor = [UIColor greenColor];
[self.view addSubview:button];
//然后建立約束:
[button mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.view.mas_top).with.offset(10);
make.left.equalTo(self.view.mas_left).with.offset(10);
make.bottom.equalTo(self.view.mas_bottom).with.offset(-10);
make.right.equalTo(self.view.mas_right).with.offset(-10);
}];

以上兩段代碼都達(dá)到同樣的效果,然而我們不難看出下面這段用masonry簡(jiǎn)潔了很多家坎。
那么我們?cè)賮?lái)說(shuō)一下- (instancetype)initWithFrame:(CGRect)frame:
這里我們直接創(chuàng)建lable直接給出它的位置大小嘱能。
UILable *lable = [[UILable alloc] initWithFrame:CGRectMake(50, 50, 50, 50)];
[self.view addaddSubview:lable];
這樣一個(gè)控件lable就創(chuàng)建好了,位置也進(jìn)行了固定虱疏。小括號(hào)內(nèi)的數(shù)字前兩個(gè)是代表lable的左上角距離self.view左上角的寬和高,后面的兩個(gè)數(shù)是lable的長(zhǎng)和寬惹骂。這樣的缺點(diǎn)是每一個(gè)UI控件都需要計(jì)算出它距離self.view左上角的寬和高,太過(guò)麻煩做瞪。
這些都是適配中的一些簡(jiǎn)單的基礎(chǔ)的東西对粪。更多復(fù)雜的需要在深度研究了。
3)可視化開(kāi)發(fā)和代碼結(jié)合
其實(shí)現(xiàn)在最主流的屏幕適配就是可視化開(kāi)發(fā)和代碼結(jié)合了装蓬,這里說(shuō)下我在適配屏幕中是怎么做的吧著拭!
當(dāng)界面太過(guò)復(fù)雜時(shí)或者在controller里面的時(shí)候那么我們就可使用代碼適配,當(dāng)然如果controller中的東西可以分離出來(lái)例如:cell(單元格)那么cell就可以采用可視化適配牍帚。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末儡遮,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子暗赶,更是在濱河造成了極大的恐慌峦萎,老刑警劉巖屡久,帶你破解...
    沈念sama閱讀 217,826評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異爱榔,居然都是意外死亡被环,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,968評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)详幽,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)筛欢,“玉大人,你說(shuō)我怎么就攤上這事唇聘“婀茫” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,234評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵迟郎,是天一觀的道長(zhǎng)剥险。 經(jīng)常有香客問(wèn)我,道長(zhǎng)宪肖,這世上最難降的妖魔是什么表制? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,562評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮控乾,結(jié)果婚禮上么介,老公的妹妹穿的比我還像新娘。我一直安慰自己蜕衡,他們只是感情好壤短,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,611評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著慨仿,像睡著了一般久脯。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上镰吆,一...
    開(kāi)封第一講書(shū)人閱讀 51,482評(píng)論 1 302
  • 那天帘撰,我揣著相機(jī)與錄音,去河邊找鬼鼎姊。 笑死骡和,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的相寇。 我是一名探鬼主播慰于,決...
    沈念sama閱讀 40,271評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼唤衫!你這毒婦竟也來(lái)了婆赠?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,166評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎休里,沒(méi)想到半個(gè)月后蛆挫,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,608評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡妙黍,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,814評(píng)論 3 336
  • 正文 我和宋清朗相戀三年悴侵,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片拭嫁。...
    茶點(diǎn)故事閱讀 39,926評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡可免,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出做粤,到底是詐尸還是另有隱情浇借,我是刑警寧澤,帶...
    沈念sama閱讀 35,644評(píng)論 5 346
  • 正文 年R本政府宣布怕品,位于F島的核電站妇垢,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏肉康。R本人自食惡果不足惜闯估,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,249評(píng)論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望迎罗。 院中可真熱鬧睬愤,春花似錦片仿、人聲如沸纹安。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,866評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)厢岂。三九已至,卻和暖如春阳距,著一層夾襖步出監(jiān)牢的瞬間塔粒,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,991評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工筐摘, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留卒茬,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,063評(píng)論 3 370
  • 正文 我出身青樓咖熟,卻偏偏與公主長(zhǎng)得像圃酵,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子馍管,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,871評(píng)論 2 354

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

  • 1.尺寸適配1.原因 iOS7中所有導(dǎo)航欄都為半透明郭赐,導(dǎo)航欄(height=44)和狀態(tài)欄(height=20)不...
    LZM輪回閱讀 6,116評(píng)論 1 4
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,117評(píng)論 25 707
  • 開(kāi)始iOS 7中自動(dòng)布局教程(一) 發(fā)布于:2013-12-03 13:53閱讀數(shù):86977 到目前為止,如果你...
    誰(shuí)的青春不迷茫閱讀 922評(píng)論 0 2
  • 柴油錘爆發(fā)力強(qiáng)俘陷,錘擊能量大,工效高观谦,錘擊作用時(shí)間比自由落錘作用時(shí)間長(zhǎng)拉盾,因此錘擊應(yīng)力相對(duì)低一些,沖擊體沖擊距離(落距...
    工程寶閱讀 1,841評(píng)論 0 0
  • 人人都是向死而生豁状,野蠻生長(zhǎng)的孩提時(shí)代真的不賴(lài)盾剩。 中高考將近,近些天總是與身邊的大朋友聊起現(xiàn)在孩子的成長(zhǎng)空間和學(xué)習(xí)壓...
    公子沈墨白閱讀 614評(píng)論 0 3