1. 程式人生 > >IOS App 的圖示和啟動圖的煩惱

IOS App 的圖示和啟動圖的煩惱

前言:

      好多iOS App的開發者都會面臨的一個問題,那就是 App 的圖示(icon) 和啟動圖(launch images) 。 一些沒有經驗(指的是沒做過App審計的)的UI設計師,不知道該怎麼做。他就會問開發者。這個時候就是你展示的時候,其實網上一搜索一大堆都是的,也沒什麼裝的。

第一:App的圖示。

1、圖示的大小。(圓角和直角)

   

直角的,蘋果系統會在顯示的時候會裁成圓角。各iPhone的圖示大小列表:


有的設計是用px的大小,其實正確的設定是pt。px設計不是不可以,也可以用。

2、pt 和px 的區別。

pt 是point 的縮寫,但它不是點。它是一個長度單位 。1pt = 1/72英寸。

px是pixel的縮寫,是畫素。它是螢幕上顯示資料最基本的點。

所以,pt 和px 是不同的。

第二:啟動圖(Launch images)。

1、第一種新增

我們點選工程裡面的Assets.xcassets目錄,然後在第二列(就是Appiicon所在處)空白處,滑鼠右鍵選擇 New image Set 建立如圖介面。


我們觀察上圖的最右面。系統預設為我們選擇的是 all 型別是Universal(通用)。我們這裡只要適配iPhone就可以。所以,把按鈕切換到iOS iphone 上。如下圖:


我們看上圖, 1x、2x、3x 有三個圖片。我們點選也沒有尺寸提示。我做個分析。就三個框,並且我們要死配全部手機,我們要怎麼做?我是這麼做的,不知道是否正確,但是可以滿足需求,效果非常的好:第一、我要UI 給我四張圖。(為啥4張?不是有三個框嗎?)第二:4張圖的大小尺寸:(命名為Default-568.png)640 * 960 px、(1x)640 * 1136 px、(2x)750 * 1334 px  、(3x)1080 * 1920 px。這四張圖。 其中,(命名為Default-568.png)640 * 960 px是適配iPhone4系列的手機。

然後,我們將做好的圖片拖進框裡面如下圖:


緊接著,我們在點選 LaunchScreen.storyboard 目錄,並向故事版拖進去一個UIImageView 的物件,並把它設定好適配全部手機尺寸。然後我們將工程切換到如下圖介面:


然後,我們看到上圖,最右邊下面的圖片,我們將圖片,拖進imageview裡面就可以了。拖進去的結果如下圖:


然後,我們也把另一個Default-568的圖片匯入到工程裡面。我們看著圖片已經變形了,不要緊張。變形是不然的,我們在設定一下就可以了。如下圖:


不用擔心,App啟動的時候,會有白邊。然後,我們還要設定一個地方。如下圖:


我們啟動,發現啟動頁面好快,有好多都不喜歡快。我們就讓他變動緩慢一點。在Appdelegate中新增如下:[NSThread

 sleepForTimeInterval:2];

效果如下:

2、第二種新增。

我們點選工程裡面的Assets.xcassets目錄,然後在第二列(就是Appiicon所在處)空白處,滑鼠右鍵選擇 APPicons&Launchimages 下的New iOSlaunchimages  建立如圖介面。



建立效果如下:
我們看到,所有裝置的啟動圖都出來了。可是我們只要適配iPhone就可以。我們在最右邊,在進行設定來滿足我們的需求,如下圖:
我們看到上面圖片,一共需要7個圖片。其實是5張圖。這五張圖的大小如下:320 * 480 px 、640 * 960 px、960 * 1136 px、750 * 1334 px 、1242 * 2208 px。將圖片拖入框內 如下圖:
我們還要設定一個地方,如下圖:
如果我們測試發現iphone4 模擬器上的時候,圖片左右,有兩個很寬的白邊,這個白邊的效果解決的方法是:將其中的啟動圖 640 * 960 的啟動圖命名為 default-568.png就可以了。 最後我們的啟動效果是:


問題補充:如何去除icon高光?是不是xcode的bug?

答:這不是xcode的Bug。Xcode 在預設的情況下,是為你的AppIcon設定高光效果,如果你不想有高光效果。你可以按下圖設定,就可以去掉Icon 的高光效果。


測試工程的下載: