Bekerja dengan tombol tvOS di Xamarin

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 adalah langsung di Mac yang menjalankan Penyusun Antarmuka Xcode. Untuk informasi selengkapnya, lihat Mendesain antarmuka pengguna dengan Xcode.

Gunakan instans UIButton kelas untuk membuat tombol yang dapat dipilih dan dapat difokuskan di jendela tvOS. Saat pengguna memilih tombol, pengguna mengirim pesan Tindakan ke objek target memungkinkan aplikasi Xamarin.tvOS Anda merespons input pengguna.

Contoh tombol

Untuk informasi selengkapnya tentang bekerja dengan Fokus dan menavigasi dengan Siri Remote, silakan lihat dokumentasi Bekerja dengan Navigasi dan Fokus dan Siri Remote dan Bluetooth Controllers .

Tentang Tombol

Di tvOS, Tombol digunakan untuk tindakan khusus aplikasi dan mungkin berisi judul, ikon, atau keduanya. Saat pengguna menavigasi Antarmuka Pengguna aplikasi menggunakan Siri Remote, Fokus bergeser ke Tombol yang diberikan sehingga mengubah warna teks dan latar belakang. Bayangan juga diterapkan ke Tombol yang menambahkan efek 3D membuatnya tampak naik di atas Antarmuka Pengguna lainnya.

Contoh tombol

Apple memiliki saran berikut untuk bekerja dengan Tombol:

  • Gunakan Judul atau Ikon - Meskipun ikon dan judul dapat disertakan dalam Tombol, spasi dibatasi sehingga cobalah untuk tidak menggabungkan keduanya.
  • Tandai Dengan Jelas Tombol Destruktif - Jika Tombol melakukan tindakan destruktif (seperti menghapus file), tandai dengan jelas seperti menggunakan teks dan/atau ikon. Tindakan destruktif harus selalu menyajikan Pemberitahuan yang meminta pengguna untuk membatasi tindakan.
  • Jangan Gunakan Tombol Kembali - Tombol Menu pada Siri Remote digunakan untuk kembali ke layar sebelumnya. Satu pengecualian untuk aturan ini adalah untuk Pembelian Dalam Aplikasi atau tindakan destruktif di mana tombol Batalkan harus ditampilkan.

Untuk informasi selengkapnya tentang bekerja dengan Fokus dan Navigasi, silakan lihat dokumentasi Bekerja dengan Navigasi dan Fokus kami.

Ikon Tombol

Apple menyarankan agar Anda menggunakan gambar sederhana dan sangat dapat dikenali untuk ikon Tombol Anda. Ikon yang terlalu kompleks sulit dikenali di layar TV di seluruh ruangan di sofa, jadi cobalah untuk menggunakan representasi paling sederhana yang mungkin untuk mendapatkan ide. Jika memungkinkan, gunakan gambar standar dan terkenal untuk ikon (seperti kaca pembesar untuk pencarian).

Judul Tombol

Apple memiliki saran berikut saat membuat judul untuk Tombol Anda:

  • Perlihatkan Teks Deskriptif Di Bawah Tombol Ikon - Jika memungkinkan, letakkan teks yang jelas dan deskriptif di bawah ini hanya tombol untuk mendapatkan tujuan Tombol lebih lanjut di seluruh.
  • Gunakan Frasa Kata Kerja atau Kata Kerja untuk Judul - Sebutkan dengan jelas tindakan yang akan terjadi saat pengguna mengklik Tombol.
  • Gunakan Kapitalisasi Gaya Judul - Dengan pengecualian artikel, konjungsi, atau preposisi (empat huruf atau kurang), setiap kata judul Tombol harus dikapitalisasi.
  • Gunakan Judul Pendek, Ke Titik - Gunakan verbiage sesingkat mungkin untuk menjelaskan tindakan Tombol.

Tombol dan Papan Cerita

Cara term mudah untuk bekerja dengan tombol di aplikasi Xamarin.tvOS adalah dengan menambahkannya ke UI aplikasi menggunakan Xamarin Designer untuk iOS.

  1. Di Penjelajah Solusi, klik Main.storyboard dua kali file dan buka untuk pengeditan.

  2. Seret Tombol dari Pustaka dan letakkan di Tampilan:

    Tombol

  3. Di Penjelajah Properti, Anda bisa menyesuaikan beberapa properti tombol seperti Judul dan Warna Teksnya:

    Properti tombol

  4. Selanjutnya, beralihlah ke Tab Peristiwa dan kawat peristiwa dari Tombol dan panggil ButtonPressed:

    Tab Kejadian

  5. Anda akan secara otomatis dialihkan ke ViewController.cs tampilan tempat Anda dapat menempatkan Tindakan baru dalam kode Anda menggunakan tombol panah Atas dan Bawah :

    Menempatkan Tindakan baru dalam kode

  6. Tekan Enter untuk memilih lokasi:

    Editor kode

  7. Simpan perubahan ke semua file.

Selama properti tombol Enabled dan true tidak tercakup oleh kontrol atau tampilan lain, properti dapat dibuat menjadi item dalam fokus menggunakan Siri Remote. Jika pengguna memilih tombol dan mengklik Permukaan Sentuh, tindakan yang ButtonPressed ditentukan di atas akan dijalankan.

Penting

Meskipun dimungkinkan untuk menetapkan tindakan seperti TouchUpInsideUIButton ke saat membuat Penanganan Aktivitas, tindakan tersebut tidak akan pernah dipanggil karena Apple TV tidak memiliki layar sentuh atau mendukung acara sentuh. Anda harus selalu menggunakan Jenis Tindakan default saat membuat Tindakan untuk elemen antarmuka pengguna tvOS.

