How to modify the icon when ionic adds the ios platform

Since Ionic has updated the command line tool, it will be simple to modify the application icon and add a startup screen in the future. The latest method is shown at the bottom:

Application icon:

1. Create a res folder under the folder where the entire project is located, and create two folders android and ios inside.

2. For the Android platform: Place the startup icon we want to replace under the android folder. They can be named respectively: mdpi.png(48*48), hdpi(72*72), xhdpi(96*96), xxhdpi(144*144) and xxxhdpiI(192*192).

For ios, to be added.

3. Add

lt; platform name="android"gt;

lt; icon src="res/android/ldpi .png" density="ldpi" /gt;

lt;icon src="res/android/mdpi.png" density="mdpi" /gt;

lt;icon src="res/android/hdpi.png" density="hdpi" /gt;

lt;icon src="res/android/xhdpi.png" density="xhdpi" /gt;

lt; p>

lt;/platformgt;

The image path in src is the relative path of the entire project.

I was lazy here and only put in an application icon with the highest pixel density (192px*192px). Android will automatically compress it.

By the way, if you want to modify the name of the application, just modify the content in the name tag.

If you rerun ionic run android in the command line, you will see that the application icon and name have been replaced.

Splash screen:

Copy the picture of the splash screen to the previous android folder, splash-land-hdpi.png (640*480) splash-land-ldpi.png (426 × 320) splash-land-mdpi.png (470 × 320) splash-land-xhdpi.png (960 × 720) splash-port-hdpi.png (480*640) splash-port-ldpi.png (320 *426) splash-port-mdpi.png (320*470) splash-port-xhdpi.png (720*960)

(The name can be arbitrary, as long as it corresponds to config.xml).

Add

lt; splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/gt;

lt; splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/gt;

lt; splash src=" res/screen/android/splash-land-mdpi.png" density="land-mdpi"/gt；

lt；splash src="res/screen/android/splash-land-xhdpi.png " density="land-xhdpi"/gt;

lt; splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/gt;

lt; splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/gt;

lt; splash src="res/ screen/android/splash-port-mdpi.png" density="port-mdpi"/gt；

lt；splash src="res/screen/android/splash-port-xhdpi.png" density ="port-xhdpi"/gt;

lt; preference name="SplashScreen" value="screen"/gt;

lt; preference name="SplashScreenDelay" value=" 10000" /gt;

The unit of 10000 is milliseconds, that is, the startup screen will be hidden after 10 seconds. If you do not write the third sentence, it will be hidden for 3 seconds by default.

As shown in the picture below:

I don’t have that many pictures with resolutions here, so I just randomly found one with a slightly larger resolution, and didn’t write density. It will automatically copy the image to the drawable folder.

At this time, re-run the program and you will see the startup screen.

Using the above method, the display duration of the startup screen is fixed, which is obviously not very friendly.

To be continued...

The above method can be automatically generated using the Ionic command line tool. The steps are as follows:

1. In the root directory of the project Create resources folder under.

2. Put icon.png (application icon, minimum 192x192px, without rounded corners) and splash.png (startup screen, minimum 2208x2208px, middle area 1200x1200px) in the folder (can be png , psd, ai)

3. Enter the folder where the project is located in cmd and execute:

ionic resources

After executing this command, the resources file will be automatically Create a folder with the added platform name under the folder, such as android, in which the images will be automatically scaled and cropped to generate images of different resolutions, and corresponding content will be added to config.xml.

It can also be executed separately:

ionic resources --icon

ionic resources --splash

Note: When executing the above command, Online!