Bagikan melalui

Bekerja dengan Navigasi dan Fokus tvOS di Xamarin

  • Artikel

Artikel ini membahas konsep Fokus dan cara penggunaannya untuk menyajikan dan menangani Navigasi di dalam aplikasi Xamarin.tvOS.

Artikel ini membahas konsep Fokus dan cara penggunaannya untuk menangani Navigasi di Antarmuka Pengguna aplikasi Xamarin.tvOS. Kami akan memeriksa bagaimana kontrol Navigasi tvOS bawaan menggunakan Fokus, Penyorotan, dan Pilihan untuk menyediakan Navigasi Antarmuka Pengguna aplikasi Xamarin.tvOS Anda.

Navigasi Antarmuka Pengguna aplikasi tvOS

Selanjutnya, kita akan melihat bagaimana Fokus dapat digunakan dengan Parallax dan Gambar Berlapis untuk memberikan petunjuk visual untuk Status Navigasi saat ini kepada pengguna akhir.

Terakhir, kita akan melihat bekerja dengan Fokus, Pembaruan Fokus, Panduan Fokus, Fokus dalam Koleksi, dan Mengaktifkan Paralaks pada Tampilan Gambar di aplikasi Xamarin.tvOS Anda.

Pengguna aplikasi Xamarin.tvOS Anda tidak akan berinteraksi dengan antarmukanya secara langsung seperti halnya iOS tempat mereka mengetuk gambar di layar perangkat, tetapi secara tidak langsung dari seluruh ruangan menggunakan Siri Remote. Anda harus mengingat hal ini saat merancang Antarmuka Pengguna aplikasi Anda sehingga mengalir secara alami, namun membuat pengguna terbenam dalam pengalaman Apple TV.

Aplikasi tvOS yang sukses menerapkan navigasi dengan cara yang dengan lancar mendukung tujuan aplikasi dan struktur data yang disajikannya tanpa menarik perhatian pada navigasi itu sendiri. Desain navigasi Anda sehingga terasa alami dan akrab tanpa mendominasi Antarmuka Pengguna atau menarik fokus jauh dari konten dan pengalaman pengguna aplikasi.

Aplikasi pengaturan tvOS

Saat menggunakan Apple TV, pengguna biasanya menavigasi melalui set layar bertumpuk, masing-masing menyajikan sekumpulan konten tertentu. Pada gilirannya, setiap layar baru dapat menyebabkan satu atau beberapa sub-layar konten menggunakan kontrol UI standar seperti Tombol, Bilah Tab, Tabel, Tampilan Koleksi, atau Tampilan Terpisah.

Dengan setiap layar data baru, pengguna menavigasi lebih dalam ke tumpukan layar ini. Dengan menggunakan tombol Menu pada Siri Remote, mereka dapat menavigasi mundur melalui tumpukan untuk kembali ke layar sebelumnya atau Menu Utama.

