Android уникальный spla sh экран: как заставить его заполнять экран? - PullRequest
7 голосов
/ 09 июля 2020

У меня есть уникальный экран spla sh, называемый spla sh .png, размером 1280x1280, 150dpi. Я использую react-native-bootsplash в моем проекте React Native, но я не думаю, что это действительно имеет значение.

Мой вопрос прост: как я могу сделать мой экран spla sh в портретном режиме полной высотой, не меньше, не больше , и сохранить его соотношение сторон таким образом что изображение заполняет экран. Как background-size: cover в css. Или как простой <Image resizeMode="cover" style={{ height: '100%' }} /> в React Native.

Итак, у меня есть:

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 и все, и я всегда получаю изображение spla sh, которое превышает высоту экрана.

[EDIT] Вот исходное изображение spla sh, размер которого уменьшен настолько, чтобы иметь небольшой размер для stackoverflow

splash original image

and here is what it give on screen...

растянутое изображение на экране

Ответы [ 5 ]

0 голосов
/ 22 июля 2020

для центрального изображения с заполнением фонового изображения. Step1: создайте файл ресурсов Drawable внутри drawable в res step2: вставьте код ниже, заменив его фоновыми изображениями в качестве изображения и lo go

<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>
0 голосов
/ 22 июля 2020

Я сделал это, используя 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>
0 голосов
/ 21 июля 2020

Spla sh экран, реализованный как тема запуска, в основном предназначен для отображения логотипов, а не полных изображений. Вы можете попробовать применить девять патчей к изображению для разных разрешений, используйте этот веб-сайт:

http://ticons.fokkezb.nl/

Загрузите свое изображение (используйте соотношение сторон 3: 4, например 1080x1920, для наилучшего результата) и выберите -> брызги. Он сгенерирует для вас изображения с девятью патчами, которые затем необходимо загрузить в каталоги res/drawable-hdpi, res/drawalbe-mdpi, res/drawable-xhdpi, res/drawable-xxhdpi и res/drawable-xxxhdpi. Если они еще не существуют, вы можете просто создать их. при условии. Сообщите мне, помогло ли это. Это лучшее, что вы можете получить. Другой вариант - создать свой собственный SplashActivity, который будет показывать вам это изображение в течение короткого периода времени.

0 голосов
/ 21 июля 2020

Подход с Bitmap, похоже, не увенчался успехом. Довольны ли вы альтернативой?

Как насчет использования макета для вашего SplashActivity / -Fragment, подобного следующему?

Довольно полезно для отображения дополнительной информации, такой как версия приложения, контакт в службу поддержки, прогресс и т. Д. c. - вот почему я лично предпочитаю его.

Сделано в Kotlin при работе с ViewModels, возможно, вы знаете его лучше для 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"/>
0 голосов
/ 16 июля 2020

Я думаю, что ключ здесь android:gravity="fill".

У меня была такая же проблема, когда я реализовывал ее в своем приложении.

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