Bagikan melalui

Ringkasan Bab 15. Antarmuka interaktif

  • Artikel

Catatan

Buku ini diterbitkan pada musim semi 2016, dan belum diperbarui sejak saat itu. Ada banyak dalam buku yang tetap berharga, tetapi beberapa materi sudah kedaluarsa, dan beberapa topik tidak lagi sepenuhnya benar atau lengkap.

Bab ini mengeksplorasi delapan View turunan yang memungkinkan interaksi dengan pengguna.

Lihat gambaran umum

Xamarin.Forms berisi 20 kelas instans yang berasal dari View tetapi tidak Layout. Enam di antaranya telah dibahas dalam bab-bab sebelumnya:

Delapan tampilan dalam bab ini secara efektif memungkinkan pengguna berinteraksi dengan jenis data .NET dasar:

Jenis Data Tampilan
Double Slider, Stepper
Boolean Switch
String Entry, , EditorSearchBar
DateTime DatePicker, TimePicker

Anda dapat menganggap tampilan ini sebagai representasi interaktif visual dari jenis data yang mendasar. Konsep ini dieksplorasi lebih lanjut pada bab berikutnya, Bab 16. Pengikatan data.

Enam tampilan tersisa tercakup dalam bab-bab berikut:

Penggunjuk dan stepper

Baik Slider dan Stepper izinkan pengguna untuk memilih nilai numerik dari rentang. Slider adalah rentang berkelanjutan sementara Stepper melibatkan nilai diskrit.

Dasar-dasar pengguncuran

Slider adalah bilah horizontal yang mewakili rentang nilai dari minimum di sebelah kiri ke maksimum di sebelah kanan. Ini mendefinisikan tiga properti publik:

  • Value jenis double, nilai default 0
  • Minimum jenis double, nilai default 0
  • Maximum jenis double, nilai default 1

Properti yang dapat diikat yang mendukung properti ini memastikan bahwa properti tersebut konsisten:

  • Untuk ketiga properti, coerceValue metode yang ditentukan untuk properti yang dapat diikat memastikan antara ValueMinimum dan Maximum.
  • Metode validateValue pada MinimumProperty mengembalikan false jika Minimum diatur ke nilai yang lebih besar dari atau sama dengan Maximum, dan serupa untuk MaximumProperty. false Mengembalikan dari validateValue metode menyebabkan dinaikkanArgumentException.

SliderValueChanged mengaktifkan peristiwa dengan ValueChangedEventArgs argumen ketika Value properti berubah, baik secara terprogram atau ketika pengguna memanipulasi Slider.

Sampel SliderDemo menunjukkan penggunaan sederhana dari Slider.

Jebakan umum

Baik dalam kode maupun di XAML, Minimum properti dan Maximum diatur dalam urutan yang Anda tentukan. Pastikan untuk menginisialisasi properti ini sehingga Maximum selalu lebih besar dari Minimum. Jika tidak, pengecualian akan diajukan.

Menginisialisasi Slider properti dapat menyebabkan Value properti berubah dan ValueChanged peristiwa diaktifkan. Anda harus memastikan bahwa penanganan Slider aktivitas tidak mengakses tampilan yang belum dibuat selama inisialisasi halaman.

Peristiwa ValueChanged tidak diaktifkan selama Slider inisialisasi kecuali Value properti berubah. Anda dapat memanggil ValueChanged handler langsung dari kode.

Pilihan warna pengguncuran

Program RgbSliders berisi tiga Slider elemen yang memungkinkan Anda memilih warna secara interaktif dengan menentukan nilai RGB-nya:

Cuplikan layar tiga slider R G B

Sampel TextFade menggunakan dua Slider elemen untuk memindahkan dua Label elemen di seluruh AbsoluteLayout dan memudar satu ke elemen lainnya.

Perbedaan Stepper

menentukan Stepper properti dan peristiwa yang sama seperti Slider tetapi properti diinisialisasi Maximum ke 100 dan Stepper menentukan properti keempat:

  • Increment jenis double, diinisialisasi ke 1

Secara visual, Stepper terdiri dari dua tombol berlabel - dan +. Menekan – berkurang ValueIncrement hingga minimum Minimum. Menekan + meningkat Value hingga Increment maksimum Maximum.

Ini ditunjukkan oleh sampel StepperDemo.

Beralih dan Kotak Centang

memungkinkan Switch pengguna untuk menentukan nilai Boolean.

Beralih dasar-dasar

Secara visual, Switch terdiri dari tombol yang dapat dinonaktifkan dan diaktifkan. Kelas mendefinisikan satu properti:

Switch mendefinisikan satu peristiwa:

Program SwitchDemo menunjukkan Switch.

Kotak Centang tradisional

Beberapa pengembang mungkin lebih suka yang lebih tradisional CheckBox daripada Switch. Pustaka Xamarin.FormsBook.Toolkit berisi CheckBox kelas yang berasal dari ContentView. CheckBox diimplementasikan oleh file CheckBox.xaml dan CheckBox.xaml.cs . CheckBoxmendefinisikan tiga properti (Text, , dan IsChecked) dan suatu CheckedChangedFontSizeperistiwa.

Sampel CheckBoxDemo menunjukkan ini CheckBox.

