iOS開發(fā) ——全機(jī)型適配思路

最近一直在研究學(xué)習(xí)ReactiveCocoa,并且在給項(xiàng)目轉(zhuǎn)型到MVVM模式打基礎(chǔ)料饥,所以博客也很久沒有更新了蒲犬。

今天打算跟大家聊聊最近研究的全機(jī)型適配思路。

當(dāng)前我們需要適配的iPhone機(jī)型有4s岸啡、5s原叮、6s、6Plus四種機(jī)型。它們的尺寸分別是

 iphone4s {320, 480}     960*640
 iphone5 5s {320, 568}     1136*640
 iphone6 6s   {375, 667}    1334*750
 iphone6Plus 6sPlus {414, 736}  1920*1080

而一般我習(xí)慣在實(shí)際的項(xiàng)目開發(fā)中奋隶,使用Masonary來搭建UI界面擂送,雖然在Masonary中我們能很方便的設(shè)置各個(gè)控件之間的約束,但是對于類似4s機(jī)型和6s Plus機(jī)型的很大的高度差唯欣,有時(shí)候僅僅靠一次性成型的約束還是搭建不出很合理的界面嘹吨。

于是在這次搭建UI的過程中,我的一個(gè)思路就是按照比例境氢,針對各個(gè)機(jī)型進(jìn)行微調(diào)蟀拷。思路如下:

  • 美工提供的效果圖是基于iPhone6的效果圖

  • 而我只需要將標(biāo)注上的每個(gè)尺寸去對比iPhone6換算出比例,這樣一些間距就能按照不同機(jī)型尺寸的比例變得不一樣萍聊。

  • 針對考慮交互體驗(yàn)的控件问芬,在保持尺寸不變的基礎(chǔ)上,做細(xì)節(jié)微調(diào)寿桨。

在具體的代碼中此衅,我封裝出了一個(gè)類,定義了兩個(gè)類方法專門去適配所有機(jī)型的高度和寬度亭螟。思路就是上述按不同機(jī)型針對于iPhone6的比例而適配挡鞍。

代碼我也貼一部分出來。

頭文件的定義


#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

typedef NS_ENUM(NSInteger, IPhoneType) {
    iPhone4Type = 0,
    iPhone5Type,
    iPhone6Type,
    iPhone6PlusType
};

@interface CalculateLayout : NSObject

/**
 *  基于UI設(shè)計(jì)的iPhone6設(shè)計(jì)圖的全機(jī)型高度適配
 *
 *  @param height View高度
 *
 *  @return 適配后的高度
 */

+ (CGFloat)neu_layoutForAlliPhoneHeight:(CGFloat)height;
/**
 *  基于UI設(shè)計(jì)的iPhone6設(shè)計(jì)圖的全機(jī)型寬度適配
 *
 *  @param width 寬度
 *
 *  @return 適配后的寬度
 */
+ (CGFloat)neu_layoutForAlliPhoneWidth:(CGFloat)width;

.m文件的部分如下:


#define iPhone4Height (480.f)
#define iPhone4Width  (320.f)

#define iPhone5Height (568.f)
#define iPhone5Width  (320.f)

#define iPhone6Height (667.f)
#define iPhone6Width  (375.f)

#define iPhone6PlusHeight (736.f)
#define iPhone6PlusWidth  (414.f)

#pragma mark - 適配所有機(jī)型高度
+ (CGFloat)neu_layoutForAlliPhoneHeight:(CGFloat)height {
    CGFloat layoutHeight = 0.0f;
    if (iPhone4) {
        layoutHeight = ( height / iPhone6Height ) * iPhone4Height;
    } else if (iPhone5) {
        layoutHeight = ( height / iPhone6Height ) * iPhone5Height;
    } else if (iPhone6) {
        layoutHeight = ( height / iPhone6Height ) * iPhone6Height;
    } else if (iPhone6P) {
        layoutHeight = ( height / iPhone6Height ) * iPhone6PlusHeight;
    } else {
        layoutHeight = height;
    }
    return layoutHeight;
}

+ (CGFloat)neu_layoutForAlliPhoneWidth:(CGFloat)width {
    CGFloat layoutWidth = 0.0f;
    if (iPhone4) {
        layoutWidth = ( width / iPhone6Width ) * iPhone4Width;
    } else if (iPhone5) {
        layoutWidth = ( width / iPhone6Width ) * iPhone5Width;
    } else if (iPhone6) {
        layoutWidth = ( width / iPhone6Width ) * iPhone6Width;
    } else if (iPhone6P) {
        layoutWidth = ( width / iPhone6Width ) * iPhone6PlusWidth;
    }
    return layoutWidth;
}


代碼我也已經(jīng)放在了Github上预烙,如果這些對你有幫助墨微,在clone代碼之余能否給個(gè)star。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末默伍,一起剝皮案震驚了整個(gè)濱河市欢嘿,隨后出現(xiàn)的幾起案子衰琐,更是在濱河造成了極大的恐慌也糊,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,386評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件羡宙,死亡現(xiàn)場離奇詭異狸剃,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)狗热,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,142評論 3 394
  • 文/潘曉璐 我一進(jìn)店門钞馁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人匿刮,你說我怎么就攤上這事僧凰。” “怎么了熟丸?”我有些...
    開封第一講書人閱讀 164,704評論 0 353
  • 文/不壞的土叔 我叫張陵训措,是天一觀的道長。 經(jīng)常有香客問我,道長绩鸣,這世上最難降的妖魔是什么怀大? 我笑而不...
    開封第一講書人閱讀 58,702評論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮呀闻,結(jié)果婚禮上化借,老公的妹妹穿的比我還像新娘。我一直安慰自己捡多,他們只是感情好蓖康,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,716評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著垒手,像睡著了一般钓瞭。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上淫奔,一...
    開封第一講書人閱讀 51,573評論 1 305
  • 那天山涡,我揣著相機(jī)與錄音,去河邊找鬼唆迁。 笑死鸭丛,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的唐责。 我是一名探鬼主播鳞溉,決...
    沈念sama閱讀 40,314評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼鼠哥!你這毒婦竟也來了熟菲?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,230評論 0 276
  • 序言:老撾萬榮一對情侶失蹤朴恳,失蹤者是張志新(化名)和其女友劉穎抄罕,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體于颖,經(jīng)...
    沈念sama閱讀 45,680評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡呆贿,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,873評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了森渐。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片做入。...
    茶點(diǎn)故事閱讀 39,991評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖同衣,靈堂內(nèi)的尸體忽然破棺而出竟块,到底是詐尸還是另有隱情,我是刑警寧澤耐齐,帶...
    沈念sama閱讀 35,706評論 5 346
  • 正文 年R本政府宣布浪秘,位于F島的核電站前弯,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏秫逝。R本人自食惡果不足惜恕出,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,329評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望违帆。 院中可真熱鬧浙巫,春花似錦、人聲如沸刷后。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,910評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽尝胆。三九已至丧裁,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間含衔,已是汗流浹背煎娇。 一陣腳步聲響...
    開封第一講書人閱讀 33,038評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留贪染,地道東北人缓呛。 一個(gè)月前我還...
    沈念sama閱讀 48,158評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像杭隙,于是被迫代替她去往敵國和親哟绊。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,941評論 2 355

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