简书链接:【原创】闪屏优化之2张图片的摆放的win背景如何和闪屏页面的图片摆放一致
文章字数：724,阅读全文大约需要2分钟
首先把背景图单独拖动出一个窗口，发现进行修改，闪屏页面的布局也可以实时预览，把闪屏页面act的背景设置透明，
总之做这件事就是不想切图，就一张logo一张banner， 闪屏页就是这么做的，现在我要用window背景也没代替闪屏页，闪屏页直接透明， 实现 闪屏和白屏背景是同样的位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<style name="Animation_No">
    <item name="android:activityOpenEnterAnimation">@null</item>
    <item name="android:activityOpenExitAnimation">@null</item>
    <item name="android:activityCloseEnterAnimation">@null</item>
    <item name="android:activityCloseExitAnimation">@null</item>
    <item name="android:taskOpenEnterAnimation">@null</item>
    <item name="android:taskOpenExitAnimation">@null</item>
    <item name="android:taskCloseEnterAnimation">@null</item>
    <item name="android:taskCloseExitAnimation">@null</item>
    <item name="android:taskToFrontEnterAnimation">@null</item>
    <item name="android:taskToFrontExitAnimation">@null</item>
    <item name="android:taskToBackEnterAnimation">@null</item>
    <item name="android:taskToBackExitAnimation">@null</item>
</style>

<style name="Theme.Splash" parent="Theme.MyApplication.Fullscreen">
    <item name="android:windowBackground">@drawable/drawable_splash</item>
    <item name="android:windowAnimationStyle">@style/Animation_No</item>
</style>

drawable_splash

是2个logo一个是纯logo一个是水平banner logo

设置splash界面的logo透明度为0.1 放大进行比较

image.png

闪屏页背景

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
     <androidx.constraintlayout.widget.ConstraintLayout

         tools:context="com.sotrun.act.SplashActivity"
         android:theme="@style/ThemeOverlay.MyApplication.FullscreenContainerTranslate"

         xmlns:android="http://schemas.android.com/apk/res/android"
         xmlns:app="http://schemas.android.com/apk/res-auto"
         android:id="@+id/fullscreen_content"
         xmlns:tools="http://schemas.android.com/tools"
         android:layout_width="match_parent"
         android:layout_height="match_parent">

//-----------
    <style name="ThemeOverlay.MyApplication.FullscreenContainerTranslate" parent="">
        <item name="fullscreenBackgroundColor">@color/transparent</item>
        <item name="fullscreenTextColor">@color/themeColor</item>
    </style>

闪屏页之前的底部logo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<androidx.constraintlayout.widget.ConstraintLayout
           android:layout_width="match_parent"
           android:visibility="visible"
           android:alpha="0.1"
           android:background="@color/red"

           android:layout_marginBottom="15dp"
           android:layout_height="wrap_content">
           <ImageView
               app:layout_constraintBottom_toBottomOf="parent"
               app:layout_constraintLeft_toLeftOf="parent"
               app:layout_constraintRight_toRightOf="parent"
               android:src="@drawable/logo_banner"
               android:scaleType="centerInside"
               app:layout_constraintDimensionRatio="3.965:1"
               app:layout_constraintWidth_percent="0.5"
               android:layout_width="0dp"
               android:layout_height="0dp"
               />
       </androidx.constraintlayout.widget.ConstraintLayout>

闪屏window背景

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="@color/white" />
        </shape>
    </item>

    <item
        android:width="150dp"
        android:height="150dp"
        android:gravity="top|center_horizontal"
        android:top="80dp">
        <inset android:drawable="@drawable/sotrun" />
    </item>

    <item android:height="300dp" android:right="30dp" android:gravity="bottom" android:bottom="15dp" >
        <scale
            android:level="5"
            android:scaleGravity="center_horizontal|bottom"
            android:useIntrinsicSizeAsMinimum="false"
            android:scaleWidth="50%"
            android:scaleHeight="82.3%"
            android:drawable="@drawable/logo_banner"
            >
        </scale>


    </item>

</layer-list>

可以发现的是宽度和 闪屏页xml 定义的权重百分之50 是一样的，只是高度我是微调出来的可能会有拉伸。
这个图片实际尺寸是 1150x290 比例是3.965

