[Go] easy to learn ionic (iv) Modify the app icon and add splash screen (update official command line tool automatically generated)

This article transferred from: http://blog.csdn.net/zapzqc/article/details/42237935

since Ionic updated the command-line tool, it is easy to modify the app icon and add splash screen later, the newest method is at the bottom:app icon: 

1. Create the Res folder under the entire project folder, and create two folders, Android and iOS, respectively.

 2. For Android platform: Place our boot icon to be replaced under the Android folder. They can be named: Mdpi.png (48*48),hdpi (72*72), xhdpi (96*96), xxhdpi (144*144), and Xxxhdpii (192*192). for iOS, you want to add.  3. Add the

 <platform name="android">
              <icon src="res/android/ldpi.png" density="ldpi" />
              <icon src="res/android/mdpi.png" density="mdpi" />
              <icon src="res/android/hdpi.png" density="hdpi" />
              <icon src="res/android/xhdpi.png" density="xhdpi" />
 </platform>

Where the picture path in SRC is the relative path to the entire project.

Here, by the way, if you want to modify the name of the app, just modify the contents of the name tag.

Then rerun Ionic run Android on the command line to see that the app icon and name have been replaced.

Start Screen:

 Copy the image of the splash screen to the previous Android folder, Splash-land-hdpi.png (640*480) splash-land-ldpi.png (426x320) splash-land-mdpi.png (470x320) splash-land-xhdpi.png (960x720) splash-port-hdpi.png (480*640      

(The name can be arbitrary, as long as it corresponds to CONFIG.

    Add in CONFIG.

   <splash src= "Res/screen/android/splash-land-hdpi.png" density= "land-hdpi"/> 
     <splash src= " Res/screen/android/splash-land-ldpi.png "density=" land-ldpi "/> 
     <splash src=" res/screen/ Android/splash-land-mdpi.png "density=" land-mdpi "/> 
     <splash src=" Res/screen/android/ Splash-land-xhdpi.png "density=" land-xhdpi "/> 
 
     <splash src=" Res/screen/android/ Splash-port-hdpi.png "density=" port-hdpi "/> 
     <splash src=" Res/screen/android/ Splash-port-ldpi.png "density=" port-ldpi "/> 
     <splash src=" Res/screen/android/ Splash-port-mdpi.png "density=" port-mdpi "/> 
     <splash src=" Res/screen/android/ Splash-port-xhdpi.png "density=" port-xhdpi "/>  

    <preference name= "SplashScreen" value= "screen"/>

    <preference name= "Splashscreendelay" value= "10000"/>

10000 units in milliseconds, that is, after 10 seconds to hide the splash screen. If you do not write the third sentence, the default is 3 seconds hidden.

   As shown in the following:

I do not have so many resolutions in the picture, just looking for a slightly larger resolution, density did not write. It will automatically copy the picture to the Drawable folder.

Then run the program again to see the splash screen.

With the above method, the Start screen display length is fixed, it is obviously not very friendly.

Not finish ...

The above methods can already be automatically generated using the Ionic command line tool, as follows: 1. Create the Resources folder under the project's root directory. 2. Put Icon.png (app icon, minimum 192x192px, no fillet) in the folder, Splash.png (splash screen, min 2208x2208px, middle area 1200x1200px) ( Can be PNG, PSD, AI) 3. In cmd, enter the folder where the project is executed: [HTML]View Plaincopy print?

1. Ionic Resources

Ionic Resources

After the command is executed, a folder of added platform names, such as Android, is automatically created under the Resources folder, which automatically scales, crops, and produces images of different resolutions and adds the content to config. can also be performed separately: [HTML]View Plaincopy print?

1. Ionic Resources--icon
2. Ionic Resources--splash

Ionic Resources--icon     Ionic Resources--splash

Note: Online is required to execute the above command!

[Go] easy to learn ionic (iv) Modify the app icon and add splash screen (update official command line tool automatically generated)