iT邦幫忙

2023 iThome 鐵人賽

DAY 28
0
Mobile Development

30天React Native之旅:從入門到活用系列 第 28

Day 28:APP 圖標和啟動圖設定

  • 分享至 

  • xImage
  •  

在APP進行最後的發布前,我們需要為APP設定合適的ICON和啟動圖。
APP ICON是代表你的產品的圖示。而啟動圖是APP啟動時展示的短暫圖片,為應用的啟動過程提供了一個順暢的過渡。

APP圖標 Android設置流程

  • 使用Android Studio來產生和設定圖示
    你可以自己依照圖片尺寸自己將它們放到對應的res/mipmap資料夾,也可以用Android Studio自動產生,這裡介紹如何用Android Studio產生。

    1. 啟動Android Studio,打開你的項目。
    2. 左上方切換到Android,右鍵點擊res資料夾(通常在app/src/main/res)。選擇New -> Image Asset。
      https://ithelp.ithome.com.tw/upload/images/20231013/201033658pNSoLJUBj.png
    3. 在 Configure Image Asset 視窗中:
      Asset type 部分,選擇你的圖標來源:
      • Image: 如果你想使用自己的圖片作為圖標,選擇這個。
      • Clip Art: 從Android Studio內置的圖標庫中選擇一個圖標。
      • Text: 使用文字作為圖標。
        設定你的圖標名稱、解析度和其他選項。
        在預覽部分,你可以看到你的圖標在不同的解析度和形狀下的效果。
        https://ithelp.ithome.com.tw/upload/images/20231013/20103365wBatV8nOG1.png
    4. 完成後,Android Studio將自動生成多種解析度的圖標,並放在相應的mipmap或drawable資料夾。
  • 確定設置正確
    AndroidManifest.xml找到以下設定,確認圖標有設置正確

    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    

    這裡會指定APP的圖標為ic_launcher(傳統的矩形或方形圖標)和ic_launcher_round(用於支援圓形圖標的裝置)。

APP圖標 iOS設置流程

  • 在Xcode的左側導覽列中,找到Images。

  • 點擊Images,你應該會看到一個名為AppIcon的項目,

  • 點擊AppIcon,然後就會看到各種尺寸的圖片槽位。我們要填滿所有尺寸。
    https://ithelp.ithome.com.tw/upload/images/20231013/20103365PdVHQ9C11H.png

    圖片尺寸很多種,一一修改大小滿麻煩的,如果沒有設計師幫你出好各種尺寸的圖,可以用一些線上工具來產生各種尺寸的圖,例如App Icon Maker

Android 啟動圖設定

  • res/drawable放置你的啟動圖片。
  • 打開res/values/styles.xml設置啟動圖,例如:
     <style name="LaunchTheme" parent="Theme.AppCompat.NoActionBar">
      <item name="android:windowBackground">@drawable/launch_screen</item>
     </style>
    

iOS 啟動圖設定

  • 在Xcode的左側導覽列中,找到Images。
  • 點擊Images,在右邊AppIcon那裡空白處點擊右鍵。
    https://ithelp.ithome.com.tw/upload/images/20231013/20103365pabV2xCd5D.png
  • 找到 New iOS Launch Image
  • 然後就會看到和AppIcon一樣各種尺寸的圖片槽位,填滿它

你會發現New iOS Launch Image後面顯示 deprecated,這是因為現在新版建議的做法是用LaunchScreen.storyboard,具體做法:

  • XCode左側導覽點擊右鍵,選擇New File
    https://ithelp.ithome.com.tw/upload/images/20231013/201033657qdnx3jGpt.png
  • 選擇Launch Screen
    https://ithelp.ithome.com.tw/upload/images/20231013/201033658cBj9v3uuy.png
  • 配置好圖片後,TARGETS -> General,找到Launch Screen File,選擇你剛剛的啟動圖
    https://ithelp.ithome.com.tw/upload/images/20231013/20103365z4ncDxPbu0.png

上一篇
Day 27:CodePush - 實現React Native APP的即時更新
下一篇
Day 29:iOS 與 Android 的發布
系列文
30天React Native之旅:從入門到活用30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言