最后发现运行后并不是那样的，所以最后我把图片变成了高宽一样，或者改成.9解决此问题。
改成大小一样之后

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<item android:height="600dp" android:width="600dp"  android:gravity="bottom|center_horizontal" android:bottom="15dp" >
    <scale
        android:level="5"
        android:scaleGravity="center_horizontal|bottom"
        android:useIntrinsicSizeAsMinimum="false"
        android:scaleWidth="50%"
        android:scaleHeight="50%"
        android:drawable="@drawable/logo_banner_squre"
        >
    </scale>


</item>

这里外层高宽改成一样就行。

最后状态栏隐藏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    <style name="Theme.Splash" parent="Theme.MyApplication.Fullscreen">
        <item name="android:windowBackground">@drawable/logo_splash</item>
        <!--将顶部状态栏设置为透明，并将界面内容布局上边界上提至状态栏顶部-->
<!--        <item name="android:windowTranslucentStatus">true</item>-->
        <item name="android:statusBarColor">@color/white_no_night</item>
        <!--如果有底部虚拟导航栏，则将底部虚拟导航栏设置为透明，并将界面内容布局下边界下沉至虚拟导航栏底部-->
        <item name="android:windowTranslucentNavigation">true</item>
        <item name="android:windowAnimationStyle">@style/Animation_No</item>
        <!-- 隐藏状态栏 -->
        <item name="android:windowFullscreen">true</item>
        <!-- 隐藏标题栏 -->
        <item name="android:windowNoTitle">true</item>
    </style>
    <style name="ThemeOverlay.MyApplication.FullscreenContainer" parent="">
        <item name="fullscreenBackgroundColor">@color/white</item>
        <item name="fullscreenTextColor">@color/themeColor</item>
    </style>


说重点了,其实上面的都有好多坑,最后是我解决了各种坑发现的最优解
其实我后面闪屏页,啥logo都没有了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout

    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/fullscreen_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:theme="@style/ThemeOverlay.MyApplication.FullscreenContainerTranslate"
    tools:context="com.sotrun.act.SplashActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintWidth_percent="0.6">


        <LinearLayout

            android:id="@+id/rl_block"
            android:layout_width="wrap_content"


            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"

            android:gravity="center"
            android:orientation="horizontal"
            android:visibility="visible"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent">

            <TextView

                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/loading"
                android:layout_centerHorizontal="true"
                android:alpha="0.9"
                android:text="@string/logining"
                android:textColor="@color/black"
                android:textSize="12sp" />

        </LinearLayout>

    </LinearLayout>


</androidx.constraintlayout.widget.ConstraintLayout>


直接透明,但是主题 很重要

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    <style name="Theme.Splash" parent="Theme.MyApplication.Fullscreen">
        <item name="android:windowBackground">@drawable/X_splash</item>
        <!--将顶部状态栏设置为透明，并将界面内容布局上边界上提至状态栏顶部-->
<!--        <item name="android:windowTranslucentStatus">true</item>-->
        <item name="android:statusBarColor">@color/white_no_night</item>
        <!--如果有底部虚拟导航栏，则将底部虚拟导航栏设置为透明，并将界面内容布局下边界下沉至虚拟导航栏底部-->
        <item name="android:windowTranslucentNavigation">true</item>
        <item name="android:windowAnimationStyle">@style/Animation_No</item>
        <!-- 隐藏状态栏 -->
        <item name="android:windowFullscreen">true</item>
        <!-- 隐藏标题栏 -->
        <item name="android:windowNoTitle">true</item>
    </style>

x_splash实际上是一个xml drawable

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="@color/white" />
        </shape>
    </item>

    <item
        android:width="150dp"
        android:height="150dp"
        android:gravity="top|center_horizontal"
        android:top="80dp">
        <inset android:drawable="@drawable/X" />
    </item>

    <item android:height="500dp" android:width="500dp"  android:gravity="bottom|center_horizontal" android:bottom="15dp" >
        <scale
            android:level="5"
            android:scaleGravity="center_horizontal|bottom"
            android:useIntrinsicSizeAsMinimum="false"
            android:scaleWidth="50%"
            android:scaleHeight="50%"
            android:drawable="@drawable/X_banner_squre"
            >
        </scale>


    </item>

</layer-list>

image.png