Layar Percikan

Artikel
10/02/2019

Aplikasi Android membutuhkan waktu untuk memulai, terutama ketika aplikasi pertama kali diluncurkan di perangkat. Layar percikan dapat menampilkan kemajuan permulaan kepada pengguna atau untuk menunjukkan branding.

Gambaran Umum

Aplikasi Android membutuhkan waktu untuk memulai, terutama selama pertama kali aplikasi dijalankan pada perangkat (kadang-kadang ini disebut sebagai awal yang dingin). Layar percikan dapat menampilkan kemajuan permulaan kepada pengguna, atau mungkin menampilkan informasi branding untuk mengidentifikasi dan mempromosikan aplikasi.

Panduan ini membahas satu teknik untuk mengimplementasikan layar percikan dalam aplikasi Android. Ini mencakup langkah-langkah berikut:

Membuat sumber daya yang dapat digambar untuk layar percikan.
Menentukan tema baru yang akan menampilkan sumber daya yang dapat digambar.
Menambahkan Aktivitas baru ke aplikasi yang akan digunakan sebagai layar percikan yang ditentukan oleh tema yang dibuat pada langkah sebelumnya.

Persyaratan

Panduan ini mengasumsikan bahwa aplikasi menargetkan Android API level 21 atau yang lebih tinggi. Aplikasi ini juga harus menambahkan paket Xamarin.Android.Support.v4 dan Xamarin.Android.Support.v7.AppCompat NuGet ke proyek.

Menerapkan layar splash

Cara tercepat untuk merender dan menampilkan layar percikan adalah dengan membuat tema kustom dan menerapkannya ke Aktivitas yang menunjukkan layar percikan. Saat Aktivitas dirender, Aktivitas memuat tema dan menerapkan sumber daya yang dapat digambar (direferensikan oleh tema) ke latar belakang aktivitas. Pendekatan ini menghindari kebutuhan untuk membuat file tata letak.

Layar percikan diimplementasikan sebagai Aktivitas yang menampilkan bermerk yang dapat digambar, melakukan inisialisasi apa pun, dan memulai tugas apa pun. Setelah aplikasi di-bootstrap, layar splash Aktivitas memulai Aktivitas utama dan menghapus dirinya dari tumpukan belakang aplikasi.

Membuat Gambar untuk Layar Splash

Layar percikan akan menampilkan XML yang dapat digambar di latar belakang aktivitas layar percikan. Anda perlu menggunakan gambar bitmapped (seperti PNG atau JPG) agar gambar ditampilkan.

Aplikasi sampel mendefinisikan yang dapat digambar yang disebut splash_screen.xml. Gambar ini menggunakan Daftar Lapisan untuk memusatkan gambar layar percikan dalam aplikasi seperti yang ditunjukkan dalam xml berikut:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <color android:color="@color/splash_background"/>
  </item>
  <item>
    <bitmap
        android:src="@drawable/splash_logo"
        android:tileMode="disabled"
        android:gravity="center"/>
  </item>
</layer-list>

Ini layer-list berpusat pada citra percikan pada warna latar belakang yang ditentukan oleh @color/splash_background sumber daya. Aplikasi sampel menentukan warna ini dalam file Sumber Daya/nilai/colors.xml :

<?xml version="1.0" encoding="utf-8"?>
<resources>
  ...
  <color name="splash_background">#FFFFFF</color>
</resources>

Untuk informasi selengkapnya tentang Drawable objek, lihat dokumentasi Google di Android Drawable.

Menerapkan Tema

Untuk membuat tema kustom untuk Aktivitas layar percikan, edit (atau tambahkan) nilai/styles.xml file dan buat elemen baru style untuk layar percikan. Contoh nilai/file style.xml ditunjukkan di bawah ini dengan style nama MyTheme.Splash:

<resources>
  <style name="MyTheme.Base" parent="Theme.AppCompat.Light">
  </style>

  <style name="MyTheme" parent="MyTheme.Base">
  </style>

  <style name="MyTheme.Splash" parent ="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowBackground">@drawable/splash_screen</item>
    <item name="android:windowNoTitle">true</item>  
    <item name="android:windowFullscreen">true</item>  
    <item name="android:windowContentOverlay">@null</item>  
    <item name="android:windowActionBar">true</item>  
  </style>
</resources>

MyTheme.Splash sangat spartan - mendeklarasikan latar belakang jendela, secara eksplisit menghapus bilah judul dari jendela, dan menyatakan bahwa itu adalah layar penuh. Jika Anda ingin membuat layar splash yang meniru UI aplikasi Anda sebelum aktivitas mengembang tata letak pertama, Anda dapat menggunakan windowContentOverlay daripada windowBackground dalam definisi gaya Anda. Dalam hal ini, Anda juga harus memodifikasi splash_screen.xml yang dapat digambar sehingga menampilkan emulasi UI Anda.

Membuat Aktivitas Splash

Sekarang kita memerlukan Aktivitas baru untuk Android untuk diluncurkan yang memiliki citra percikan dan melakukan tugas startup apa pun. Kode berikut adalah contoh implementasi layar splash lengkap:

[Activity(Theme = "@style/MyTheme.Splash", MainLauncher = true, NoHistory = true)]
public class SplashActivity : AppCompatActivity
{
    static readonly string TAG = "X:" + typeof(SplashActivity).Name;

    public override void OnCreate(Bundle savedInstanceState, PersistableBundle persistentState)
    {
        base.OnCreate(savedInstanceState, persistentState);
        Log.Debug(TAG, "SplashActivity.OnCreate");
    }

    // Launches the startup task
    protected override void OnResume()
    {
        base.OnResume();
        Task startupWork = new Task(() => { SimulateStartup(); });
        startupWork.Start();
    }

    // Simulates background work that happens behind the splash screen
    async void SimulateStartup ()
    {
        Log.Debug(TAG, "Performing some startup work that takes a bit of time.");
        await Task.Delay (8000); // Simulate a bit of startup work.
        Log.Debug(TAG, "Startup work is finished - starting MainActivity.");
        StartActivity(new Intent(Application.Context, typeof (MainActivity)));
    }
}

SplashActivity secara eksplisit menggunakan tema yang dibuat di bagian sebelumnya, mengambil alih tema default aplikasi. Tidak perlu memuat tata letak karena OnCreate tema mendeklarasikan yang dapat digambar sebagai latar belakang.

Penting untuk mengatur NoHistory=true atribut sehingga Aktivitas dihapus dari tumpukan belakang. Untuk mencegah tombol kembali membatalkan proses startup, Anda juga dapat mengambil alih OnBackPressed dan tidak melakukan apa pun:

public override void OnBackPressed() { }

Pekerjaan startup dilakukan secara asinkron di OnResume. Ini diperlukan agar pekerjaan startup tidak melambat atau menunda tampilan layar peluncuran. Setelah pekerjaan selesai, SplashActivity akan diluncurkan MainActivity dan pengguna dapat mulai berinteraksi dengan aplikasi.

SplashActivity Baru ini ditetapkan sebagai aktivitas peluncur untuk aplikasi dengan mengatur MainLauncher atribut ke true. Karena SplashActivity sekarang merupakan aktivitas peluncur, Anda harus mengedit MainActivity.cs, dan menghapus MainLauncher atribut dari MainActivity:

[Activity(Label = "@string/ApplicationName")]
public class MainActivity : AppCompatActivity
{
    // Code omitted for brevity
}

Mode Lanskap

Layar percikan yang diterapkan pada langkah-langkah sebelumnya akan ditampilkan dengan benar dalam mode potret dan lanskap. Namun, dalam beberapa kasus perlu memiliki layar splash terpisah untuk mode potret dan lanskap (misalnya, jika gambar splash adalah layar penuh).

Untuk menambahkan layar percikan untuk mode lanskap, gunakan langkah-langkah berikut:

