Luncurkan Layar untuk Aplikasi Xamarin.iOS

Artikel ini menjelaskan cara membuat Layar Peluncuran aplikasi untuk semua perangkat iOS, pada resolusi dan orientasi apa pun, menggunakan satu Papan Cerita Terpadu.

Peringatan

Desainer iOS tidak digunakan lagi di Visual Studio 2019 versi 16.8 dan Visual Studio 2019 untuk Mac versi 8.8, dan dihapus di Visual Studio 2019 versi 16.9 dan Visual Studio untuk Mac versi 8.9. Cara yang disarankan untuk membangun antarmuka pengguna iOS langsung ada di Mac yang menjalankan Xcode. Untuk informasi selengkapnya, lihat Mendesain antarmuka pengguna dengan Xcode.

Sebelum iOS 8, membuat Layar Peluncuran untuk aplikasi iOS mengharuskan pengembang menyediakan aset gambar untuk masing-masing dari berbagai faktor bentuk dan resolusi perangkat tempat aplikasi dapat berjalan. Namun, sejak rilis iOS 8, dimungkinkan untuk menggunakan satu Papan Cerita Terpadu untuk membuat Layar Peluncuran yang terlihat benar dalam semua kasus.

Panduan singkat ini menjelaskan cara membuat Layar Peluncuran dengan Papan Cerita yang disediakan secara default di Proyek baru atau dengan Papan Cerita ditambahkan secara manual ke Proyek yang ada. Kemudian menunjukkan cara menggunakan Perancang iOS untuk menambahkan Tampilan Gambar dan Label ke Papan Cerita, untuk mengatur batasan pada tampilan tersebut, dan untuk memverifikasi bahwa Papan Cerita terlihat benar untuk berbagai perangkat dan orientasi.

Mengelola Layar Peluncuran dengan Papan Cerita

Di iOS 8 (dan yang lebih baru), pengembang dapat membuat Storyboard Terpadu khusus untuk menyediakan Layar Peluncuran alih-alih menggunakan satu atau beberapa gambar peluncuran statis. Saat membuat Storyboard peluncuran di iOS Designer, gunakan Kelas Ukuran dan Tata Letak Otomatis untuk menentukan tata letak yang berbeda untuk lingkungan tampilan yang berbeda. Dengan menggunakan Kelas Ukuran dan Tata Letak Otomatis, pengembang dapat membuat satu layar peluncuran yang terlihat bagus di semua perangkat dan lingkungan tampilan.

Visual Studio untuk Mac

1. Di Visual Studio untuk Mac, buat proyek baru dengan memilih File > Solusi Baru lalu pilih Aplikasi Tampilan Tunggal:

   

   • Secara default, Proyek baru menyertakan file LaunchScreen.storyboard yang menentukan antarmuka Luncurkan Layar.
   • Untuk menambahkan Papan Cerita Layar Peluncuran ke proyek yang sudah ada, klik kanan pada nama proyek di Pad Solusi dan pilih Tambahkan > File Baru... lalu pilih Luncurkan Layar:

   

   • Beri nama file LaunchScreen atau nama lain yang Anda pilih.

2. Konfigurasikan Project untuk menggunakan Storyboard yang sesuai untuk Layar Peluncurannya:

   • Klik dua kali file Info.plist di Solution Pad untuk membukanya untuk pengeditan.
   • Di bagian Luncurkan Gambar, pastikan Layar Peluncuran diatur ke nama Storyboard yang sesuai:

   

   • Secara default, Proyek baru dikonfigurasi untuk menggunakan LaunchScreen.storyboard sebagai Layar Peluncurannya.

3. Tambahkan gambar ke Katalog Aset Aset.xcassets sehingga tersedia untuk digunakan pada Layar Peluncuran. Untuk informasi selengkapnya, lihat bagian Menambahkan Gambar ke Kumpulan Gambar Katalog Aset dari panduan Menampilkan Gambar .

4. Buka LaunchScreen.storyboard untuk pengeditan dengan mengklik dua kali di Pad Solusi.

5. Pilih perangkat dan orientasi untuk mempratinjau Papan Cerita Layar Peluncuran di Perancang iOS. Buka panel pemilihan perangkat di toolbar bawah dan pilih i Telepon 4S dan Potret.

   

   • Perhatikan bahwa memilih perangkat dan orientasi hanya mengubah cara Desainer iOS mempratinjau desain. Terlepas dari pilihan yang dibuat di sini, batasan yang baru ditambahkan diterapkan di semua perangkat dan orientasi kecuali tombol Edit Sifat telah digunakan untuk menentukan sebaliknya.

