Ionic: Замена иконки приложения и заставки

Сейчас я расскажу как легко и просто заменить у приложения стандартную иконку и заставку на свои, и как настроить поведение заставки.


Иконка и сплешскрин (заставка)

Не секрет, что необходимо иметь несколько вариантов заставок и иконок внутри приложения. Разные размеры, разные положения (portrait и landscape) для разных устройств. Количество файлов будет очень большое. А уже если мы хотим снова что-то изменить, то надо снова переделывать все все все эти файлы.

Ionic дает нам очень удобный инструмент, помощью которого можно сгенерировать сразу нужное количество иконок и заставок для разных размеров и ращрешений устройств. Вот эта волешбная команда:

ionic cordova resources

Как ей пользоваться? Необходимо сделать (или заменить существующие) эталонные файлы в папке resources/ вашего приложения:

После чего выполнить команду выше. Ionic сам нарежет нужные файлы, распихает куда надо (а именно в resources/android/, resources/ios/, resources/windows/) и обновит config.xml.

Генерация картинок.

Вот и все. Можно смело компилировать приложение и оно будет уже с новой заставкой и иконкой.


Тюнинг времени отображения заставки

По умолчанию, при загрузке приложения, Ionic сразу подгружает все ваши модули (страницы), и это может занять некоторое время. Когда-нибудь я расскажку про Lazy Loading модулей, но не в рамках данной заметки.

Регулировать время отображения заставки можно в файле config.xml. За это отвечают следующие директивы:

<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<platform name="android">
    <preference name="ShowSplashScreenSpinner" value="false" />
</platform>

Что есть что:

name value
SplashMaintainAspectRatio Автоматически подгонять заставку под размеры экрана. Заставка может быть искажена.
FadeSplashScreenDuration Скорость плавного исчезания заставки после SplashScreenDelay в миллисекундах
SplashShowOnlyFirstTime Показывать заставку только один раз. Когда мы именно запускаем приложение а не вытаскиваем его из бекграунда.
SplashScreen Название ресурса, которое использоваться для заставки. Практически всегда будет screen
SplashScreenDelay Сколько по времени показывается заставка в миллисекундах
ShowSplashScreenSpinner Показывать анимационный лоадер поверх заставки для Android устройств
AutoHideSplashScreen Автоматически скрывать заставку после того, как сработает SplashScreenDelay

Все это надо прописывать в ветке <widget> ... </widget>:

Расположение директив в config.xml.

Если необходимо, чтобы заставка исчезла только после полной загрузки приложения, то необходимо указать директиву AutoHideSplashScreen и ShowSplashScreenSpinner поставить как false. Таким образом в файле src/app/app.compontent.ts сработает следующий код:

initializeApp() {
	this.platform.ready().then(() => {
		StatusBar.styleDefault();
		Splashscreen.hide(); // Этот вызов закроет заставку
	});
}

Вот так можно настроить отображение и поведение приложения в момент его загрузки. Как нибудь в будущем, я расскажу, как сделать анимационную заставку для приложения.