Apple menyarankan untuk mengingat hal-hal berikut saat merancang navigasi untuk app tvOS Anda:

  • Tata letak Navigasi Anda untuk Membuat Pencarian Konten Cepat dan Mudah - Pengguna ingin mengakses konten dalam aplikasi Anda dalam jumlah ketukan, klik, dan geser sekecil mungkin. Sederhanakan navigasi Anda dan atur konten ke jumlah layar minimal.
  • Buat Antarmuka Fluid Menggunakan Sentuhan - Pastikan bahwa pengguna dapat berpindah di antara Item yang Dapat Difokuskan dengan gesekan minimal dengan menggunakan sejumlah kecil gerakan yang mungkin.
  • Desain dengan Fokus dalam Pikiran - Karena pengguna berinteraksi dengan konten di seluruh ruangan, mereka perlu memindahkan Fokus ke item Antarmuka Pengguna sebelum berinteraksi dengannya menggunakan Siri Remote. Pengguna akan frustrasi dengan aplikasi Anda jika memerlukan terlalu banyak gerakan bagi mereka untuk mencapai tujuan mereka.
  • Berikan Navigasi Mundur melalui Tombol Menu - Untuk membuat pengalaman yang mudah dan akrab, izinkan pengguna untuk menavigasi mundur menggunakan tombol Menu Jarak Jauh Siri. Menekan tombol Menu harus selalu kembali ke layar sebelumnya atau kembali ke Menu Utama aplikasi. Di tingkat atas aplikasi, menekan tombol Menu akan kembali ke layar Utama Apple TV.
  • Biasanya Hindari Menampilkan Tombol Kembali - Karena menekan tombol Menu pada Siri Remote menavigasi mundur melalui tumpukan layar, hindari menampilkan kontrol tambahan yang menduplikasi perilaku ini. Pengecualian untuk aturan ini adalah untuk membeli layar atau layar dengan tindakan destruktif (seperti menghapus konten) di mana tombol Batalkan juga harus ditampilkan.
  • Tampilkan Koleksi Besar pada Satu Layar, Alih-alih Banyak - Siri Remote dirancang untuk membuat bergerak melalui banyak koleksi konten dengan cepat dan mudah menggunakan gerakan. Jika aplikasi Anda berfungsi dengan banyak koleksi Item yang Dapat Difokuskan, pertimbangkan untuk menyimpannya di satu layar alih-alih memecahnya ke banyak layar yang memerlukan lebih banyak navigasi di bagian pengguna.
  • Gunakan Kontrol Standar untuk Navigasi - Sekali lagi, untuk membuat pengalaman pengguna yang mudah dan akrab, sedapat mungkin, gunakan kontrol bawaan UIKit seperti Kontrol Halaman, Bilah Tab, Kontrol Tersegmentasi, Tampilan Tabel, Tampilan Koleksi, dan Tampilan Terpisah untuk navigasi aplikasi Anda. Karena pengguna sudah terbiasa dengan elemen-elemen ini, mereka akan secara intuitif dapat menavigasi aplikasi Anda.
  • Pilih Navigasi Konten Horizontal - Karena sifat Apple TV, menggesekkan ke kiri ke kanan di Siri Remote lebih alami daripada atas dan ke bawah. Pertimbangkan opsi ini saat merancang tata letak konten untuk aplikasi Anda.

Fokus dan Pilihan

Di Apple TV, gambar, tombol, atau elemen UI lainnya dianggap fokus saat menjadi target navigasi saat ini.

Contoh Fokus dan Pilihan

Tidak seperti perangkat iOS tempat pengguna berinteraksi langsung dengan elemen di layar sentuh perangkat, pengguna berinteraksi dengan elemen tvOS dari seluruh ruangan menggunakan Siri Remote. Untuk menyajikan dan menangani interaksi pengguna ini, Apple TV menggunakan model berbasis Fokus .

Menggunakan gerakan dan penekanan tombol pada Siri Remote, pengguna memindahkan fokus dari satu elemen UI ke elemen lainnya. Setelah fokus bergeser ke elemen yang diinginkan, pengguna mengklik untuk memilih konten atau mengaktifkan tindakan yang diwakili oleh elemen tersebut.

Saat fokus berubah, animasi dan efek halang (seperti Efek Parallax pada gambar) digunakan untuk mengidentifikasi item Antarmuka Pengguna yang saat ini memiliki fokus dengan jelas.

