iOS 適配

字體設配

  • 1.iPhone4和iPhone5寬度一樣,5只是比4高176像素阳距,所以5和4一套規(guī)范即可塔粒;
  • 2.iPhone6的放大模式分辨率是640 x 1136,和iPhone5正好相同筐摘;
  • 3.iPhone6的標準模式分辨率為750 x 1334卒茬,整體放大1.5倍正好是iPhone6 Plus的放大模式1125*2001。
    總結(jié):我們可以看出iPhone 4蓄拣、5扬虚、6共用一套字體大小規(guī)范。iPhone6 plus在放大模式下的字體正好是在此基礎上放大了1.5倍:

UI適配

各版本iPhone的尺寸規(guī)格.png

手動

可以根據(jù)UIDevice 或直接使用屏幕寬度 判斷設配的手機型號球恤,并作適配辜昵,一般用于接口適配;UI適配不推薦使用咽斧!

Frame

簡單的中點設置可以通過frame的設置方法堪置,Autolayout出來之后還是推薦使用Autolayout躬存,一句話:丟掉Frame,擁抱Autolayout舀锨!

Autoresizing

Autolayout之前的版本岭洲,使用相當方便,但只能控制當前子控件對于其父控件的排版坎匿。

  • sb盾剩,xib中直接設置


    Autoresizing.jpg

    正方形外 上下左右線:選中對應線代表子控件和父控件某個邊緣的間距是固定的
    正方形內(nèi) 上下左右線: 選中對應線代表:對應的子控件的的長或?qū)捵詣痈S父控件改變

  • 代碼設置:通過屬性:autoresizingMask直接設置。
    注意:位置設置方式與連線方式相反替蔬,是設置某邊可伸縮告私,反之就是對應邊角固定,伸縮方式一致承桥。例如需要設置底部邊固定驻粟,則需要設置top。
- UIViewAutoresizingFlexible`Left`Margin   = 1 << 0,
    - 距離父控件`左邊`的間距是伸縮的
- UIViewAutoresizingFlexible`Right`Margin  = 1 << 2,
    - 距離父控件`右邊`的間距是伸縮的
- UIViewAutoresizingFlexible`Top`Margin    = 1 << 3,
    - 距離父控件`上邊`的間距是伸縮的
- UIViewAutoresizingFlexible`Bottom`Margin = 1 << 5
    - 距離父控件`下邊`的間距是伸縮的
- UIViewAutoresizingFlexible`Width`        = 1 << 1,
    - `寬度`跟隨父控件`寬度`進行伸縮
- UIViewAutoresizingFlexible`Height`       = 1 << 4,
    - `高度`跟隨父控件`高度`進行伸縮

Autolayout

最常用的適配方法凶异,在iOS6/Xcode4的時候被蘋果引入兩個核心概念:參照蜀撑,約束.即參照其他控件的位置添加約束,來確定需要適配的控件的唯一大小和位置剩彬。核心公式為:
obj1.property1 =(obj2.property2 * multiplier)+ constant value

注意:
- 要先禁止autoresizing功能酷麦,view.translatesAutoresizingMaskIntoConstraints = NO;
- 添加約束之前,一定要保證相關(guān)控件都已經(jīng)在各自的父控件上
- 不用再給view設置frame
- 各種適配方法不能混用
- 動畫 :用強制更新約束方法(layoutIfNeeded)襟衰,

  • NSLayoutConstraint
    直接是公式的代碼化贴铜,添加代碼相當繁瑣,一般不適用瀑晒!
/**
view1 :要約束的控件
attr1 :約束的類型(做怎樣的約束)
relation :與參照控件之間的關(guān)系
view2 :參照的控件
attr2 :約束的類型(做怎樣的約束)
multiplier :乘數(shù)
c :常量
*/
----創(chuàng)建約束
+(id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;
+(id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;
----添加約束
- (void)addConstraint:(NSLayoutConstraint *)constraint; 
- (void)addConstraints:(NSArray *)constraints;
  • VFL
    VFL全稱是Visual Format Language绍坝,翻譯過來是“可視化格式語言” VFL是蘋果公司為了簡化Autolayout的編碼而推出的抽象語言,是常用的約束添加方式苔悦。

// 水平方向 
NSString *vlf = @"H:|-margin-[blueView]-margin-[redView(==blueView)]-margin-|"; 
NSDictionary *views = @{ @"blueView" : blueView,  @"redView" : redView }; 
NSDictionary *metrics = @{@"margin" : @20}; 

// 所有控件的頂部\底部對齊 
NSLayoutFormatOptions opts = NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom; 
NSArray *lcs = [NSLayoutConstraint constraintsWithVisualFormat:vlf options:opts metrics:metrics views:views]; 
[self.view addConstraints:lcs]; 

// 垂直方向 
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[blueView(40)]-margin-|" options:kNilOptions metrics:metrics views:views]];
  • masonry
    一個非常不錯的第三方庫轩褐,基于塊的方式來添加約束,使用非常簡單
UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10); 
[view1 mas_makeConstraints:^(MASConstraintMaker *make) { 
make.top.equalTo(superview.mas_top).with.offset(padding.top); 
make.left.equalTo(superview.mas_left).with.offset(padding.left); 
make.bottom.equalTo(superview.mas_bottom).with.offset(-padding.bottom); 
make.right.equalTo(superview.mas_right).with.offset(-padding.right); 
}];

Size Classes

iOS8之后玖详,蘋果推出的適配的新技術(shù)把介。


Size Classes.png
  • 它僅僅是對屏幕進行了分類, 真正排布UI元素還得使用autolayout
  • 不再有橫豎屏的概念, 只有屏幕尺寸概念
  • 不再有具體尺寸的概念, 只有抽象尺寸的概念: 把寬度和高度各分為3種情況
  1. Compact : 緊湊(小)
  2. Any : 任意
  3. Regular : 寬松(大)
  • 各屏幕適配
    • iPhone4S,iPhone5/5s,iPhone6
      豎屏:(w:Compact h:Regular) 橫屏:(w:Compact h:Compact) i
    • Phone6 Plus:
      豎屏:(w:Compact h:Regular) 橫屏:(w:Regular h:Compact)
  • iPad
    豎屏:(w:Regular h:Regular) 橫屏:(w:Regular h:Regular)
  • Apple Watch(猜測)
    豎屏:(w:Compact h:Compact) 橫屏:(w:Compact h:Compact)

所以,正確的使用姿勢應該是通過sizeclass對屏幕進行分類蟋座,再通過autolayout:對屏幕中各種元素進行約束(位置\尺寸)拗踢。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市向臀,隨后出現(xiàn)的幾起案子巢墅,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,406評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件君纫,死亡現(xiàn)場離奇詭異驯遇,居然都是意外死亡,警方通過查閱死者的電腦和手機蓄髓,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評論 3 393
  • 文/潘曉璐 我一進店門叉庐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人会喝,你說我怎么就攤上這事陡叠。” “怎么了好乐?”我有些...
    開封第一講書人閱讀 163,711評論 0 353
  • 文/不壞的土叔 我叫張陵匾竿,是天一觀的道長瓦宜。 經(jīng)常有香客問我蔚万,道長,這世上最難降的妖魔是什么临庇? 我笑而不...
    開封第一講書人閱讀 58,380評論 1 293
  • 正文 為了忘掉前任反璃,我火速辦了婚禮,結(jié)果婚禮上假夺,老公的妹妹穿的比我還像新娘淮蜈。我一直安慰自己,他們只是感情好已卷,可當我...
    茶點故事閱讀 67,432評論 6 392
  • 文/花漫 我一把揭開白布梧田。 她就那樣靜靜地躺著,像睡著了一般侧蘸。 火紅的嫁衣襯著肌膚如雪裁眯。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,301評論 1 301
  • 那天讳癌,我揣著相機與錄音穿稳,去河邊找鬼。 笑死晌坤,一個胖子當著我的面吹牛逢艘,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播骤菠,決...
    沈念sama閱讀 40,145評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼它改,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了商乎?” 一聲冷哼從身側(cè)響起央拖,我...
    開封第一講書人閱讀 39,008評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后爬泥,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體柬讨,經(jīng)...
    沈念sama閱讀 45,443評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,649評論 3 334
  • 正文 我和宋清朗相戀三年袍啡,在試婚紗的時候發(fā)現(xiàn)自己被綠了踩官。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,795評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡境输,死狀恐怖逐纬,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情科雳,我是刑警寧澤矾利,帶...
    沈念sama閱讀 35,501評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站信粮,受9級特大地震影響黔攒,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜强缘,卻給世界環(huán)境...
    茶點故事閱讀 41,119評論 3 328
  • 文/蒙蒙 一督惰、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧旅掂,春花似錦赏胚、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,731評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至秘车,卻和暖如春典勇,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背鲫尊。 一陣腳步聲響...
    開封第一講書人閱讀 32,865評論 1 269
  • 我被黑心中介騙來泰國打工痴柔, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人疫向。 一個月前我還...
    沈念sama閱讀 47,899評論 2 370
  • 正文 我出身青樓咳蔚,卻偏偏與公主長得像,于是被迫代替她去往敵國和親搔驼。 傳聞我的和親對象是個殘疾皇子谈火,可洞房花燭夜當晚...
    茶點故事閱讀 44,724評論 2 354

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

  • 1.尺寸適配1.原因 iOS7中所有導航欄都為半透明,導航欄(height=44)和狀態(tài)欄(height=20)不...
    LZM輪回閱讀 6,114評論 1 4
  • 什么是適配:適應舌涨、兼容不同版本不同尺寸的移動智能設備iPhone尺寸:3.5糯耍、4.0、4.7、5.5 inch(英...
    冰J冰閱讀 1,170評論 1 14
  • 分為兩個部分:VFL代碼適配和Masonry框架適配 1.VFL代碼適配 一温技、VFL介紹 1革为、VFL全稱是Visu...
    IIronMan閱讀 707評論 0 5
  • 前言 iPhone自誕生以來蜓堕,隨著其屏幕尺寸不斷的多樣化抛虏,屏幕適配的技術(shù)一直在發(fā)展更新。目前套才,iOS系統(tǒng)版本已經(jīng)更...
    VV木公子閱讀 15,384評論 24 170
  • 一迂猴、機型的適配; 1.機型的變化: 坐標:表示屏幕物理尺寸大小背伴,坐標變大了沸毁,表示機器屏幕尺寸變大了; 像素:表示屏...
    mingxinnian閱讀 1,075評論 0 0