Now that you know the basics of building and uploading an app, let's customize it a bit by adding a splash screen. We will be using TiCon to make new splash and icon images. Upload your images with the suggested sizes to the site and generate new images for your app.
Download the images and add them to your project under a new res/ios folder. The folder structure of your app should now look like the structure below.
├── config.xml ├── hooks │ └── README.md ├── platforms │ └── platforms.json ├── plugins ├── res │ └── ios │ ├── [email protected] │ ├── [email protected] │ ├── [email protected] │ ├── Default-Landscape.png │ ├── [email protected] │ ├── [email protected] │ ├── Default-Portrait.png │ ├── [email protected] │ ├── Default.png │ ├── [email protected] │ ├── appicon-60.png │ ├── [email protected] │ ├── [email protected] │ ├── appicon-72.png │ ├── [email protected] │ ├── appicon-76.png │ ├── [email protected] │ ├── appicon-Small-40.png │ ├── [email protected] │ ├── appicon-Small-50.png │ ├── [email protected] │ ├── appicon-Small.png │ ├── [email protected] │ ├── [email protected] │ ├── appicon.png │ ├── [email protected] │ ├── iTunesArtwork │ └── [email protected] └── www ├── css │ └── index.css ├── img │ └── logo.png ├── index.html └── js └── index.js 9 directories, 35 files
Modifying the config.xml
Next, you will need to add the locations of your images to the config.xml found in your app. The file should look like this after you have finished.
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.weather" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Weather</name>
<description>
A simple weather app.
</description>
<author email="[email protected]" href="http://cordova.io">
Todd Treece
</author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" version="1.0.0" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<icon src="res/ios/[email protected]" width="180" height="180" />
<icon src="res/ios/appicon-60.png" width="60" height="60" />
<icon src="res/ios/[email protected]" width="120" height="120" />
<icon src="res/ios/appicon-76.png" width="76" height="76" />
<icon src="res/ios/[email protected]" width="152" height="152" />
<icon src="res/ios/appicon-Small-40.png" width="40" height="40" />
<icon src="res/ios/[email protected]" width="80" height="80" />
<icon src="res/ios/[email protected]" width="120" height="120" />
<icon src="res/ios/appicon.png" width="57" height="57" />
<icon src="res/ios/[email protected]" width="114" height="114" />
<icon src="res/ios/appicon-72.png" width="72" height="72" />
<icon src="res/ios/[email protected]" width="144" height="144" />
<icon src="res/ios/appicon-Small.png" width="29" height="29" />
<icon src="res/ios/[email protected]" width="58" height="58" />
<icon src="res/ios/[email protected]" wdth="87" height="87" />
<icon src="res/ios/appicon-Small-50.png" width="50" height="50" />
<icon src="res/ios/[email protected]" width="100" height="100" />
<splash src="res/ios/Default.png" width="320" height="480"/>
<splash src="res/ios/[email protected]" width="640" height="960"/>
<splash src="res/ios/Default-Portrait.png" width="768" height="1024"/>
<splash src="res/ios/[email protected]" width="1536" height="2048"/>
<splash src="res/ios/Default-Landscape.png" width="1024" height="768"/>
<splash src="res/ios/[email protected]" width="2048" height="1334"/>
<splash src="res/ios/[email protected]" width="640" height="1136"/>
<splash src="res/ios/[email protected]" width="640" height="1136"/>
<splash src="res/ios/[email protected]" width="750" height="1242"/>
<splash src="res/ios/[email protected]" width="1242" height="2208"/>
<splash src="res/ios/640x1136.png" width="640" height="1136"/>
</platform>
</widget>
After modifying the config, you will need to rebuild the app by running the following command.
cordova build
Now if you upload the app to a device or test it in the simulator, you will see the new icon and splash image.
That's it! We will be exploring interating with hardware from iOS in future tutorials, so stay tuned!