Apple memiliki saran berikut untuk bekerja dengan Fokus dan Pilihan:

  • Gunakan Kontrol UI Bawaan untuk Efek Gerakan - Dengan menggunakan UIKit dan API Fokus di Antarmuka Pengguna Anda, Model Fokus akan secara otomatis menerapkan gerakan default dan efek visual ke elemen UI Anda. Ini membuat aplikasi Anda terasa asli dan akrab bagi pengguna platform Apple TV dan memungkinkan gerakan yang lancar dan intuitif antara Item yang Dapat Difokuskan.
  • Pindahkan Fokus ke Arah yang Diharapkan - Di Apple TV, hampir setiap elemen menggunakan manipulasi tidak langsung. Misalnya, pengguna menggunakan Siri Remote untuk memindahkan fokus dan sistem secara otomatis menggulir antarmuka agar item yang saat ini difokuskan tetap terlihat. Jika aplikasi Anda menerapkan jenis interaksi ini, pastikan fokus bergerak ke arah gerakan pengguna. Jadi, jika pengguna menggesek ke kanan pada fokus Siri Remote harus berpindah ke kanan (yang dapat menyebabkan layar menggulir ke kiri). Satu pengecualian untuk aturan ini adalah item layar penuh yang menggunakan manipulasi langsung (di mana menggesek ke atas memindahkan elemen ke atas).
  • Pastikan bahwa Item Terfokus jelas - Karena pengguna Anda berinteraksi dengan elemen UI Anda dari jauh, sangat penting bahwa item yang saat ini difokuskan menonjol. Biasanya ini akan ditangani secara otomatis oleh elemen bawaan UIKit . Untuk kontrol kustom, gunakan fitur seperti ukuran item atau bayangan untuk menampilkan fokus.
  • Gunakan Parallax untuk Membuat Item Terfokus Responsif - Gerakan kecil dan melingkar pada Hasil Jarak Jauh Siri dalam gerakan yang lembut dan real-time dari item yang difokuskan. Efek Parallax ini dibangun ke dalam UIKitGambar Berlapis untuk memberi pengguna rasa koneksi ke item yang difokuskan.
  • Buat Item yang Dapat Difokuskan dari Ukuran yang Sesuai - Item besar dengan penspasian yang cukup lebih mudah dipilih dan dinavigasi daripada item yang lebih kecil.
  • Desain Elemen UI agar Terlihat Bagus Baik Fokus atau Tidak Fokus - Biasanya Apple TV mewakili Item Terfokus dengan meningkatkan ukurannya. Pastikan elemen UI aplikasi Anda terlihat hebat pada ukuran presentasi apa pun dan, jika diperlukan, berikan aset untuk elemen berukuran lebih besar.
  • Mewakili Perubahan Fokus Secara Lancar - Gunakan animasi untuk memudar dengan lancar di antara item Berfokus dan Status tidak fokus untuk menjaga transisi tidak berjalan.
  • Jangan Tampilkan Kursor - Pengguna berharap untuk menavigasi UI aplikasi Anda menggunakan Fokus dan bukan dengan memindahkan kursor di sekitar layar. Antarmuka Pengguna Anda harus selalu menggunakan Model Fokus untuk menyajikan pengalaman pengguna yang konsisten.

Bekerja dengan Fokus

Mungkin ada kalanya Anda ingin membuat kontrol kustom yang bisa menjadi Item yang Dapat Difokuskan. Jika demikian, ambil alih CanBecomeFocused properti dan kembalikan true, jika tidak, kembalikan false. Contohnya:

public class myView : UIView
{
    public override bool CanBecomeFocused {
        get {return true;}
    }
}

Kapan saja Anda dapat menggunakan Focused properti UIKit kontrol untuk melihat apakah itu item saat ini. Jika true item UI saat ini memiliki fokus, jika tidak. Contohnya:

// Is my view in focus?
if (myView.Focused) {
    // Do something
    ...
}

Meskipun Anda tidak dapat langsung memindahkan fokus ke elemen UI lain melalui kode, Anda dapat menentukan elemen UI mana yang pertama kali mendapatkan fokus saat layar dimuat dengan mengatur propertinya PreferredFocusedView ke true. Contohnya:

// Make the play button the starting focus item
playButton.PreferredFocusedView = true;

Bekerja dengan Pembaruan Fokus

Ketika pengguna menyebabkan fokus untuk beralih dari satu elemen UI ke elemen lain (misalnya, sebagai respons terhadap gerakan pada Siri Remote) Peristiwa Pembaruan Fokus akan dikirim ke item kehilangan fokus dan item mendapatkan fokus.

Untuk elemen kustom yang mewarisi dari UIView atau UIViewController, Anda dapat mengambil alih beberapa metode untuk bekerja dengan Peristiwa Pembaruan Fokus:

  • DidUpdateFocus - Metode ini akan dipanggil kapan saja tampilan mendapatkan atau kehilangan fokus.
  • ShouldUpdateFocus - Gunakan metode ini untuk menentukan di mana fokus diizinkan untuk dipindahkan.

Untuk meminta agar Mesin Fokus memindahkan fokus kembali ke PreferredFocusedView elemen UI, panggil SetNeedsUpdateFocus metode Pengontrol Tampilan.

Penting

SetNeedsUpdateFocus Panggilan hanya berpengaruh jika Pengontrol Tampilan yang dipanggilnya berisi Tampilan yang saat ini memiliki fokus.

Bekerja dengan Panduan Fokus

Mesin Fokus yang terpasang di tvOS sangat bagus dalam menangani gerakan di antara item yang jatuh pada kisi horizontal dan vertikal. Biasanya, Anda tidak perlu melakukan apa pun selain menambahkan elemen UI ke desain antarmuka Anda dan Focus Engine akan secara otomatis menangani pergerakan antara elemen-elemen tersebut tanpa intervensi pengembang.

Namun, mungkin ada waktu, karena kebutuhan desain UI Anda, ketika elemen UI tidak jatuh pada kisi horizontal dan vertikal dan mungkin tidak dapat diakses karena mereka diagonal satu sama lain. Ini terjadi karena Focus Engine dirancang untuk menangani gerakan Up, Down, Left, dan Right sederhana antara item UI saja.

Ambil tata letak antarmuka pengguna berikut untuk contoh:

Bekerja dengan contoh Panduan Fokus

Karena tombol Info Selengkapnya tidak jatuh pada kisi horizontal dan vertikal dengan tombol Beli tidak akan dapat diakses oleh pengguna. Namun, ini dapat dengan mudah diperbaiki menggunakan Panduan Fokus untuk memberikan petunjuk pergerakan ke Mesin Fokus.

Panduan Fokus (UIFocusGuide) memaparkan area tampilan yang tidak terlihat sebagai Dapat Difokuskan ke Mesin Fokus, sehingga memungkinkan Fokus dialihkan ke tampilan lain.

Jadi, untuk menyelesaikan contoh yang diberikan di atas, kode berikut dapat ditambahkan ke Pengontrol Tampilan untuk membuat Panduan Fokus antara tombol Info Selengkapnya dan Beli :

public UIFocusGuide FocusGuide = new UIFocusGuide ();
...

public override void ViewDidLoad ()
{
    base.ViewDidLoad ();

    // Add Focus Guide to layout
    View.AddLayoutGuide (FocusGuide);

    // Define Focus Guide that will allow the user to move
    // between the More Info and Buy buttons.
    FocusGuide.LeftAnchor.ConstraintEqualTo (BuyButton.LeftAnchor).Active = true;
    FocusGuide.TopAnchor.ConstraintEqualTo (MoreInfoButton.TopAnchor).Active = true;
    FocusGuide.WidthAnchor.ConstraintEqualTo (BuyButton.WidthAnchor).Active = true;
    FocusGuide.HeightAnchor.ConstraintEqualTo (MoreInfoButton.HeightAnchor).Active = true;
}

Pertama, baru UIFocusGuide dibuat dan ditambahkan ke koleksi Panduan Tata Letak Tampilan menggunakan AddLayoutGuide metode .

Selanjutnya, Jangkar Atas, Kiri, Lebar, dan Tinggi Panduan Fokus disesuaikan relatif terhadap tombol Info Selengkapnya dan Beli untuk memosisikannya di antaranya. Lihat:

Contoh Panduan Fokus

Penting juga untuk dicatat bahwa batasan baru diaktifkan saat dibuat dengan mengatur properti mereka Active ke true:

FocusGuide.LeftAnchor.ConstraintEqualTo (...).Active = true;

Dengan Panduan Fokus baru yang dibuat dan ditambahkan ke Tampilan, metode Pengontrol DidUpdateFocus Tampilan dapat ditimpa dan kode berikut ditambahkan untuk berpindah di antara tombol Info Selengkapnya dan Beli :

public override void DidUpdateFocus (UIFocusUpdateContext context, UIFocusAnimationCoordinator coordinator)
{
    base.DidUpdateFocus (context, coordinator);

    // Get next focusable item from context
    var nextFocusableItem = context.NextFocusedView;

    // Anything to process?
    if (nextFocusableItem == null) return;

    // Decide the next focusable item based on the current
    // item with focus
    if (nextFocusableItem == MoreInfoButton) {
        // Move from the More Info to Buy button
        FocusGuide.PreferredFocusedView = BuyButton;
    } else if (nextFocusableItem == BuyButton) {
        // Move from the Buy to the More Info button
        FocusGuide.PreferredFocusedView = MoreInfoButton;
    } else {
        // No valid move
        FocusGuide.PreferredFocusedView = null;
    }
}

Pertama, kode ini mendapatkan NextFocusedView dari UIFocusUpdateContext yang telah diteruskan (context). Jika tampilan ini adalah null, maka tidak ada pemrosesan yang diperlukan dan metode keluar.

