iOS開發(fā)：iPhone尺寸和適配

我們通常所說的iPhone5屏幕尺寸為4英寸、iPhone6屏幕尺寸為4.7英寸,指的是顯示屏對角線的長度(diagonal)

成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的海原網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

PPI(Pixel Per Inch by diagonal):表示沿著對角線,每英寸所擁有的像素(Pixel)數(shù)目。

PPI數(shù)值越高,代表顯示屏能夠以越高的密度顯示圖像,即通常所說的分辨率越高、顆粒感越弱。

根據(jù)勾股定理

計(jì)算結(jié)果稍有出入,這是因?yàn)橄袼氐碾x散采樣有鋸齒效應(yīng)。

早期的iPhone3GS的屏幕分辨率是320*480(PPI=163),iOS繪制圖形(CGPoint/CGSize/CGRect)均以point為單位(measured in points):

后來在iPhone4中,同樣大小(3.5 inch)的屏幕采用了Retina顯示技術(shù),橫、縱向方向像素密度都被放大到2倍,像素分辨率提高到(320x2)x(480x2)= 960x640(PPI=326), 顯像分辨率提升至iPhone3GS的4倍(1個(gè)Point被渲染成1個(gè)2x2的像素矩陣)。

在同樣的邏輯坐標(biāo)系下(320x480):

為了自動(dòng)適應(yīng)分辨率,系統(tǒng)會(huì)根據(jù)設(shè)備實(shí)際分辨率,自動(dòng)給UIScreen.scale賦值,該屬性對開發(fā)者只讀。

在同樣的邏輯分辨率下,可以通過scale參數(shù)識別是iPhone3GS還是iPhone4(s)。以下基于nativeScale參數(shù),定義了探測機(jī)型是否為iPhone6+的宏

--------------------------------------------------------------------------------那么,同樣的分辨率和scale,如何區(qū)分機(jī)型iPhone4與4s、iPhone5與5s呢?通過[[UIDevice currentDevice] model]只能判別iPhone、iPad、iPod大類,要判斷iPhone具體機(jī)型型號,則需要通過sysctlbyname("hw.machine")獲取詳細(xì)的設(shè)備參數(shù)信息予以甄別。

iPhone3GS時(shí)代,我們?yōu)橐粋€(gè)應(yīng)用提供圖標(biāo)(或按鈕提供貼圖),只需要icon.png。針對現(xiàn)在的iPhone4~6 Retina顯示屏,需要制作額外的@2x高分辨率版本。

Phone6+在實(shí)際渲染時(shí),downsampling/1.15(1242x2208-1080x1920),準(zhǔn)確的講,應(yīng)該是@2.46x。蘋果為方便開發(fā)者用的是@3x的素材,然后再縮放到@2.46x上。

參考： 一張圖幫你看懂 iPhone 6 Plus 屏幕分辨率

1

該方法使用系統(tǒng)緩存,適合表視圖重復(fù)加載圖像的情形。同時(shí)該API根據(jù)UIScreen的scale,自動(dòng)查找包含對應(yīng)高倍圖后綴名(@2x)的文件,如果找到二倍圖,則image.scale=2.0,對應(yīng)邏輯size大小以point度量(pixel度量的一半);如果沒找到設(shè)置默認(rèn)image.scale=1.0,對應(yīng)邏輯size大小同像素尺寸。因此,

2

這組方法創(chuàng)建的UIImage對象 沒有使用系統(tǒng)緩存 ,并且指定文件名必須包含明確的高倍圖后綴。

3

//考慮? 轉(zhuǎn)屏? 的影響,按照實(shí)際屏幕方向(UIDevice ?Orientation)的寬高

//不考慮轉(zhuǎn)屏的影響,只取豎屏(UIDevice OrientationPortrait)的寬高

待續(xù)

iOS 四種iPhone屏幕適配方案(借鑒)

Come on! 來看看 主流的適配方案吧

隨著蘋果發(fā)布兩種新尺寸的大屏iPhone 6，iOS平臺尺寸適配問題終于還是來了，移動(dòng)設(shè)計(jì)全面進(jìn)入“雜屏”時(shí)代?？纯聪旅嫒頸Phone尺寸和分辨率數(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)面對大中小三種屏幕需要適配的時(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)整元素間距或元素右對齊的方式實(shí)現(xiàn)自適應(yīng)。這樣屏幕越大，在垂直方向上可以顯示更多內(nèi)容，發(fā)揮大屏幕的優(yōu)勢。

按照上述默認(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ì)稿。

