Bagikan melalui

Menambahkan layar percikan ke proyek aplikasi .NET MAUI

  • Artikel

Di Android dan iOS, aplikasi .NET Multi-platform App UI (.NET MAUI) dapat menampilkan layar splash saat proses inisialisasinya selesai. Layar percikan ditampilkan segera saat aplikasi diluncurkan, memberikan umpan balik langsung kepada pengguna saat sumber daya aplikasi diinisialisasi:

Cuplikan layar splash .NET MAUI.

Setelah aplikasi siap untuk interaksi, layar splash-nya dimatikan.

Penting

Di iOS 16.4+, simulator tidak akan memuat layar splash kecuali aplikasi Anda ditandatangani. Untuk informasi selengkapnya, termasuk solusinya, lihat Masalah GitHub 18479.

Di Android 12+ (API 31+), layar splash menampilkan ikon yang dipusat di layar. Untuk informasi selengkapnya tentang layar splash di Android 12+, lihat Layar splash di developer.android.com.

Dalam proyek aplikasi .NET MAUI, layar splash dapat ditentukan dalam satu lokasi di proyek aplikasi Anda, dan pada waktu build dapat diubah ukurannya menjadi resolusi yang benar untuk platform target, dan ditambahkan ke paket aplikasi Anda. Ini menghindari harus menduplikasi dan memberi nama layar splash secara manual per platform. Secara default, format gambar bitmap (non-vektor) tidak secara otomatis diubah ukurannya oleh .NET MAUI.

Layar splash .NET MAUI dapat menggunakan salah satu format gambar platform standar, termasuk file Scalable Vector Graphics (SVG).

Penting

.NET MAUI mengonversi file SVG ke file PNG. Oleh karena itu, saat menambahkan file SVG ke proyek aplikasi .NET MAUI Anda, file tersebut harus dirujuk dari XAML atau C# dengan ekstensi .png. Satu-satunya referensi ke file SVG harus ada di file proyek Anda.

Layar splash dapat ditambahkan ke proyek aplikasi Anda dengan menyeret gambar ke folder Resources\Splash proyek, di mana tindakan build-nya akan secara otomatis diatur ke MauiSplashScreen. Ini membuat entri yang sesuai dalam file proyek Anda:

<ItemGroup>
  <MauiSplashScreen Include="Resources\Splash\splashscreen.svg" />
</ItemGroup>

Catatan

Layar percikan juga dapat ditambahkan ke folder lain dari proyek aplikasi Anda. Namun, dalam skenario ini tindakan build-nya harus diatur secara manual ke MauiSplashScreen di jendela Properti .

Untuk mematuhi aturan penamaan sumber daya Android, nama file layar splash harus huruf kecil, dimulai dan diakhapi dengan karakter huruf, dan hanya berisi karakter alfanumerik atau garis bawah. Untuk informasi selengkapnya, lihat Gambaran umum sumber daya aplikasi di developer.android.com.

Pada waktu build, gambar layar splash diubah ukurannya ke ukuran yang benar untuk platform dan perangkat target. Layar splash yang diubah ukurannya kemudian ditambahkan ke paket aplikasi Anda. Untuk informasi tentang menonaktifkan kemasan layar percikan, lihat Menonaktifkan kemasan layar percikan. Untuk informasi tentang menghasilkan layar percikan kosong, lihat Membuat layar percikan kosong.

Mengatur ukuran dasar

.NET MAUI menggunakan layar splash Anda di beberapa platform dan dapat mengubah ukurannya untuk setiap platform.

Ukuran dasar gambar layar percikan mewakili kepadatan garis besar gambar, dan secara efektif merupakan faktor skala 1,0 untuk gambar (ukuran yang biasanya Anda gunakan dalam kode Anda untuk menentukan ukuran layar percikan) dari mana semua ukuran lain diturunkan. Jika Anda tidak menentukan ukuran dasar untuk gambar bitmap, gambar tidak diubah ukurannya. Jika Anda tidak menentukan ukuran dasar untuk gambar vektor, seperti file SVG, dimensi yang ditentukan dalam gambar digunakan sebagai ukuran dasar.

Diagram berikut mengilustrasikan bagaimana ukuran dasar memengaruhi gambar:

Bagaimana ukuran dasar memengaruhi ikon aplikasi untuk .NET MAUI.

Proses yang ditunjukkan dalam diagram mengikuti langkah-langkah berikut:

  • A: Gambar memiliki dimensi 210x260, dan ukuran dasar diatur ke 424x520.
  • B: .NET MAUI menskalakan gambar agar sesuai dengan ukuran dasar 424x520.
  • C: Karena platform target yang berbeda memerlukan ukuran gambar yang berbeda, .NET MAUI menskalakan gambar dari ukuran dasar ke ukuran yang berbeda.

Tip

Gunakan gambar SVG jika memungkinkan. Gambar SVG dapat meningkatkan skala ke ukuran yang lebih besar dan masih terlihat renyah dan bersih. Gambar berbasis bitmap, seperti gambar PNG atau JPG, terlihat buram saat ditingkatkan skalanya.

Ukuran dasar ditentukan dengan BaseSize="W,H" atribut , di mana W adalah lebar gambar dan H merupakan tinggi gambar. Contoh berikut mengatur ukuran dasar:

<MauiSplashScreen Include="Resources\Splash\splashscreen.svg" BaseSize="128,128" />

Pada waktu build, layar splash akan diubah ukurannya menjadi resolusi yang benar untuk platform target. Layar percikan yang dihasilkan kemudian ditambahkan ke paket aplikasi Anda.

Untuk menghentikan gambar vektor yang diubah ukurannya, atur atribut ke Resizefalse:

<MauiSplashScreen Include="Resources\Splash\splashscreen.svg" Resize="false" />

Menambahkan warna dan warna latar belakang

Untuk menambahkan warna ke layar splash Anda, yang berguna ketika Anda memiliki gambar sederhana yang ingin Anda render dalam warna yang berbeda ke sumber, atur TintColor atribut:

<MauiSplashScreen Include="Resources\Splash\splashscreen.svg" TintColor="#66B3FF" />

Warna latar belakang untuk layar splash Anda juga dapat ditentukan:

<MauiSplashScreen Include="Resources\Splash\splashscreen.svg" Color="#512BD4" />

Nilai warna dapat ditentukan dalam heksadesimal, atau sebagai warna MAUI .NET. Misalnya, Color="Red" valid.

Konfigurasi khusus platform

Di Android, layar splash ditambahkan ke paket aplikasi Anda sebagai Resource/values/maui_colors.xml dan Resources/drawable/maui_splash_image.xml. Aplikasi MAUI .NET menggunakan Maui.SplashTheme secara default, yang memastikan bahwa layar splash akan ditampilkan jika ada. Oleh karena itu, Anda tidak boleh menentukan tema yang berbeda dalam file manifes atau di kelas Anda MainActivity :

using Android.App;
using Android.Content.PM;

namespace MyMauiApp
{
      [Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize)]
      public class MainActivity : MauiAppCompatActivity
      {
      }
}

Untuk skenario layar percikan yang lebih canggih, pendekatan per platform berlaku.