6. Atur Warna latar belakang Tampilan utama Pengontrol Tampilan. Pilih Tampilan dengan mengklik di tengah Pengontrol Tampilan dan sesuaikan warna latar belakang menggunakan Properties Pad:

   

7. Tambahkan Tampilan Gambar ke Layar Peluncuran dan atur Gambar sumbernya:

   • Seret Tampilan Gambar dari Pad Kotak Alat ke tengah Tampilan.
   • Dengan Tampilan Gambar dipilih, di bagian Widget dari Properti Pad, atur properti Gambar ke Set Gambar yang sudah ditambahkan ke Katalog Aset Aset.xcassets. Reposisi dan ukuran Tampilan Gambar sesuai kebutuhan:

   

8. Tambahkan Label di bawah Tampilan Gambar dan gunakan Pad Properti untuk mengatur atributnya:

   

9. Beralih ke Mode Pengeditan Batasan dengan menggunakan tombol kanan di Toolbar Batasan:

   

10. Tambahkan batasan ke Tampilan Gambar, atur tinggi dan lebarnya dan tengahkan secara horizontal dan vertikal:

    

    • Untuk detail selengkapnya tentang cara menambahkan batasan, lihat Tata Letak Otomatis dengan Xamarin Designer untuk iOS.

11. Tambahkan batasan ke Label, tengahkan secara horizontal, berikan tinggi dan lebar, dan posisikan jarak tetap secara vertikal dari Tampilan Gambar:

    

12. Uji perangkat dan orientasi lain untuk memverifikasi bahwa desain terlihat seperti yang dimaksudkan dalam semua skenario. Dalam kasus di mana penyesuaian perlu dilakukan untuk perangkat atau orientasi tertentu, gunakan tombol Edit Sifat untuk menambahkan batasan untuk kelas ukuran tertentu:

    

13. Simpan perubahan ke Storyboard. Jalankan aplikasi pada simulator atau perangkat, dan Layar Peluncuran akan terlihat saat aplikasi diluncurkan.

Visual Studio

1. Buat proyek baru. Di Visual Studio, pilih File Proyek Baru Visual C# > i Telepon & iPad > iOS App (Xamarin):>>>

   

   Pilih templat Aplikasi Tampilan Tunggal, lalu klik OK:

   

2. Jika Resources > LaunchScreen.xib ada di Penjelajah Solusi, hapus dengan mengklik kanan pada file dan memilih Hapus. File ini akan diganti dengan Storyboard di langkah berikutnya.

3. Buat Storyboard untuk digunakan sebagai Layar Luncurkan. Di Penjelajah Solusi, klik kanan proyek dan pilih Tambahkan > Item Baru... diikuti oleh Storyboard Kosong. Beri nama Storyboard ini LaunchScreen.storyboard dan klik Tambahkan:

   

4. Konfigurasikan Project untuk menggunakan LaunchScreen.storyboard sebagai Papan Cerita Layar Peluncurannya:

   • Klik dua kali file Info.plist di Penjelajah Solusi untuk membukanya untuk pengeditan.
   • Pada tab Aset Visual, atur Luncurkan Layar ke LayarLuncurkan.

   

5. Tambahkan gambar ke Katalog Aset di Proyek sehingga tersedia untuk digunakan di Layar Luncurkan:

   • Di Penjelajah Solusi, klik kanan Katalog Aset dan pilih Tambahkan Katalog Aset. Beri nama Aset Katalog Aset baru ini:

   

   • Tambahkan Set Gambar baru ke Katalog Aset Aset , seperti yang dijelaskan di bagian Menambahkan Gambar ke Kumpulan Gambar Katalog Aset dari panduan Menampilkan Gambar .

6. Buka LaunchScreen.storyboard untuk pengeditan dengan mengklik dua kali di Penjelajah Solusi.

   • Untuk mengedit file Storyboard, Visual Studio memerlukan koneksi aktif ke host build Mac. Lihat panduan Koneksi ke Mac untuk detailnya.

7. Pilih perangkat dan orientasi untuk mempratinjau Papan Cerita Layar Peluncuran di Perancang iOS. Buka panel pemilihan perangkat di toolbar bawah dan pilih i Telepon 4S dan Potret:

   

   • Perhatikan bahwa memilih perangkat dan orientasi hanya mengubah cara Desainer iOS mempratinjau desain. Terlepas dari pilihan yang dibuat di sini, batasan yang baru ditambahkan diterapkan di semua perangkat dan orientasi kecuali tombol Edit Sifat telah digunakan untuk menentukan sebaliknya.

