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

基本上每個IOS APP都會有新手引導(dǎo)頁面這個功能，常規(guī)的就是幾張靜態(tài)圖片，可以左右滾動。既然涉及到圖片，就肯定會存在適配的問題（為了達(dá)到最優(yōu)的體驗效果，一般都會針對不同的分辨率設(shè)計不同尺寸的圖片），本文主要就是討論如何適配的問題。

洪湖網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項目制作，到程序開發(fā)，運營維護(hù)。創(chuàng)新互聯(lián)公司于2013年開始到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。

2.1 方案一

根據(jù)屏幕分辨率的不同，使用不同的圖片。

2.2 ?方案二

熟悉IOS開發(fā)的人都知道，每一個ios項目中，都有一個Assets.xcassets文件夾，用來管理項目中所有的圖片（AppIcon、LaunchImage、其他業(yè)務(wù)圖片）。

從上面的截圖我們可以看到，xcode提供了兩個內(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個類型（1x、2x、3x），并不能按照分辨率來設(shè)定。再看一下上面的截圖，有一個“show”的圖片集合，形式如下：

咦！這個鬼東西是怎么搞出來的？我們先看看Assets.xcassets文件夾在硬盤上的組織形式：

從上圖我們可以看到，系統(tǒng)內(nèi)置的兩種類型AppIcon、LaunchImage對于的文件夾為AppIcon.appiconset、LaunchImage.launchimage，我們自己創(chuàng)建的圖片集合avatar對應(yīng)的文件夾為avatar.imageset。講到這里，你應(yīng)該大概猜到了show這個圖片集合是怎么創(chuàng)建出來了吧？

1、先創(chuàng)建一個LaunchImage類型的圖片集合；

2、修改名稱（LaunchImage→show）

3、修改文件夾名稱(show.launchimage→show.imageset)

回到正題，在show這個圖片集合里面，我們就可以輕松的根據(jù)分辨率設(shè)置2x、3x類型的圖片。

現(xiàn)在我們可以按照下圖的方式使用新手引導(dǎo)圖片了：

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

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

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

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

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

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

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

根據(jù)勾股定理

計算結(jié)果稍有出入,這是因為像素的離散采樣有鋸齒效應(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個Point被渲染成1個2x2的像素矩陣)。

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

為了自動適應(yīng)分辨率,系統(tǒng)會根據(jù)設(shè)備實際分辨率,自動給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時代,我們?yōu)橐粋€應(yīng)用提供圖標(biāo)(或按鈕提供貼圖),只需要icon.png。針對現(xiàn)在的iPhone4~6 Retina顯示屏,需要制作額外的@2x高分辨率版本。

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

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

1

該方法使用系統(tǒng)緩存,適合表視圖重復(fù)加載圖像的情形。同時該API根據(jù)UIScreen的scale,自動查找包含對應(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)屏? 的影響,按照實際屏幕方向(UIDevice ?Orientation)的寬高

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

待續(xù)

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)航條的上邊緣)時要使用的導(dǎo)航條的外觀屬性。如果沒有設(shè)置，將使用修改后的standardAppearance

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

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

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

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

PERFECT！