安卓应用启动页布局如何高效实现?

本文主要说明启动页布局如何快速定义和遇到的问题

场景分析

最近工作上做首页启动页,遇到了几个要核心解决的问题。

  • 启动页充满整个屏幕的,如何按固定横纵比例保持比例拉伸。
  • 如何去适配所有的新老机型系统版本。
  • 所有的UI都要在drawable中完成,有人可能会想到直接可以放在布局文件当中,但是这样有一个问题就是在启动的时候会黑屏的延时,主要原因也是因为应用启动是需要占用一定的时长。

对应的解决方案是如下

  • 整个内容分为前景和背景,背景按屏幕比例自动拉伸,前进需要固定位置固定大小
  • 这个遇到了个坑后面单独讲。
  • 使用drawable layer-list来实现

实现

实现的原理就是通过给activity配置drawable 的windowBackground

目标效果

c3eabc63d9bb58eeb5940fe952d72765

配置drawable

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:gravity="fill">
        <bitmap
            android:gravity="fill"
            android:src="@drawable/bg_flash_new" />
    </item>

    <item android:gravity="fill_horizontal|top">
        <bitmap
            android:gravity="fill_horizontal|top"
            android:src="@drawable/fg_flash_top" />

    </item>

    <item android:gravity="center_horizontal|bottom"
        android:bottom="150dp">
        <bitmap
            android:gravity="center_horizontal|bottom"
            android:src="@drawable/fg_flash_notta" />
    </item>

    <item android:gravity="center_horizontal|bottom"
        android:bottom="54dp">
        <bitmap
            android:gravity="center_horizontal|bottom"
            android:src="@drawable/fg_flash_huawei" />
    </item>

</layer-list>

定义style

<style name="Splash" parent="AppTheme">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowBackground">@drawable/splash_huawei</item>
</style>

应用主题

<activity
    android:name=".ui.home.FlashActivity"
    android:screenOrientation="portrait"
    android:windowSoftInputMode="stateHidden"
    android:theme="@style/Splash">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />

        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

适配问题

本次遇到的适配问题是在5.1版本上面,有些布局属性不生效的问题。后面通过属性配置解决了此问题。
285af7122aced077117c377ab88678f7

解决的方式通过右边的配置
c2a6ecaf2f10c552ee91e5a27595c4d2

猜你喜欢

转载自blog.csdn.net/wsx1048/article/details/108688985