Android - Start page background image configuration (splash)

Author: opLW
for a long time did not write a blog, the end of the final exam in June, and entered the busy and full of autumn recruit stage of preparation. Since before the curtain to create a mind map, is now out of control, learn what should be a curtain remember?, And so ended the finishing move the autumn to share it.
Recently doing a App, App before starting to understand some knowledge of optimization, but simply set the background to transparent, this time to determine their own to make a start page, which does not step on a lot of pits, recorded here.

Arena rules first on the map

As picture shows the final results, because there is no art MM help cut plan, so only ** quality?.

Basics

• Need to understand the relevant knowledge to start optimizing online article about the start optimization is too much, there is not analyzed, the students do not understand their own valley song.
• Need to Know .9 format picture production here is not to mention, free to Google.

How to make it?

• .9 set the picture to the screen after windowBackground severely deformed. When new to start optimization, it can be learned by
  <item name="android:windowBackground">@drawable/bg_welcome</item>
  the .9 format picture as the background image of the start page, so full of joy to do a .9 picture format as above and adds to the App of stylethe the results are as follows:
  
  ? it is embarrassing display the contents of the screen severely deformed.

• Solution Google around to find a solution

  // style.xml文件
  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
   </style>
   ==1== //创建一个新的SplashTheme继承自AppTheme
   <style name="SplashTheme" parent="AppTheme">
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       <item name="android:windowBackground">@drawable/bg_welcome</item>
   </style>
  // AndroidManifest.xml文件
   <application
       //......
       android:theme="@style/AppTheme">
       <activity
           //...... 
   ==2==   android:theme="@style/SplashTheme">
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />
               <category android:name="android.intent.category.LAUNCHER" />
           </intent-filter>
       </activity>
       <activity
           android:name=".ui.LoginActivity"
           android:label="@string/app_name" />
       <activity
           android:name=".ui.DetailListActivity" />
   </application>
  // MainActivity.kt文件
   override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
  ==3== setTheme(R.style.AppTheme_NoActionBar)
        setContentView(R.layout.activity_main)
   }
  

  • 1 Create a new SplashThemeinherited fromAppTheme
  • 2 For the first start after the App open Activity, it will be themeset to contain .9 picture SplashTheme.
  • After the first two steps are set, open the App will be the first to see our .9 picture. But MainActivity background image will always be maintained, and we hope that after entering the operation page .9 picture disappears, so there will be a third step。
  • 3 在MainActivity.onCreate()方法内部将theme重新设置为没有背景图片的theme。记住setTheme方法应该在setContentView方法之前调用，因为setContentView会确定好背景。

• 优化操作

  • 如下图。制作.9图片时，将核心要显示的内容置于图片的中心，而四周使用透明的背景。
    再配合shape制作一张layer-list，具体代码如下

    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid
                android:color="#fff"/>
        </shape>
    </item>
    <item android:gravity="center">
        <nine-patch
            android:src="@drawable/bg_welcome"
            android:tileMode="disabled" />
    </item>
    </layer-list>
    

    最后将上面这个文件设为SplashTheme的windowBackground即可达到开头的效果。

• 开头效果对应的.9图片
  
  在适配不同分辨率时，绿色部分为可以拉伸的部分，而其他部分不会受影响。

新的认知

• 可能大部分人跟我一样认为.9图片很神奇，可以适配不同分辨率，其实不然。(真正可以随意拉伸，分辨率不受影响的是.svg图片)。那么.9图片有什么用呢？？？?

• 记住一点.9格式的图片相比于普通的图片的优点，就是它指明了在需要大规模拉伸的时候，被拉动变形的部分，某种程度上解决了拉伸带来的图片严重变形的问题。(注意这里对变形的定义是：图片要显示的部分发生比率上的变化，在上面图片中来说就是人物的腿部被拉长)

• 但是当把一张分辨率很低的.9图片置于分辨率很高的机型上时，依然会导致图片模糊，只是不会导致图片变形。所以即使是.9图片，为了适配不同分辨率的机型，依然需要制作不同分辨率的.9图片。

万水千山总是情，麻烦手下别留情。
如若讲得有不妥，文末留言告知我，
如若觉得还可以，收藏点赞要一起。
opLW原创七言律诗，转载请注明出处