Come on! 來看看 主流的適配方案吧
創(chuàng)新互聯(lián)公司從2013年成立，先為威信等服務(wù)建站，威信等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為威信企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
隨著蘋果發(fā)布兩種新尺寸的大屏iPhone 6，iOS平臺(tái)尺寸適配問題終于還是來了，移動(dòng)設(shè)計(jì)全面進(jìn)入“雜屏”時(shí)代。看看下面三款iPhone尺寸和分辨率數(shù)據(jù)就知道屏幕有多雜了。
當(dāng)然除了這三種還有iPhone4 屏幕是 640*960,加起來就有四種屏幕了，你有沒有感覺很復(fù)雜，發(fā)過愁嗎，我們來慢慢分析下
加上Android生態(tài)中紛繁復(fù)雜的各種奇葩尺寸，現(xiàn)在APP設(shè)計(jì)開發(fā)必須考慮適配大、中、小三種屏幕。所以如何做到交付一套設(shè)計(jì)稿解決適配大中小三屏的問題？設(shè)計(jì)和開發(fā)之間采用什么協(xié)作模式？一個(gè)基本思路是：
1、選擇一種尺寸作為設(shè)計(jì)和開發(fā)基準(zhǔn)；
2、定義一套適配規(guī)則，自動(dòng)適配剩下兩種尺寸；
3、特殊適配效果給出設(shè)計(jì)效果。
來看一下手機(jī)淘寶的iPhone 6/iPhone 6 Plus采用的協(xié)作模式，再慢慢說明原委。
第一步，視覺設(shè)計(jì)階段，設(shè)計(jì)師按寬度750px（iPhone 6）做設(shè)計(jì)稿，除圖片外所有設(shè)計(jì)元素用矢量路徑來做。設(shè)計(jì)定稿后在750px的設(shè)計(jì)稿上做標(biāo)注，輸出標(biāo)注圖。同時(shí)等比放大1.5倍生成寬度1125px的設(shè)計(jì)稿，在1125px的稿子里切圖。
第二步，輸出兩個(gè)交付物給開發(fā)工程師：一個(gè)是程序用到的@3x切圖資源，另一個(gè)是寬度750px的設(shè)計(jì)標(biāo)注圖。
第三步，開發(fā)工程師拿到750px標(biāo)注圖和@3x切圖資源，完成iPhone 6（375pt）的界面開發(fā)。此階段不能用固定寬度的方式開發(fā)界面，得用自動(dòng)布局（auto layout），方便后續(xù)適配到其它尺寸。
第四步，適配調(diào)試階段，基于iPhone 6的界面效果，分別向上向下調(diào)試iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果。由此完成大中小三屏適配。
為什么選擇iPhone 6作為基準(zhǔn)尺寸？
當(dāng)面對(duì)大中小三種屏幕需要適配的時(shí)候，很容易想到先做好一種屏幕，再去適配剩下兩種屏幕。第一個(gè)決定是到底以哪種屏幕作為設(shè)計(jì)和開發(fā)的基準(zhǔn)尺寸。我們選擇中間尺寸的iPhone 6（750px/375pt）作為基準(zhǔn)，基于幾個(gè)原因：
1、從中間尺寸向上和向下適配的時(shí)候界面調(diào)整的幅度最小。375pt下的設(shè)計(jì)效果適配到414pt和320pt偏差不會(huì)太大。假設(shè)以414pt為基準(zhǔn)做出很優(yōu)雅的設(shè)計(jì)，到320pt可能元素之間比例就不是那么回事了，比如圖片和文字之間視覺比例可能失調(diào)。
2、iPhone 6 plus有兩種顯示模式，標(biāo)準(zhǔn)模式分辨率為1242x2208，放大模式分辨率為1125x2001（即iPhone 6的1.5倍）?？梢姽俜较到y(tǒng)里iPhone 6和iPhone 6 plus分辨率之間就存在1.5倍的倍率關(guān)系。很多情況下這兩種尺寸可以用1.5倍直接等比適配。
3、1242x2208這個(gè)奇葩的數(shù)值是蘋果官方都不愿意公開宣傳的一個(gè)分辨率，不便于記憶和計(jì)算柵格。640x1136雖然是廣泛應(yīng)用的一個(gè)分辨率，但是大屏?xí)r代依然以小尺寸為設(shè)計(jì)基準(zhǔn)顯然不合時(shí)宜，設(shè)計(jì)師會(huì)停留在小屏的視角做設(shè)計(jì)。
所以，iPhone6的750x1334是最適合基準(zhǔn)尺寸。
只交付一套設(shè)計(jì)稿，默認(rèn)用什么規(guī)則來適配？
前文提到適配策略是先選擇iPhone 6作為基準(zhǔn)設(shè)計(jì)尺寸，然后通過一套適配規(guī)則自動(dòng)適配到另外兩種尺寸。這套適配規(guī)則總結(jié)起來就一句話：文字流式，控件彈性，圖片等比縮放
控件彈性指的是，navigation、cell、bar等適配過程中垂直方向上高度不變；水平方向?qū)挾茸兓瘯r(shí)，通過調(diào)整元素間距或元素右對(duì)齊的方式實(shí)現(xiàn)自適應(yīng)。這樣屏幕越大，在垂直方向上可以顯示更多內(nèi)容，發(fā)揮大屏幕的優(yōu)勢(shì)。
按照上述默認(rèn)適配規(guī)則，大中小三種屏幕顯示效果均相同。有時(shí)候想在大屏幕顯示更多內(nèi)容，需要設(shè)計(jì)出特殊適配效果。比如App store首頁焦點(diǎn)圖，從iPhone 6適配到iPhone 6 plus時(shí)焦點(diǎn)圖尺寸和排版做了特殊處理。底下應(yīng)用列表也從一排3+個(gè)變成一排4+個(gè)，真正實(shí)現(xiàn)了大屏幕顯示更多內(nèi)容的理念。這些就需要設(shè)計(jì)師給出相應(yīng)設(shè)計(jì)稿。
讀完你懂了嗎，如果有疑問，歡飲留言跟我討論╰(￣▽￣)╮
原文地址
第一種
添加兩個(gè)文件 ?UIViewExt.h與UIViewExt.m文件
在ViewController.h文件中導(dǎo)入頭文件
#import"UIViewExt.h"
然后宏定義 獲取設(shè)備的高與寬
#define HEIGHT self.view.height
#define WIDTH self.view.width
然后在ViewController.m文件中初始化各種控件時(shí)就可以使用視圖的相對(duì)位置
如
self.lblName=[[UILabelalloc]initWithFrame:CGRectMake(self.view.left+50,self.view.top+100,WIDTH/8,HEIGHT/16)];
self.lblPassworw=[[UILabelalloc]initWithFrame:CGRectMake(self.view.left+50,self.lblName.bottom+10,WIDTH/8,HEIGHT/16)];
第二種
這種方法是 等比縮放
首先在AppDelegate.h文件里面
宏定義 獲取設(shè)備的高與寬
#define SCREENHEIGHT [[UIScreen mainScreen] bounds].size.height
#define SCREENWIDTH [[UIScreen mainScreen] bounds].size.width
接著聲明兩個(gè)屬性變量
@property(assign,nonatomic)floatautoSizeScaleX;
@property(assign,nonatomic)floatautoSizeScaleY;
在AppDelegate.m文件里面
//初始化AppDelegate單例的方法
AppDelegate*myDelegate=[[UIApplicationsharedApplication]delegate];
//判斷屏幕的高大于480即為iPhone5或以上設(shè)備因?yàn)樗鼈兤聊欢际堑缺仍鲩L的
if(SCREENHEIGHT480)
{
/**
*以iPhone5為基準(zhǔn)若是iPhone5
則myDelegate.autoSizeScaleX=SCREENWIDTH/320;
即為myDelegate.autoSizeScaleX=320/320;
若是iPhone6
則myDelegate.autoSizeScaleX=SCREENWIDTH/320;
即為myDelegate.autoSizeScaleX=375/320;
*/
myDelegate.autoSizeScaleX=SCREENWIDTH/320;
myDelegate.autoSizeScaleY=SCREENHEIGHT/568;
}
else{
/**
*否則即為iPhone4
*/
myDelegate.autoSizeScaleX=1.0;
myDelegate.autoSizeScaleY=1.0;
}
在ViewController.h文件中使用時(shí)導(dǎo)入頭文件
#import"AppDelegate.h"
模仿系統(tǒng)的CGRectMake方法 重寫一個(gè)CGRectMake1方法 ?在初始化控件時(shí)用這個(gè)方法就可以實(shí)現(xiàn)等比縮放 來失陪不同屏幕尺寸的iPhone
/**
*? CG_INLINE為內(nèi)聯(lián)函數(shù)
將CGRectMake重新定義為CGRectMake1
*
*? @param x????? #x description#
*? @param y????? #y description#
*? @param width? #width description#
*? @param height #height description#
*
*? @return rect的大小
*/
CG_INLINECGRect
CGRectMake1(CGFloatx,CGFloaty,CGFloatwidth,CGFloatheight)
{
CGRectrect;
AppDelegate*myDelegate=[[UIApplicationsharedApplication]delegate];
rect.origin.x= x *? myDelegate.autoSizeScaleX;
rect.origin.y= y *? myDelegate.autoSizeScaleY;
rect.size.width= width * myDelegate.autoSizeScaleX;
rect.size.height= height * myDelegate.autoSizeScaleY;
returnrect;
}
iOS設(shè)計(jì)尺寸375*812適配安卓可以按照以下標(biāo)準(zhǔn)做參考：設(shè)計(jì)基準(zhǔn)選擇指的是挑選當(dāng)前主流的手機(jī)屏幕分辨率作為設(shè)計(jì)適配標(biāo)準(zhǔn)。摒棄些非主流甚至已經(jīng)淘汰的手機(jī)屏幕尺寸，例如i0S@1x倍率的屏幕尺寸。
目前一般以iOS系統(tǒng)主流分辨率750x1334像素進(jìn)行設(shè)計(jì)，像素倍率為@2x，因?yàn)樗某叽缦蛏匣蛳蛳逻m配時(shí)，界面調(diào)整幅度最小，偏差不會(huì)太大，視覺比例也不會(huì)出現(xiàn)太大問題。而且與Android版本720x1280像素的尺寸相近，甚至屏幕密度也是相近的，所以只需做最小的設(shè)計(jì)調(diào)整。
基本上每個(gè)IOS APP都會(huì)有新手引導(dǎo)頁面這個(gè)功能，常規(guī)的就是幾張靜態(tài)圖片，可以左右滾動(dòng)。既然涉及到圖片，就肯定會(huì)存在適配的問題（為了達(dá)到最優(yōu)的體驗(yàn)效果，一般都會(huì)針對(duì)不同的分辨率設(shè)計(jì)不同尺寸的圖片），本文主要就是討論如何適配的問題。
2.1 方案一
根據(jù)屏幕分辨率的不同，使用不同的圖片。
2.2 ?方案二
熟悉IOS開發(fā)的人都知道，每一個(gè)ios項(xiàng)目中，都有一個(gè)Assets.xcassets文件夾，用來管理項(xiàng)目中所有的圖片（AppIcon、LaunchImage、其他業(yè)務(wù)圖片）。
從上面的截圖我們可以看到，xcode提供了兩個(gè)內(nèi)置的類型AppIcon、LaunchImage。我們只要提供正確尺寸的圖片，ios系統(tǒng)就能在不同分辨率的設(shè)備上使用對(duì)應(yīng)的圖片而無需我們自己指定；另外就是我們自己創(chuàng)建的（avatar），提供2x、3x這兩種類型的圖片即可（1x的設(shè)備現(xiàn)在基本上找不到了，而且當(dāng)前的ios系統(tǒng)也不支持1x的設(shè)備）。那么問題來了，我們自己創(chuàng)建的圖片集合，只有3個(gè)類型（1x、2x、3x），并不能按照分辨率來設(shè)定。再看一下上面的截圖，有一個(gè)“show”的圖片集合，形式如下：
咦！這個(gè)鬼東西是怎么搞出來的？我們先看看Assets.xcassets文件夾在硬盤上的組織形式：
從上圖我們可以看到，系統(tǒng)內(nèi)置的兩種類型AppIcon、LaunchImage對(duì)于的文件夾為AppIcon.appiconset、LaunchImage.launchimage，我們自己創(chuàng)建的圖片集合avatar對(duì)應(yīng)的文件夾為avatar.imageset。講到這里，你應(yīng)該大概猜到了show這個(gè)圖片集合是怎么創(chuàng)建出來了吧？
1、先創(chuàng)建一個(gè)LaunchImage類型的圖片集合；
2、修改名稱（LaunchImage→show）
3、修改文件夾名稱(show.launchimage→show.imageset)
回到正題，在show這個(gè)圖片集合里面，我們就可以輕松的根據(jù)分辨率設(shè)置2x、3x類型的圖片。
現(xiàn)在我們可以按照下圖的方式使用新手引導(dǎo)圖片了：
親測(cè)：不同分辨率的設(shè)備，展示對(duì)應(yīng)的圖片。
我們注意到，show.imageset文件夾中有一個(gè)文件Contents.json，正是這個(gè)文件，ios系統(tǒng)才能根據(jù)設(shè)備類型展示對(duì)應(yīng)的圖片資源。Contents.json文件內(nèi)容如下：
系統(tǒng)展示圖片的時(shí)候，會(huì)先解析這個(gè)文件，然后根據(jù)設(shè)備的分辨率，找到對(duì)應(yīng)的圖片。
重慶分公司
重慶分公司
