Splash Screen и иконки рабочего стола

Содержание

Splash Screen входная дверь в приложение. Пока данные не загрузились, мы имеем счастье наблюдать красивую заставку. И сегодня будем её создавать. Заодно добавим значок приложения на рабочий стол. В основном трудности вызывает позиционирование изображения по центру для всех типов устройств, так что займёмся именно этим.

iOS

В Xcode зайти в Имя_проекта -> Images.xassets -> AppIcon. Сгенерировать иконки указанных там размеров и перетащить какждую на своё место. Теперь соответствующая размеру устройства иконка будет отображаться на его рабочем столе. После пересборки проекта, конечно. AppIcon

Создать новый сет: правый клик на AppIcon, пункт New image set. Назвать его можно AppLaunch это картинки для нашего экрана загрузки. New image set

Аналогичным образом генерируем и перетаскиваем картинки. AppLaunch

Убеждаемся, что в настройках выбран файл с именем, соответствующем имени сета.

launch screen file

Дальше нам понадобится LaunchScreen.xib (или LaunchScreen.storyboard). Для добавления элементов можно использовать сочетание клавиш shift + cmd + l или добавлять элементы через пункт меню.

show library

Отобразится окно с элементами. Следующий шаг выбрать элемент изображения.

ImageView

В инспекторе задать атрибуты, а именно: выбрать нужное изображение и установить Content Mode со значением Aspect Fit. Несколькими шагами выше оно было добавлено в сет с названием AppLaunch. Выбранную картинку следует перетащить на нужный участок холста: примерно по центру. select image from the set

Если сейчас посмотреть превью устройства, вряд ли позиционирование картинки окажется идеальным. Если думаете, то всё в порядке, измените выбранный девайс на другой. Например, вместо iPhone 11, можно посмотреть iPhone 5 или iPad. На что нажать, чтобы увидеть превью, показано на скриншоте ниже. preview launch screen

Изменить тип устройства тоже не составит труда. select device for preview

Переходим на вкладку size inspector и выставляем чекбокс Safe Area Relative Margins + кликами мыши добавляем либо убираем стрелки у Autoresizing, чтобы получилось как на скриншоте.

Autoresizing

На этом всё. Можно протестировать центрирование картинки в превью или пересобрать проект и запустить на реальном устройстве.

Android

Сгенерировать иконки для Android (launcher icon) поможет Android Studio либо AndroidAssetStudio. Полученными картинками нужно заменить файлы по пути android/app/src/main/res. Названия аналогичны сгенерированным: mipmap-hdpi/ic_launcher.png, mipmap-mdpi/ic_launcher.png и прочая-прочая. Таким образом первая задача выполнена – иконкам на рабочем столе быть!

Переходим к splash screen. Структура должна быть следующей (если каких-то файлов нет создать):

android/app/src/main
├── AndroidManifest.xml
├── assets
├── java
└── res
    ├── drawable
    │   └── splash_screen.xml
    └── values
        ├── colors.xml
        └── styles.xml

Разбираемся с файлами.

Нам понадобится цветовая палитра:

<!-- android/app/src/main/res/values/colors.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="gray">#F2F2F2</color>
  <color name="red">#FA5B60</color>
</resources>

Описание заставки (цвет фона, картинка по центру):

<!-- android/app/src/main/res/drawable/splash_screen.xml -->
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@color/gray"/>
  <item>
    <bitmap android:src="@mipmap/splash_logo" android:gravity="center" />
  </item>
</layer-list>

Файл стилей:

<!-- android/app/src/main/res/values/styles.xml -->
<resources>
  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:textColor">#000000</item>
  </style>

  <style name="SplashTheme" parent="AppTheme">
    <item name="android:windowBackground">@drawable/splash_screen</item>
  </style>
</resources>

Манифест, здесь задаётся тема @style/SplashTheme и меняются имена иконок, если они отличаются от «умолчательных» ic_launcher, ic_launcher_round:

<!-- android/app/src/main/AndroidManifest.xml -->
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.bookshelf">
  <uses-permission android:name="android.permission.INTERNET" />

  <application
    android:name=".MainApplication"
    android:label="@string/app_name"
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:theme="@style/AppTheme">

    <activity android:name=".MainActivity" android:theme="@style/SplashTheme">
      <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
    </activity>

    <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
  </application>

</manifest>

И самое главное: всегда задавать цвет фона страниц для android. Заставка никуда не денется, не смотря на то, что приложение уже загрузилось. Её можно лишь перекрыть.

import React from 'react'
import { SafeAreaView, ScrollView, StyleSheet, View, Text } from 'react-native'

const App = () => {
  return (
    <SafeAreaView>
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        contentContainerStyle={styles.scrollView}>
        <View>
          <Text>First Screen</Text>
        </View>
      </ScrollView>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: 'white',
    flexGrow: 1,
    minHeight: '100%',
  },
})

export default App