Mengetik teks

Xamarin.Forms menentukan tiga tampilan yang memungkinkan pengguna memasukkan dan mengedit teks:

  • Entry untuk satu baris teks
  • Editor untuk beberapa baris teks
  • SearchBar untuk satu baris teks untuk tujuan pencarian.

Entry dan Editor berasal dari InputView, yang berasal dari View. SearchBar berasal langsung dari View.

Keyboard dan fokus

Pada ponsel dan tablet tanpa keyboard fisik, Entryelemen , , Editordan SearchBar semuanya menyebabkan keyboard virtual muncul. Kehadiran keyboard ini pada layar terkait dengan fokus input. Tampilan harus memiliki IsVisible properti dan IsEnabled yang diatur ke untuk true mendapatkan fokus input.

Dua metode, satu properti baca-saja, dan dua peristiwa terlibat dengan fokus input. Ini semua didefinisikan oleh VisualElement:

  • Metode Focus ini mencoba mengatur fokus input ke elemen dan mengembalikan true jika berhasil
  • Metode Unfocus menghapus fokus input dari elemen
  • Properti IsFocused baca-saja menunjukkan apakah elemen memiliki fokus input
  • Peristiwa menunjukkan Focused kapan elemen mendapatkan fokus input
  • Peristiwa Unfocused menunjukkan kapan elemen kehilangan fokus input

Memilih Keyboard

Kelas InputView dari mana Entry dan Editor turunan hanya mendefinisikan satu properti:

Ini menunjukkan jenis keyboard yang ditampilkan. Beberapa keyboard dioptimalkan untuk URI atau angka.

Kelas Keyboard memungkinkan penentuan keyboard dengan metode statis Keyboard.Create dengan argumen jenis KeyboardFlags, enumerasi dengan bendera bit berikut:

Saat menggunakan multibaris Editor saat paragraf atau lebih teks diharapkan, panggilan Keyboard.Create adalah pendekatan yang baik untuk memilih keyboard. Untuk baris Entrytunggal , properti Keyboard baca-saja statis berikut berguna:

KeyboardTypeConverter memungkinkan menentukan properti ini di XAML seperti yang ditunjukkan oleh program EntryKeyboards.

Properti entri dan peristiwa

Baris Entry tunggal menentukan properti berikut:

juga Entry mendefinisikan dua peristiwa:

  • TextChangedTextChangedEventArgs dengan objek, diaktifkan setiap kali Text properti berubah
  • Completed, diaktifkan ketika pengguna selesai dan keyboard dimatikan. Pengguna menunjukkan penyelesaian dengan cara khusus platform

Sampel QuadraticEquations menunjukkan dua peristiwa ini.

Perbedaan Editor

Multibaris Editor mendefinisikan properti dan Font yang sama Text tetapi Entry bukan properti lainnya. Editor juga mendefinisikan dua properti yang sama dengan Entry.

JustNotes adalah program pembuatan catatan bentuk bebas yang menyimpan dan memulihkan konten Editor.

SearchBar tidak berasal dari InputView, sehingga tidak memiliki Keyboard properti. Tetapi ia memiliki semua Textproperti , , Fontdan Placeholder yang Entry mendefinisikan. Selain itu, SearchBar menentukan tiga properti tambahan:

Tombol batal khusus platform menghapus teks. juga SearchBar memiliki tombol pencarian khusus platform. Menekan salah satu tombol tersebut akan memunculkan salah satu dari dua peristiwa yang SearchBar menentukan:

Sampel SearchBarDemo menunjukkan SearchBar.

Pilihan tanggal dan waktu

Tampilan DatePicker dan TimePicker menerapkan kontrol khusus platform yang memungkinkan pengguna menentukan tanggal atau waktu.

Pemicu Tanggal

DatePicker menentukan empat properti:

  • MinimumDate jenis DateTime, diinisialisasi ke 1 Januari 1900
  • MaximumDate jenis DateTime, diinisialisasi ke 31 Desember 2100
  • Date jenis DateTime, diinisialisasi ke DateTime.Today
  • Format jenis string, string pemformatan .NET diinisialisasi ke "d", pola tanggal pendek, menghasilkan tampilan tanggal seperti "20/7/1969" di AS.

Anda dapat mengatur DateTime properti di XAML dengan mengekspresikan properti sebagai elemen properti dan menggunakan format tanggal pendek yang invarian budaya ("20/7/1969").

Sampel DaysBetweenDates menghitung jumlah hari antara dua tanggal yang dipilih oleh pengguna.

TimePicker (atau timeSpanPicker?)

TimePicker mendefinisikan dua properti dan tanpa peristiwa:

  • Time berjenis TimeSpan daripada DateTime, menunjukkan waktu berlalu sejak tengah malam
  • Format jenis string, string pemformatan .NET diinisialisasi ke "t", pola waktu singkat, menghasilkan tampilan waktu seperti "1:45 PM" di AS.

Program SetTimer menunjukkan cara menggunakan TimePicker untuk menentukan waktu untuk timer. Program ini hanya berfungsi jika Anda menyimpannya di latar depan.

SetTimer juga menunjukkan menggunakan DisplayAlert metode Page untuk menampilkan kotak pemberitahuan.