Android 独特的闪屏:如何让它填满屏幕? [英] Android unique splash screen : how to make it fill screen?

问题描述

我有一个独特的启动画面，叫做 splash.png，大小为 1280x1280, 150dpi我在 React Native 项目中使用了 react-native-bootsplash，但我认为这并不重要.

我的问题很简单:如何使我的启动画面在纵向模式下为全高，而不是小于，不大于，并保持其纵横比图片填满屏幕.就像 css 中的 background-size:cover 一样.或者像一个简单的 <Image resizeMode="cover";style={{ height: '100%' }}/> 在 React Native 中.

所以我有:

android/app/src/main/res/values/styles.xml

<!-- 基本应用程序主题.--><样式名称=应用主题"parent="Theme.AppCompat.Light.NoActionBar"><!-- 在此处自定义您的主题.--><item name="android:textColor">#000000</item></风格><!-- BootTheme 应该继承自 AppTheme --><style name="BootTheme";parent="AppTheme"><!-- 将生成的 bootsplash.xml drawable 设置为活动背景--><项目名称="android:windowBackground">@drawable/bootsplash</item><item name="android:windowNoTitle">true</item></风格></资源>

android/app/src/main/res/drawable/bootsplash.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android";机器人:方向=垂直"；android:layout_width=fill_parent"android:layout_height=fill_parent"><项目><!-- 您的徽标，水平和垂直居中--><位图android:layout_height=fill_parent"android:src="@drawable/splash";android:scaleType=centerInside"机器人:重力=中心"/></项目></层列表>

还有我在 android/app/src/main/res/drawable/splash.png

中的 splash.png

我尝试了很多东西，很多

这是它在屏幕上显示的内容...

解决方案

for center image with background image fillup..step1:在res中的drawable里面创建一个Drawable资源文件step2:粘贴下面的代码，替换为背景图片作为您的图片和标志

<item android:drawable="@drawable/backgroundmapsneww"机器人:重力=填充"/><项目机器人:高度=100dp"机器人:宽度=100dp"；机器人:重力=中心"android:drawable="@drawable/logo";></项目>

I have a unique splash screen, called splash.png and sized 1280x1280, 150dpi I use react-native-bootsplash in my React Native project, but I don't think it really matters.

My question is simple : how can I make my splash screen, in portrait mode, be full height, not less, not more, and keep its aspect ratio so that the picture fills the screen. Like a background-size: cover in css. Or like an easy <Image resizeMode="cover" style={{ height: '100%' }} /> in React Native.

So I have :

android/app/src/main/res/values/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">#000000</item>
    </style>

    <!-- BootTheme should inherit from AppTheme -->
    <style name="BootTheme" parent="AppTheme">
        <!-- set the generated bootsplash.xml drawable as activity background -->
        <item name="android:windowBackground">@drawable/bootsplash</item>
        <item name="android:windowNoTitle">true</item>
    </style>

</resources>

android/app/src/main/res/drawable/bootsplash.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
    <item>
      <!-- your logo, centered horizontally and vertically -->
      <bitmap
        android:layout_height="fill_parent"
        android:src="@drawable/splash"
        android:scaleType="centerInside"
        android:gravity="center" />
    </item>
</layer-list>

And my splash.png in android/app/src/main/res/drawable/splash.png

I tried a lot of things, a lot of combinations of android:layout_height, android:scaleType and all, and I always end-up with a splash image's height overflowing the screen height.

[EDIT] Here is the splash original image, with the size reduced enough to have a small size for stackoverflow

and here is what it give on screen...

解决方案

for center image with background image fillup.. step1: create a Drawable resource file inside drawable in res step2: paste the code below replacing with background images as your image and logo

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/backgroundmapsneww"
    android:gravity="fill"
    />
<item
    android:height="100dp"
    android:width="100dp"
    android:gravity="center"
    android:drawable="@drawable/logo"
    >
</item>

这篇关于Android 独特的闪屏:如何让它填满屏幕?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！