讀完你懂了嗎，如果有疑問，歡飲留言跟我討論╰(￣▽￣)╮

原文地址

iOS字體大小適配

在iOS開發(fā)中，有些公司對字體也有適配要求，為了讓字體美觀，所以在不同尺寸的屏幕上字體大小也要做到適配。

自己總結(jié)了幾種方法供大家參考。

方法一：用宏定義適配字體大小（根據(jù)屏幕尺寸判斷）

方法二：用宏定義適配字體大?。ǜ鶕?jù)屏幕尺寸判斷）

方法三：(利用runTime給UIFont寫分類 替換系統(tǒng)自帶的方法)推薦使用這種

外部正常調(diào)用系統(tǒng)設(shè)置字體方法就行

注意:

作者鏈接：

iOS開發(fā) - iOS15導(dǎo)航欄適配（Object-C、Swift）

Swift版導(dǎo)航欄適配參考

在iOS 13中給導(dǎo)航的 UINavigationBar 增加了 scrollEdgeAppearance 屬性應(yīng)用在iOS 14及更早版本的大標(biāo)題導(dǎo)航欄上，在iOS 15中 scrollEdgeAppearance 屬性適用于所有的導(dǎo)航欄

官方解釋：描述當(dāng)關(guān)聯(lián)的UIScrollView到達(dá)與導(dǎo)航條相鄰的邊緣(導(dǎo)航條的上邊緣)時(shí)要使用的導(dǎo)航條的外觀屬性。如果沒有設(shè)置，將使用修改后的standardAppearance

scrollEdgeAppearance 與 standardAppearance 一樣同屬于 UINavigationBarAppearance 類型 父類是 UIBarAppearance

其中影響導(dǎo)航欄顏色、陰影涉及到以下屬性

因?yàn)?scrollEdgeAppearance = nil ，當(dāng)前控制器如果使用有 ScrollView 類的控件，當(dāng) ScrollView 向上滾動(dòng)時(shí) scrollEdgeAppearance 會(huì)默認(rèn)使用 standardAppearance 的屬性效果。所以 backgroundEffect 和 shadowColor 屬性需要顯式設(shè)置為nil，以防止 backgroundEffect、shadowColor 有顏色值影響導(dǎo)航欄透明效果。

下一篇：Swift版導(dǎo)航欄適配

PERFECT！

IOS項(xiàng)目新手引導(dǎo)頁圖片適配方案

基本上每個(gè)IOS APP都會(huì)有新手引導(dǎo)頁面這個(gè)功能，常規(guī)的就是幾張靜態(tài)圖片，可以左右滾動(dòng)。既然涉及到圖片，就肯定會(huì)存在適配的問題（為了達(dá)到最優(yōu)的體驗(yàn)效果，一般都會(huì)針對不同的分辨率設(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è)備上使用對應(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對于的文件夾為AppIcon.appiconset、LaunchImage.launchimage，我們自己創(chuàng)建的圖片集合avatar對應(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)圖片了：

親測：不同分辨率的設(shè)備，展示對應(yīng)的圖片。

我們注意到，show.imageset文件夾中有一個(gè)文件Contents.json，正是這個(gè)文件，ios系統(tǒng)才能根據(jù)設(shè)備類型展示對應(yīng)的圖片資源。Contents.json文件內(nèi)容如下：

系統(tǒng)展示圖片的時(shí)候，會(huì)先解析這個(gè)文件，然后根據(jù)設(shè)備的分辨率，找到對應(yīng)的圖片。

iOS開發(fā)技巧（OC版）:關(guān)于iOS11適配的一些坑

在iOS11以前, 自定義UIViewController時(shí), 從來沒有考慮過topLayoutGuide和bottomLayoutGuide這兩個(gè)屬性.但是在iOS11出來之后,這兩個(gè)屬性被廢棄,取而代之的就是safeArea的概念，safeArea是描述你的視圖部分不被任何內(nèi)容遮擋的方法。 它提供兩種方式：safeAreaInsets或safeAreaLayoutGuide來提供給你safeArea的參照值，即 insets 或者 layout guide。 safeArea區(qū)域如圖所示:

在除了iPhone X以外的型號手機(jī)上, UINavigationController 就是 topLayoutGuide區(qū)域. UITabBarController就是bottomLayoutGuide.但是這兩個(gè)屬性在iOS11已經(jīng)被取代了. 取而代之的就是safeArea區(qū)域(iPhone X圖區(qū)域4部分)

當(dāng)我們自定義一個(gè)UIViewController, 內(nèi)部嵌套了UINavigationController 或者UITabBarController的時(shí)候. 運(yùn)行程序會(huì)出現(xiàn)以下錯(cuò)誤:

原因是少了:

具體是為什么,沒有細(xì)研究.不過解決辦法如下:

因?yàn)槲沂莿?chuàng)建的空項(xiàng)目所以只有LaunchScreen.storyboard..如果你的項(xiàng)目里還有Main.storyboard,那么 你需要把第四個(gè)勾勾也去掉.

