我有一个独特的启动画面,名为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 的小尺寸
这是屏幕上显示的内容...
我认为这里的关键是
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>
对于带有背景图像填充的中心图像.. 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>
作为启动器主题实现的启动屏幕主要用于显示徽标而不是完整图像。您可以尝试对不同分辨率的图像进行九补丁,请使用此网站:
上传您的图像(使用 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
,它将在短时间内为您显示该图像。
使用 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"/>
希望有帮助:)
如果您正在使用“https://www.npmjs.com/package/react-native-splash-screen”这个包,并且如果您想在 android 中获得全屏,您只需更改此行即可。
SplashScreen.show(this , true)
在您的 MainActivity 文件中
我通过使用
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>