8. Tambahkan Pengontrol Tampilan ke Storyboard dengan menyeretnya dari Kotak Alat ke permukaan desain:

   

9. Atur Warna latar belakang Tampilan utama Pengontrol Tampilan. Pilih Tampilan dengan mengklik di tengah Pengontrol Tampilan dan sesuaikan warna latar belakang menggunakan Jendela Properti:

   

10. Tambahkan Tampilan Gambar ke Layar Peluncuran dan atur Gambar sumbernya:

    • Seret Tampilan Gambar dari Kotak Alat ke tengah Tampilan.
    • Dengan Tampilan Gambar masih dipilih, di bagian Widget dari Jendela Properti atur properti Gambar ke Set Gambar yang sudah ditambahkan ke Katalog Aset Aset. Reposisi dan ukuran Tampilan Gambar sesuai kebutuhan:

    

11. Tambahkan Label di bawah Tampilan Gambar:

    • Seret Label dari Kotak Alat ke permukaan desain, tempatkan di bawah Tampilan Gambar.
    • Atur atribut untuk Label menggunakan Jendela Properti:

    

12. Beralih ke Mode Pengeditan Batasan dengan menggunakan tombol kanan di Toolbar Batasan:

    

13. Tambahkan batasan ke Tampilan Gambar, atur tinggi dan lebarnya dan tengahkan secara horizontal dan vertikal:

    

    • Untuk informasi tentang menambahkan batasan, lihat Tata Letak Otomatis dengan Desainer Xamarin untuk iOS.

14. Tambahkan batasan ke Label, tengahkan secara horizontal, berikan tinggi dan lebar, dan posisikan jarak tetap secara vertikal dari Tampilan Gambar:

    

15. Uji perangkat dan orientasi lain untuk memverifikasi bahwa desain terlihat seperti yang dimaksudkan dalam semua skenario. Dalam kasus di mana penyesuaian perlu dilakukan untuk perangkat atau orientasi tertentu, gunakan tombol Edit Sifat untuk menambahkan batasan untuk kelas ukuran tertentu:

    

16. Simpan perubahan ke Storyboard. Jalankan aplikasi pada simulator atau perangkat, dan Layar Peluncuran akan terlihat saat aplikasi diluncurkan.

Catatan

Papan Cerita yang digunakan sebagai Layar Peluncuran hanya boleh menyertakan elemen UI bawaan yang sederhana dan tidak dapat melakukan perhitungan apa pun atau berasal dari kelas kustom.

Untuk informasi selengkapnya tentang membuat Layar Peluncuran dengan Papan Cerita Terpadu, silakan lihat bagian Layar Peluncuran Dinamis dari panduan Papan Cerita Terpadu.

Migrasi ke Luncurkan Papan Cerita Layar

Visual Studio untuk Mac

Saat memperbarui aplikasi yang ada untuk menggunakan Papan Cerita untuk Layar Peluncurannya, klik kanan Nama Proyek di Penjelajah Solusi dan pilih Tambahkan>File Baru.... Pilih Layar Peluncuran iOS>dan klik tombol Baru:

Selanjutnya, klik Info.plist dua kali file di Penjelajah Solusi untuk membukanya untuk pengeditan. Di bawah Luncurkan Layar, pilih file Storyboard baru yang dibuat di atas.

Untuk menggunakan Storyboard baru sebagai layar peluncuran, lakukan hal berikut:

1. Info.plist Klik dua kali file di Penjelajah Solusi untuk membukanya untuk pengeditan.

2. Gulir ke bagian Gambar Peluncuran Universal editor, buka menu dropdown Luncurkan Layar dan pilih nama papan cerita yang dibuat di atas:

   

Visual Studio

1. Klik kanan pada nama proyek di Penjelajah Solusi dan pilih Tambahkan>File Baru...:

   

2. Masukkan nama untuk layar peluncuran dan klik tombol Tambahkan :

   

3. Di Penjelajah Solusi, klik dua kali file papan cerita yang baru dibuat untuk membukanya untuk pengeditan.

4. Pastikan bahwa Kelas Ukuran diatur ke any:any dan View As is Generic:

   

5. Rakitan layar peluncuran dari Kelas Ukuran, elemen UI sederhana (seperti UIImageView) dan gambar yang telah Anda sertakan dalam bundel aplikasi:

   

6. Simpan perubahan ke Storyboard.

Link Terkait

• Papan Cerita Terpadu
• Dasar-Dasar Desainer iOS
• Menambahkan Gambar ke Kumpulan Gambar Katalog Aset
• Tata Letak Otomatis dengan Desainer Xamarin untuk iOS
• Pedoman Antarmuka Manusia: Layar Peluncuran