Untuk informasi selengkapnya tentang bekerja dengan Storyboards, silakan lihat Panduan Mulai Cepat Hello, tvOS kami.

Tombol dan Kode

Secara opsional, UIButton dapat dibuat dalam kode C# dan ditambahkan ke tampilan aplikasi tvOS. Contohnya:

var button = new UIButton(UIButtonType.System);
button.Frame = new CGRect (25, 25, 300, 150);
button.SetTitle ("Hello", UIControlState.Normal);
button.AllEvents += (sender, e) => {
    // Do something when the button is clicked
    ...
};
View.AddSubview (button);

Saat Anda membuat baru UIButton dalam kode, Anda menentukannya UIButtonType sebagai salah satu hal berikut:

  • Sistem - Ini adalah jenis tombol standar yang disajikan oleh tvOS dan merupakan jenis yang paling sering Anda gunakan.
  • DetailDisclosure - Menyajikan jenis tombol "kecilkan" yang digunakan untuk menyembunyikan atau menampilkan informasi terperinci.
  • InfoDark - Tombol info terperinci gelap menampilkan "i" dalam lingkaran.
  • InfoLight - Tombol info terperinci ringan menampilkan "i" dalam lingkaran.
  • AddContact - Tampilkan tombol sebagai tombol Tambahkan Kontak.
  • Kustom - Memungkinkan Anda menyesuaikan beberapa sifat tombol.

Selanjutnya, Anda menentukan ukuran dan lokasi tombol di layar. Contoh:

button.Frame = new CGRect (25, 25, 300, 150);

Kemudian, atur judul untuk tombol . UIButtons berbeda dari sebagian besar UIKit kontrol karena mereka memiliki Status sehingga Anda tidak bisa hanya mengubah judul, Anda harus mengubahnya untuk tertentu UIControlState. Contohnya:

button.SetTitle ("Hello", UIControlState.Normal);

Selanjutnya, gunakan AllEvents peristiwa untuk melihat kapan pengguna telah mengklik tombol . Contoh:

button.AllEvents += (sender, e) => {
    // Do something when the button is clicked
    ...
};

Terakhir, Anda menambahkan tombol ke tampilan untuk menampilkannya:

View.AddSubview (button);

Penting

Meskipun dimungkinkan untuk menetapkan tindakan seperti TouchUpInside ke UIButton, tindakan tersebut tidak akan pernah dipanggil karena Apple TV tidak memiliki layar sentuh atau mendukung acara sentuh. Anda harus selalu menggunakan peristiwa seperti AllEvents atau PrimaryActionTriggered.

Menata Tombol

tvOS menyediakan beberapa properti yang UIButton dapat digunakan untuk memberikan judul dan gayanya dengan hal-hal seperti warna latar belakang dan gambar.

Judul Tombol

Seperti yang kita lihat di atas, UIButtons berbeda dari kebanyakan UIKit kontrol karena mereka memiliki Status sehingga Anda tidak bisa hanya mengubah judul, Anda harus mengubahnya untuk diberikan UIControlState. Contohnya:

button.SetTitle ("Hello", UIControlState.Normal);

Anda dapat mengatur warna judul untuk tombol menggunakan SetTitleColor metode . Contohnya:

button.SetTitleColor (UIColor.White, UIControlState.Normal);

Dan Anda dapat menyesuaikan bayangan judul menggunakan SetTitleShadowColor. Contohnya:

button.SetTitleShadowColor(UIColor.Black, UIControlState.Normal);

Anda dapat mengatur bayangan judul untuk berubah dari Terukir ke Timbul saat tombol disorot menggunakan kode berikut:

button.ReverseTitleShadowWhenHighlighted = true;

Selain itu, Anda dapat menggunakan teks yang diatribusikan sebagai judul tombol. Contohnya:

var normalAttributedTitle = new NSAttributedString (buttonTitle, foregroundColor: UIColor.Blue, strikethroughStyle: NSUnderlineStyle.Single);
myButton.SetAttributedTitle (normalAttributedTitle, UIControlState.Normal);

var highlightedAttributedTitle = new NSAttributedString (buttonTitle, foregroundColor: UIColor.Green, strikethroughStyle: NSUnderlineStyle.Thick);
myButton.SetAttributedTitle (highlightedAttributedTitle, UIControlState.Highlighted);

Gambar Tombol

Dapat UIButton memiliki gambar yang melekat padanya dan dapat menggunakan gambar sebagai latar belakangnya.

Untuk mengatur gambar latar belakang tombol untuk tertentu UIControlState, gunakan kode berikut:

button.SetBackgroundImage(UIImage.FromFile("my image.png"), UIControlState.Normal);

Atur AdjustsImageWhenHiglighted properti ke true untuk menggambar gambar lebih terang saat tombol disorot (ini adalah default). Atur AdjustsImageWhenDisabled properti ke true untuk menggambar gambar lebih gelap saat tombol dinonaktifkan (sekali lagi, ini adalah default).

Untuk mengatur gambar yang ditampilkan pada tombol, gunakan kode berikut:

button.SetImage(UIImage.FromFile("my image.png"), UIControlState.Normal);

TintColor Gunakan properti untuk mengatur warna yang diterapkan ke judul dan gambar tombol. Untuk tombol jenis Custom , properti ini tidak berpengaruh, Anda harus mengimplementasikan perilaku sendiri TintColor .

Ringkasan

Artikel ini telah membahas merancang dan bekerja dengan tombol di dalam aplikasi Xamarin.tvOS. Ini menunjukkan cara bekerja dengan tombol di iOS Designer dan cara membuat tombol dalam kode C#. Akhirnya, ini menunjukkan cara memodifikasi judul tombol dan mengubah gaya dan penampilannya.

  • Last updated on