Di folder Sumber Daya/yang dapat digambar, tambahkan versi lanskap gambar layar percikan yang ingin Anda gunakan. Dalam contoh ini, splash_logo_land.png adalah versi lanskap logo yang digunakan dalam contoh di atas (menggunakan huruf putih alih-alih biru).

Di folder Sumber Daya/yang dapat digambar, buat versi lanskap dari layer-list drawable yang ditentukan sebelumnya (misalnya, splash_screen_land.xml). Dalam file ini, atur jalur bitmap ke versi lanskap gambar layar percikan. Dalam contoh berikut, splash_screen_land.xml menggunakan splash_logo_land.png:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <color android:color="@color/splash_background"/>
  </item>
  <item>
    <bitmap
        android:src="@drawable/splash_logo_land"
        android:tileMode="disabled"
        android:gravity="center"/>
  </item>
</layer-list>

Buat folder Resources/values-land jika belum ada.
Tambahkan file colors.xml dan style.xml ke nilai-tanah (ini dapat disalin dan dimodifikasi dari file nilai/colors.xml dan nilai/style.xml yang ada).

Ubah nilai-tanah/style.xml sehingga menggunakan versi lanskap dari yang dapat digambar untuk windowBackground. Dalam contoh ini, splash_screen_land.xml digunakan:

<resources>
  <style name="MyTheme.Base" parent="Theme.AppCompat.Light">
  </style>
    <style name="MyTheme" parent="MyTheme.Base">
  </style>
  <style name="MyTheme.Splash" parent ="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowBackground">@drawable/splash_screen_land</item>
    <item name="android:windowNoTitle">true</item>  
    <item name="android:windowFullscreen">true</item>  
    <item name="android:windowContentOverlay">@null</item>  
    <item name="android:windowActionBar">true</item>  
  </style>
</resources>

Ubah nilai-tanah/colors.xml untuk mengonfigurasi warna yang ingin Anda gunakan untuk versi lanskap layar percikan. Dalam contoh ini, warna latar belakang percikan diubah menjadi biru untuk mode lanskap:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="primary">#2196F3</color>
  <color name="primaryDark">#1976D2</color>
  <color name="accent">#FFC107</color>
  <color name="window_background">#F5F5F5</color>
  <color name="splash_background">#3498DB</color>
</resources>

Buat dan jalankan aplikasi lagi. Putar perangkat ke mode lanskap saat layar percikan masih ditampilkan. Layar percikan berubah ke versi lanskap:

Perhatikan bahwa penggunaan layar percikan mode lanskap tidak selalu memberikan pengalaman yang mulus. Secara default, Android meluncurkan aplikasi dalam mode potret dan mentransisikannya ke mode lanskap meskipun perangkat sudah dalam mode lanskap. Akibatnya, jika aplikasi diluncurkan saat perangkat dalam mode lanskap, perangkat secara singkat menyajikan layar percikan potret dan kemudian menganimasikan rotasi dari potret ke layar percikan lanskap. Sayangnya, transisi potret awal ke lanskap ini terjadi bahkan ketika ScreenOrientation = Android.Content.PM.ScreenOrientation.Landscape ditentukan dalam bendera Aktivitas percikan. Cara terbaik untuk mengatasi batasan ini adalah dengan membuat gambar layar splash tunggal yang dirender dengan benar dalam mode potret dan lanskap.

Ringkasan

Panduan ini membahas salah satu cara untuk mengimplementasikan layar percikan dalam aplikasi Xamarin.Android; yaitu, menerapkan tema kustom ke aktivitas peluncuran.

Bagikan melalui

Layar Percikan

Gambaran Umum

Persyaratan

Menerapkan layar splash

Membuat Gambar untuk Layar Splash

Menerapkan Tema

Membuat Aktivitas Splash

Mode Lanskap

Ringkasan

Sumber Daya Tambahan:

Bagikan melalui

Layar Percikan

Gambaran Umum

Persyaratan

Menerapkan layar splash

Membuat Gambar untuk Layar Splash

Menerapkan Tema

Membuat Aktivitas Splash

Mode Lanskap

Ringkasan

Link Terkait

Sumber Daya Tambahan: