1. 程式人生 > >IOS專案新手引導頁圖片適配方案

IOS專案新手引導頁圖片適配方案

1. 背景

基本上每個IOS APP都會有新手引導頁面這個功能,常規的就是幾張靜態圖片,可以左右滾動。既然涉及到圖片,就肯定會存在適配的問題(為了達到最優的體驗效果,一般都會針對不同的解析度設計不同尺寸的圖片),本文主要就是討論如何適配的問題。

2. 方案

2.1 方案一

根據螢幕解析度的不同,使用不同的圖片。

2.2  方案二

熟悉IOS開發的人都知道,每一個ios專案中,都有一個Assets.xcassets資料夾,用來管理專案中所有的圖片(AppIcon、LaunchImage、其他業務圖片)。

從上面的截圖我們可以看到,xcode提供了兩個內建的型別AppIcon、LaunchImage。我們只要提供正確尺寸的圖片,ios系統就能在不同解析度的裝置上使用對應的圖片而無需我們自己指定;另外就是我們自己建立的(avatar),提供2x、3x這兩種型別的圖片即可(1x的裝置現在基本上找不到了,而且當前的ios系統也不支援1x的裝置)。那麼問題來了,我們自己建立的圖片集合,只有3個型別(1x、2x、3x),並不能按照解析度來設定。再看一下上面的截圖,有一個“show”的圖片集合,形式如下:

咦!這個鬼東西是怎麼搞出來的?我們先看看Assets.xcassets資料夾在硬碟上的組織形式:

從上圖我們可以看到,系統內建的兩種型別AppIcon、LaunchImage對於的資料夾為AppIcon.appiconset、LaunchImage.launchimage,我們自己建立的圖片集合avatar對應的資料夾為avatar.imageset。講到這裡,你應該大概猜到了show這個圖片集合是怎麼創建出來了吧?

1、先建立一個LaunchImage型別的圖片集合;

2、修改名稱(LaunchImage→show)

3、修改資料夾名稱(show.launchimage→show.imageset)

回到正題,在show這個圖片集合裡面,我們就可以輕鬆的根據解析度設定2x、3x型別的圖片。

現在我們可以按照下圖的方式使用新手引導圖片了:

親測:不同解析度的裝置,展示對應的圖片。

3、原理

我們注意到,show.imageset資料夾中有一個檔案Contents.json,正是這個檔案,ios系統才能根據裝置型別展示對應的圖片資源。Contents.json檔案內容如下:

系統展示圖片的時候,會先解析這個檔案,然後根據裝置的解析度,找到對應的圖片。

作者:amdops 連結:http://www.jianshu.com/p/6b379ce91d67 來源:簡書 著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。