Bagikan melalui

Bekerja dengan watchOS Layout di Xamarin

  • Artikel

Merancang tata letak untuk ukuran layar Apple Watch menghadirkan tantangan unik.

Tips Desain

Poin utamanya adalah: membuat antarmuka pengguna Anda dapat dibaca dan digunakan pada layar jam tangan kecil, dengan jari besar. Jangan jatuh ke dalam perangkap desain untuk Simulator iOS (yang tampak sangat besar) dan penunjuk mouse (yang bekerja dengan target sentuhan kecil)!

  • Gunakan latar belakang hitam - ini menciptakan ilusi layar yang lebih besar dengan bezel hitam jam tangan.

  • Jangan bantalan di sekitar tata letak layar Anda - bezel membentuk padding visual alami.

  • Fokus pada keterbacaan. Gunakan ukuran dan warna font secara yudisius untuk memastikan teks dapat dibaca. Gunakan gaya teks bawaan untuk mendapatkan dukungan Jenis Dinamis otomatis.

Contoh dukungan Jenis Dinamis

  • Fokus pada ukuran target sentuhan. Tombol/baris tabel yang dapat di-tappable dengan label teks harus menjangkau seluruh layar. Apple mengatakan "jangan pernah menempatkan lebih dari tiga item secara berdampingan", dan jika Anda menggunakan ikon dan bukan label teks.

  • Menu Gunakan kontrol untuk mengekspos fungsionalitas yang kurang sering digunakan untuk menjaga desain aplikasi Anda tetap jelas dan ringkas.

implementasi

Watch Kit menyertakan kontrol berikut untuk membantu Anda membangun tata letak aplikasi jam tangan yang menarik:

Pengontrol Antarmuka

adalah WKInterfaceController kelas dasar semua adegan Anda.

Permukaan desain untuk pengontrol antarmuka berperilaku seperti Grup vertikal: Anda dapat menyeret kontrol lain ke pengontrol antarmuka dan mereka akan secara otomatis diletakkan di atas yang lain:

Kontrol secara otomatis diletakkan satu di atas yang lain

Anda dapat mengatur properti Posisi dan Ukuran pada setiap kontrol untuk mengontrol tampilannya:

Mengatur properti Posisi dan Ukuran pada setiap kontrol

Ketika ukuran diatur ke Relatif terhadap Kontainer , Anda dapat memberikan nilai proporsional dan penyesuaian offset. Cuplikan layar ini memperlihatkan tombol yang telah diatur untuk menggunakan 80% lebar layar jam tangan (0,8):

Memberikan nilai proporsional dan penyesuaian offset

Grupkan

WKInterfaceGroup adalah kontainer tata letak sederhana yang dapat dikonfigurasi ke kontrol tumpukan secara vertikal atau horizontal. Ini termasuk penspasian antara setiap kontrol secara default, tetapi Anda dapat memodifikasi penspasian (dan inset) di pemeriksa Atribut.

Mengubah penspasian dan inset di pemeriksa Atribut

Grup dapat berukuran dan diposisikan relatif terhadap kontrol di sekitarnya, dan grup dapat ditumpuk untuk membuat tata letak yang kompleks.

Grup dapat ditumpuk untuk membuat tata letak kompleks

Pemisah

Kontrol pemisah dimaksudkan untuk membantu memberikan panduan visual dalam tata letak Anda. Gunakan pemisah (atau warna latar belakang atau gambar) untuk membantu pengguna memahami konten mana yang terkait di layar Anda.

Contoh penggunaan Pemisah

Perhatikan pemisah biru dan hijau yang tidak menggunakan lebar penuh layar telah dikonfigurasi dengan ukuran Tetap atau Relatif terhadap Kontainer .

Kontrol Konten

Tidak ada tata letak yang akan selesai tanpa Labelkontrol , , ImageButton, SliderSwitch, Map, dan lainnya. Ini dapat diposisikan dalam tata letak Anda menggunakan Grup atau pengaturan posisi dan ukuran pada setiap kontrol.