Android独特的启动画面：如何让它充满屏幕？

Question

我有一个独特的启动画面，名为splash.png，尺寸为1280x1280，150dpi 我在我的 React Native 项目中使用了

react-native-bootsplash

，但我认为这并不重要。

我的问题很简单：如何使我的启动画面在纵向模式下为全高，而不是更少，而不是更多，并保持其纵横比，以便图片填满屏幕。 就像 css 中的

background-size: cover

一样。 或者就像 React Native 中简单的

<Image resizeMode="cover" style={{ height: '100%' }} />

。

所以我有：

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>

还有我的

splash.png

在

android/app/src/main/res/drawable/splash.png

我尝试了很多东西，很多

android:layout_height

、

android:scaleType

等等的组合，但我总是最终得到闪屏图像的高度溢出屏幕高度的结果。

[编辑] 这是初始图像，尺寸已减小到足够用于 stackoverflow 的小尺寸

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

Answer 1

我认为这里的关键是

android:gravity="fill"

。

我在应用程序中实现它时遇到了同样的问题。

我的

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>
 <style name="BootTheme" parent="AppTheme">
<!-- set bootsplash.xml as background -->
<item name="android:background">@drawable/bootsplash</item>

还有我的

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:opacity="opaque">
    <item>
        <bitmap android:src="@mipmap/launch_screen" android:gravity="fill" />
    </item>
</layer-list>

Answer 2

对于带有背景图像填充的中心图像.. step1：在res中的drawable内部创建一个Drawable资源文件 步骤2：粘贴下面的代码，替换背景图片作为您的图片和徽标

<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>

Answer 3

作为启动器主题实现的启动屏幕主要用于显示徽标而不是完整图像。您可以尝试对不同分辨率的图像进行九补丁，请使用此网站：

http://ticons.fokkezb.nl/

上传您的图像（使用 3:4 宽高比，例如 1080x1920，以获得最佳效果）并选择 -> 启动画面。它将为您生成九个补丁图像，然后您需要将其上传到您的

res/drawable-hdpi

、

res/drawalbe-mdpi

、

res/drawable-xhdpi

、

res/drawable-xxhdpi

和

res/drawable-xxxhdpi

目录。如果它们还不存在，您可以创建它们。

上传九张图片后这样使用：

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

我能够使用您提供的图像获得合理的结果。如果这有帮助，请告诉我。这是你能得到的最好的。另一种选择是创建您自己的

SplashActivity

，它将在短时间内为您显示该图像。

Answer 4

使用 Bitmap 的方法似乎没有成功。您对替代方案满意吗？

为您的 SplashActivity/-Fragment 使用如下所示的布局怎么样？

对于显示附加信息（例如应用程序版本、支持联系方式、进度等）非常有用 - 这就是我个人更喜欢它的原因。

在 Kotlin 中使用 ViewModel 完成，您可能更了解 ReactNative。

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
            android:id="@+id/iv_splash"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:scaleType="centerCrop"
            app:srcCompat="@drawable/splash"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

如您所见，

centerCrop

是关键。它将剪切图像，但保留其纵横比。

现在在 SplashActivity 中膨胀布局，您也可以在其中让用户登录左右，然后在布局中显示结果，完成后切换到 MainActivity。

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_splash)
    }

...或片段

override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        viewModel = ViewModelProvider.AndroidViewModelFactory(Application())
            .create(viewModel::class.java)
        return inflater.inflate(R.layout.fragment_splash, container, false)
    }

替代解决方案

如果您将来不打算显示图像本身以外的任何内容，请使用此布局。

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"
    app:srcCompat="@drawable/splash"/>

希望有帮助:)

Answer 5

如果您正在使用“https://www.npmjs.com/package/react-native-splash-screen”这个包，并且如果您想在 android 中获得全屏，您只需更改此行即可。

SplashScreen.show(this , true)

在您的 MainActivity 文件中

Answer 6

我通过使用

FrameLayout

和

ImageView

来完成此操作。在您的

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

中写下以下代码：

<FrameLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
>
  <ImageView 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:src="@drawable/splash" 
    android:scaleType="centerCrop" 
  />
</FrameLayout>