Selanjutnya, nextFocusableItem dievaluasi. Jika cocok dengan tombol Info Selengkapnya atau Beli , Fokus dikirim ke tombol yang berlawanan menggunakan properti Panduan PreferredFocusedView Fokus. Contohnya:

// Move from the More Info to Buy button
FocusGuide.PreferredFocusedView = BuyButton;

Jika tidak ada tombol yang merupakan sumber pergeseran Fokus, PreferredFocusedView properti dibersihkan:

// No valid move
FocusGuide.PreferredFocusedView = null;

Bekerja dengan Fokus dalam Koleksi

Saat memutuskan apakah item individual dapat difokuskan dalam UICollectionView atau UITableView, Anda akan mengambil alih metode atau UITableViewDelegate masing-masing.UICollectionViewDelegate Contohnya:

public class CardHandDelegate : UICollectionViewDelegateFlowLayout
{
    ...
    public override bool CanFocusItem (UICollectionView collectionView, NSIndexPath indexPath)
    {
        if (indexPath == null) {
            return false;
        } else {
            var controller = collectionView as CardHandViewController;
            return !controller.Hand [indexPath.Row].IsFaceDown;
        }
    }
}

Metode CanFocusItem mengembalikan true jika item saat ini dapat berada dalam fokus, jika tidak, ia mengembalikan false.

Jika Anda ingin atau UICollectionView untuk mengingat dan memulihkan fokus ke item terakhir saat kehilangan dan mendapatkan kembali fokus, atur properti ke RemembersLastFocusedIndexPathtrue.UITableView

Fokus dan Paralaks

Seperti yang dinyatakan di atas, elemen Antarmuka Pengguna dianggap berada dalam fokus ketika merupakan item saat ini selama peristiwa navigasi. Biasanya ketika item menjadi fokus, ukurannya sedikit meningkat dan ditingkatkan secara visual menggunakan bayangan.

Jika pengguna membuat gerakan melingkar yang lambat pada Siri Remote, Item Terfokus akan bergoyang real time sebagai respons terhadap gerakan ini. Saat sway terjadi, kilau yang disinari diterapkan pada gambarnya membuat permukaan tampak bersinar. Setelah jumlah tidak aktif tertentu, konten yang tidak fokus meredup dan item Terfokus akan tumbuh lebih besar.

Efek ini bekerja sama untuk memberikan koneksi mental antara konten di layar TV dan pengguna yang berinteraksi dengan Apple TV dari sofa.

Di Apple TV, Efek Parallax ini digunakan di seluruh sistem untuk menyampaikan rasa kedalaman dan dinamika 3D ke item yang berfokus. tvOS menggunakan serangkaian Gambar Berlapis transparan yang dipindahkan dan diskalakan secara dinamis untuk menciptakan efek ini.

Gambar Berlapis diperlukan untuk ikon aplikasi tvOS Anda dan didukung untuk konten Top Shelf dinamis. Meskipun tidak diperlukan, Apple sangat menyarankan untuk menerapkan Gambar Berlapis di Item Yang Dapat Difokuskan lainnya di UI aplikasi Anda.

Mengaktifkan Parallax

UIImageView Kontrol (atau kontrol apa pun yang mewarisi dari UIImageView) secara otomatis mendukung Efek Parallax. Secara default, dukungan ini dinonaktifkan, untuk mengaktifkannya, gunakan kode berikut:

myImageView.AdjustsImageWhenAncestorFocused = true;

Dengan properti ini diatur ke true, Tampilan Gambar akan secara otomatis mendapatkan Efek Parallax saat dipilih oleh pengguna dan dalam fokus.

Ringkasan

Artikel ini telah membahas konsep Fokus dan cara penggunaannya untuk menangani Navigasi di Antarmuka Pengguna aplikasi Xamarin.tvOS. Ini memeriksa bagaimana kontrol Navigasi tvOS bawaan menggunakan Fokus, Penyorotan, dan Pilihan untuk menyediakan navigasi. Selanjutnya, ini melihat bagaimana Fokus dapat digunakan dengan Parallax dan Gambar Berlapis untuk memberikan petunjuk visual untuk Status Navigasi saat ini kepada pengguna akhir. Akhirnya, ia memeriksa bekerja dengan Fokus, Pembaruan Fokus, Fokus dalam Koleksi dan Mengaktifkan Parallax.