Ringkasan Bab 21. Transformasi
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.
Tampilan Xamarin.Forms muncul di layar di lokasi dan ukuran yang ditentukan oleh induknya, yang umumnya merupakan Layout atau Layout<View> turunan. Transformasi adalah Xamarin.Forms fitur yang dapat memodifikasi lokasi, ukuran, atau bahkan orientasi tersebut.
Xamarin.Forms mendukung tiga jenis transformasi dasar:
- Terjemahan — menggeser elemen secara horizontal atau vertikal
- Skala — ubah ukuran elemen
- Rotasi — putar elemen di sekitar titik atau sumbu
Dalam Xamarin.Forms, penskalan isotropik; mempengaruhi lebar dan tinggi secara seragam. Rotasi didukung baik pada permukaan dua dimensi layar maupun dalam ruang 3D. Tidak ada transformasi miring (atau belaka), dan tidak ada transformasi matriks umum.
Transformasi didukung dengan delapan properti jenis double yang VisualElement ditentukan oleh kelas:
Semua properti ini didukung oleh properti yang dapat diikat. Mereka dapat menjadi target pengikatan dan gaya data. Bab 22. Animasi menunjukkan bagaimana properti ini dapat dianimasikan, tetapi beberapa sampel dalam bab ini menunjukkan bagaimana Anda dapat menganimasikannya menggunakan timerXamarin.Forms.
Mengubah properti hanya memengaruhi bagaimana elemen dirender, dan tidak memengaruhi bagaimana elemen dirasakan dalam tata letak.
Transformasi terjemahan
Nilai bukan nol dari TranslationX properti dan TranslationY menggeser elemen secara horizontal atau vertikal.
Program TranslationDemo memungkinkan Anda untuk bereksperimen dengan properti ini dengan dua Slider elemen yang mengontrol TranslationXTranslationY dan properti dari Frame. Transformasi juga mempengaruhi semua anak dari itu Frame.
Efek teks
Salah satu penggunaan umum properti terjemahan adalah mengimbangi sedikit penyajian teks. Ini ditunjukkan dalam sampel TextOffsets:
Efek lain adalah merender beberapa salinan untuk Label menyerupai blok 3D, seperti yang ditunjukkan dalam sampel BlockText .
Lompatan dan animasi
Sampel ButtonJump menggunakan terjemahan untuk memindahkan Button setiap kali diketuk, tetapi niat utamanya adalah untuk menunjukkan bahwa Button input pengguna penerima di lokasi tempat tombol dirender.
Sampel ButtonGlide serupa tetapi menggunakan timer untuk menganimasikan Button dari satu titik ke titik lainnya.
Transformasi skala
Scale Transformasi dapat meningkatkan atau mengurangi ukuran elemen yang dirender. Nilai default adalah 1. Nilai 0 menyebabkan elemen tidak terlihat. Nilai negatif menyebabkan elemen tampak diputar 180 derajat. Properti Scale tidak memengaruhi Width properti atau Height elemen. Nilai-nilai tersebut tetap sama.
Anda dapat bereksperimen dengan Scale properti menggunakan sampel SimpleScaleDemo .
Sampel ButtonScaler menunjukkan perbedaan antara menganimasikan Scale properti dari dan Button menganimasikan FontSize properti. Properti FontSize memengaruhi bagaimana Button dirasakan dalam tata letak; Scale properti tidak.
Sampel ScaleToSize menghitung properti yang diterapkan ke Label elemen untuk membuatnya sebesar mungkin sambil tetap pas Scale di dalam halaman.
Penahanan skala
Elemen yang diskalakan dalam tiga sampel sebelumnya semuanya telah meningkat atau menurun ukurannya relatif terhadap pusat elemen. Dengan kata lain, elemen meningkatkan atau mengurangi ukuran yang sama di semua arah. Hanya titik di tengah elemen yang tetap berada di lokasi yang sama selama penskalaan.
Anda dapat mengubah pusat penskalaan dengan mengatur AnchorX properti dan AnchorY . Properti ini relatif terhadap elemen itu sendiri. Untuk AnchorX, nilai 0 mengacu pada sisi kiri elemen dan 1 mengacu pada sisi kanan. Demikian pula untuk AnchorY, 0 adalah yang teratas dan 1 adalah bagian bawah. Kedua properti memiliki nilai default 0,5, yang merupakan pusat.
Sampel AnchoredScaleDemo memungkinkan Anda untuk bereksperimen dengan AnchorX properti dan AnchorY serta Scale properti .
Di iOS, menggunakan nilai AnchorX dan AnchorY properti non-default umumnya tidak kompatibel dengan perubahan orientasi telepon.
Transformasi rotasi
Properti Rotation ditentukan dalam derajat dan menunjukkan rotasi searah jaring jam di sekitar titik elemen yang ditentukan oleh AnchorX dan AnchorY. PlaneRotationDemo memungkinkan Anda untuk bereksperimen dengan ketiga properti ini.
Efek teks yang diputar
Sampel BoxViewCircle menunjukkan matematika yang diperlukan untuk menggambar lingkaran menggunakan 64 elemen kecil yang diputar BoxView .
Sampel RotatedText menampilkan beberapa Label elemen dengan string teks yang sama diputar agar muncul seperti spoke.
Sampel CircularText menampilkan string teks yang tampak membungkus lingkaran.
Jam analog
Pustaka Xamarin.FormsBook.Toolkit berisi AnalogClockViewModel kelas yang menghitung sudut untuk tangan jam. Untuk menghindari dependensi platform di ViewModel, kelas menggunakan Task.Delay daripada timer untuk menemukan nilai baru DateTime .
Juga termasuk dalam Xamarin.FormsBook.Toolkit adalah SecondTickConverter kelas yang mengimplementasikan IValueConverter dan berfungsi untuk membulatkan sudut kedua ke detik terdekat.
MinimalBoxViewClock menggunakan tiga elemen berputar BoxView untuk menggambar jam analog.
BoxViewClock menggunakan BoxView untuk grafis yang lebih luas, termasuk tanda centang di sekitar wajah jam, dan tangan yang memutar sedikit jarak dari ujungnya:
Selain kelas SecondBackEaseConverter di Xamarin.FormsBook.Toolkit menyebabkan tangan kedua tampak menarik kembali sedikit sebelum melompat ke depan, dan kemudian bergerak kembali ke posisi yang benar.
Penggerak vertikal?
Sampel VerticalSliders menunjukkan bahwa Slider elemen dapat diputar 90 derajat dan masih berfungsi. Namun, sulit untuk memposisikan elemen-elemen yang diputar Slider ini karena dalam tata letak elemen tersebut masih tampak horizontal.
Rotasi 3D-ish
Properti RotationX tampaknya memutar elemen di sekitar sumbu X 3D sehingga bagian atas dan bawah elemen tampaknya bergerak ke arah atau menjauh dari penampil. Demikian pula, RotationY tampaknya memutar elemen di sekitar sumbu Y untuk membuat sisi kiri dan kanan elemen tampaknya bergerak ke arah atau menjauh dari penampil.
Properti AnchorX mempengaruhi RotationY tetapi tidak RotationX. Properti AnchorY mempengaruhi RotationX tetapi tidak RotationY. Anda dapat bereksperimen dengan sampel ThreeDeeRotationDemo untuk menjelajahi interaksi properti ini.
Sistem koordinat 3D yang disiratkan oleh Xamarin.Forms adalah tangan kiri. Jika Anda mengarahkan forefinger tangan kiri Anda ke arah meningkatkan koordinat X (ke kanan) dan jari tengah Anda ke arah meningkatkan koordinat Y (ke bawah), maka jempol Anda mengarah ke arah peningkatan koordinat Z (keluar dari layar).
Selain itu, untuk salah satu dari tiga sumbu, jika Anda mengarahkan ibu jari ke arah peningkatan nilai, maka kurva jari Anda menunjukkan arah rotasi untuk sudut berputar positif.