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

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ù)設備的分辨率,找到對應的圖片隘梨。

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末程癌,一起剝皮案震驚了整個濱河市赢笨,隨后出現(xiàn)的幾起案子摹芙,更是在濱河造成了極大的恐慌仇冯,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,311評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件捻脖,死亡現(xiàn)場離奇詭異,居然都是意外死亡中鼠,警方通過查閱死者的電腦和手機可婶,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來援雇,“玉大人矛渴,你說我怎么就攤上這事”共” “怎么了具温?”我有些...
    開封第一講書人閱讀 152,671評論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長筐赔。 經(jīng)常有香客問我铣猩,道長,這世上最難降的妖魔是什么茴丰? 我笑而不...
    開封第一講書人閱讀 55,252評論 1 279
  • 正文 為了忘掉前任达皿,我火速辦了婚禮,結果婚禮上贿肩,老公的妹妹穿的比我還像新娘峦椰。我一直安慰自己,他們只是感情好汰规,可當我...
    茶點故事閱讀 64,253評論 5 371
  • 文/花漫 我一把揭開白布汤功。 她就那樣靜靜地躺著,像睡著了一般控轿。 火紅的嫁衣襯著肌膚如雪冤竹。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,031評論 1 285
  • 那天茬射,我揣著相機與錄音鹦蠕,去河邊找鬼。 笑死在抛,一個胖子當著我的面吹牛钟病,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 38,340評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼肠阱,長吁一口氣:“原來是場噩夢啊……” “哼票唆!你這毒婦竟也來了?” 一聲冷哼從身側響起屹徘,我...
    開封第一講書人閱讀 36,973評論 0 259
  • 序言:老撾萬榮一對情侶失蹤走趋,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后噪伊,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體簿煌,經(jīng)...
    沈念sama閱讀 43,466評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,937評論 2 323
  • 正文 我和宋清朗相戀三年鉴吹,在試婚紗的時候發(fā)現(xiàn)自己被綠了姨伟。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,039評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡豆励,死狀恐怖夺荒,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情良蒸,我是刑警寧澤技扼,帶...
    沈念sama閱讀 33,701評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站诚啃,受9級特大地震影響淮摔,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜始赎,卻給世界環(huán)境...
    茶點故事閱讀 39,254評論 3 307
  • 文/蒙蒙 一和橙、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧造垛,春花似錦魔招、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至杆逗,卻和暖如春乡翅,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背罪郊。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工蠕蚜, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人悔橄。 一個月前我還...
    沈念sama閱讀 45,497評論 2 354
  • 正文 我出身青樓靶累,卻偏偏與公主長得像腺毫,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子挣柬,可洞房花燭夜當晚...
    茶點故事閱讀 42,786評論 2 345

推薦閱讀更多精彩內(nèi)容