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

Source: Internet
Author: User

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)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.