區(qū)域一: 高度30

區(qū)域二:高度14

區(qū)域三:高度44

區(qū)域五:高度49

區(qū)域六:高度14

區(qū)域七:高度20

更新iOS11以后, UITabBarController上的圖標(biāo)文字由原來的垂直放置, 變成水平放置

iPhone X 橫豎屏在尺寸上有很多細(xì)微的差別.

我們打印UINavigationController ?navigationBar的時(shí)候發(fā)現(xiàn)他的高度為44.也就是上圖綠色區(qū)域.但是在實(shí)際顯示的時(shí)候確實(shí)紅色區(qū)域,高度為32.整個(gè)高度向上12.也就是藍(lán)色區(qū)域.

我們打印UITabBarController? tabBar的時(shí)候發(fā)現(xiàn)他的高度為32,就是橘色區(qū)域,紅色區(qū)域?yàn)楣δ軈^(qū),高度為21.我們是何止tabBar顏色的時(shí),包括橘色區(qū)和紅色區(qū).

待更新

解決方案: 準(zhǔn)備一張尺寸:1125 * 2436的啟動(dòng)圖片,? 添加到Assret中

解決方案: 通過改變按鈕的 contentEdgeInsets和imageEdgeInsets的值成功改變了按鈕的偏移問題，單獨(dú)設(shè)置contentEdgeInsets也可達(dá)到一定的效果。

解決方案:iOS11棄用了automaticallyAdjustsScrollViewInsets屬性，新增contentInsetAdjustmentBehavior來替代它

- (void)createView:(BOOL)useForRendering showRightAway:(BOOL)showRightAway;

{

if(_view == nil)

{

? ? NSString *deviceVersion = [self getDeviceVersion];

? ? if ([deviceVersion isEqualToString:@"iPhone10,3"] || [deviceVersion isEqualToString:@"iPhone10,6"])

? ? {

? ? ? ? CGRect bounds = CGRectMake(34, 0, 744, 375);

? ? ? ? _window? = [[UIWindow alloc] initWithFrame:bounds];

? ? }

? ? else

? ? {

? ? ? ? _window = [[UIWindow alloc] initWithFrame: _screen.bounds];

? ? }

? _window.screen = _screen;

? if(_screen == [UIScreen mainScreen])

? ? {

? ? ? ?_view = [[GetAppController() init] unityView];

? ? ? ? NSAssert([_view isKindOfClass:[UnityView class]], @"You MUST use UnityView subclass as unity view");

? ? }

? ? else

? ? {

? ? ? ? _view = [(useForRendering ? [UnityRenderingView alloc] : [UIView alloc]) initWithFrame: _screen.bounds];

? ? }

? _view.contentScaleFactor = UnityScreenScaleFactor(self.screen);

? ? [self updateScreenSize];

? if(showRightAway)

? ? {

? ? ? ? [_window addSubview:_view];

? ? ? ? [_window makeKeyAndVisible];

? ? }

}

}

- (NSString*)getDeviceVersion

{

struct utsname systemInfo;

uname(systemInfo);

NSString *deviceVersion = [NSString stringWithCString:systemInfo.machine encoding:NSUTF8StringEncoding];

NSLog(@"添加獲取手機(jī)型號方法 ++ %@", deviceVersion);

return deviceVersion;

}

- (void)updateScreenSize

{

CGSize layerSize? ? = _view.layer.bounds.size;

NSString *deviceVersion = [self getDeviceVersion];

if ([deviceVersion isEqualToString:@"iPhone10,3"] || [deviceVersion isEqualToString:@"iPhone10,6"])

{

? ? layerSize = CGSizeMake(744, 375);

}

CGFloat scale? ? ? = UnityScreenScaleFactor(_screen);

_screenSize = CGSizeMake(layerSize.width * scale, layerSize.height * scale);

}

當(dāng)前標(biāo)題：iOS開發(fā)之適配,安卓和ios適配
標(biāo)題URL：http://jinyejixie.com/article24/hopdce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站設(shè)計(jì)公司、全網(wǎng)營銷推廣、網(wǎng)站營銷、自適應(yīng)網(wǎng)站、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)