1. 背景
基本上每個IOS APP都會有新手引導頁面這個功能,常規(guī)的就是幾張靜態(tài)圖片,可以左右滾動提陶。既然涉及到圖片行施,就肯定會存在適配的問題(為了達到最優(yōu)的體驗效果允坚,一般都會針對不同的分辨率設計不同尺寸的圖片),本文主要就是討論如何適配的問題蛾号。
2. 方案
2.1 方案一
根據(jù)屏幕分辨率的不同稠项,使用不同的圖片。
2.2 ?方案二
熟悉IOS開發(fā)的人都知道鲜结,每一個ios項目中展运,都有一個Assets.xcassets文件夾,用來管理項目中所有的圖片(AppIcon精刷、LaunchImage拗胜、其他業(yè)務圖片)。
從上面的截圖我們可以看到怒允,xcode提供了兩個內(nèi)置的類型AppIcon埂软、LaunchImage。我們只要提供正確尺寸的圖片纫事,ios系統(tǒng)就能在不同分辨率的設備上使用對應的圖片而無需我們自己指定勘畔;另外就是我們自己創(chuàng)建的(avatar)所灸,提供2x、3x這兩種類型的圖片即可(1x的設備現(xiàn)在基本上找不到了炫七,而且當前的ios系統(tǒng)也不支持1x的設備)爬立。那么問題來了,我們自己創(chuàng)建的圖片集合万哪,只有3個類型(1x侠驯、2x、3x)奕巍,并不能按照分辨率來設定吟策。再看一下上面的截圖,有一個“show”的圖片集合伍绳,形式如下:
咦踊挠!這個鬼東西是怎么搞出來的?我們先看看Assets.xcassets文件夾在硬盤上的組織形式:
從上圖我們可以看到冲杀,系統(tǒng)內(nèi)置的兩種類型AppIcon效床、LaunchImage對于的文件夾為AppIcon.appiconset、LaunchImage.launchimage权谁,我們自己創(chuàng)建的圖片集合avatar對應的文件夾為avatar.imageset剩檀。講到這里,你應該大概猜到了show這個圖片集合是怎么創(chuàng)建出來了吧旺芽?
1沪猴、先創(chuàng)建一個LaunchImage類型的圖片集合;
2采章、修改名稱(LaunchImage→show)
3运嗜、修改文件夾名稱(show.launchimage→show.imageset)
回到正題,在show這個圖片集合里面悯舟,我們就可以輕松的根據(jù)分辨率設置2x担租、3x類型的圖片。
現(xiàn)在我們可以按照下圖的方式使用新手引導圖片了:
親測:不同分辨率的設備抵怎,展示對應的圖片奋救。
3、原理
我們注意到反惕,show.imageset文件夾中有一個文件Contents.json尝艘,正是這個文件,ios系統(tǒng)才能根據(jù)設備類型展示對應的圖片資源姿染。Contents.json文件內(nèi)容如下:
系統(tǒng)展示圖片的時候背亥,會先解析這個文件,然后根據(jù)設備的分辨率,找到對應的圖片隘梨。