Menggunakan varian untuk mendesain status visual

Varian menentukan status visual tertentu untuk panel, sehingga satu panel dapat memiliki beberapa representasi visual yang berbeda, seperti status dibuka atau ditutup. Gunakan XML untuk mengonfigurasi varian. Gunakan sub-tag dalam elemen <Panel>.

Setiap tag <Variant> memiliki atribut id wajib untuk mengidentifikasinya secara unik. Tag juga dapat merujuk ke varian induk untuk mewarisi properti. Mekanisme pewarisan ini memungkinkan definisi efisien properti umum di beberapa varian.

Atribut XML

Untuk menentukan status dan transisi, gunakan atribut ini dengan tag <TaskPanel> atau <DecorPanel>.

Atribut Status Deskripsi
id Wajib ID unik varian. ID ini digunakan untuk merujuk ke varian dalam transisi atau sebagai defaultVariant untuk panel.
parent Opsional Menentukan ID varian lain yang propertinya harus diwarisi oleh varian saat ini. Jika properti tidak ditentukan secara eksplisit dalam varian saat ini, properti tersebut akan kembali ke nilai yang ditentukan dalam varian induknya.

Elemen turunan XML

Gunakan elemen opsional ini untuk menentukan karakteristik visual panel saat berada dalam status varian ini.

Elemen turunan Deskripsi
<Visibility> Menentukan apakah panel terlihat atau tersembunyi dan berisi atribut isVisible (boolean).
<Alpha> Menentukan tingkat transparansi panel; berisi atribut alpha (float, 0,0 hingga 1,0).
<Layer> Menetapkan urutan Z panel relatif terhadap panel lain; berisi atribut layer (bilangan bulat). Nilai yang lebih tinggi akan digambar di atas.
<Focus> Menentukan apakah panel dapat memperoleh fokus selama transisi; berisi atribut onTransition (boolean).
<Bounds>

Menentukan area persegi panjang (posisi dan ukuran) panel di layar. Area ini dikontrol oleh atribut seperti kiri, atas, bawah, lebar, dan tinggi.

  • left dan right menentukan jarak dari tepi kiri layar.
  • top dan bottom menentukan jarak dari tepi atas layar.
  • width dan height menentukan lebar dan tinggi persegi panjang dan hanya diperlukan jika left dan right (atau top dan bottom) tidak ditentukan.
  • dimensions dapat ditentukan dalam piksel, DP, persentase, atau referensi resource.

Saat menggunakan persentase, Anda dapat menggunakan atribut offset untuk menerapkan penyesuaian tetap pada batas berbasis persentase — leftOffset, topOffset, rightOffset, dan bottomOffset.

Misalnya, untuk menetapkan bahwa panel menempati 100% tinggi layar sambil mengecualikan bilah navigasi dengan tinggi tetap di bagian bawah, tetapkan tinggi ke 100% dan bottomOffset ke tinggi tetap bilah navigasi. Tindakan ini akan menarik tepi bawah panel ke atas.
<SafeBounds> Menentukan area aman dalam batas panel yang tidak tumpang-tindih dengan potongan layar atau inset, untuk menekankan kompatibilitas aplikasi yang digambar di dalamnya. Atributnya mirip dengan <Bounds>.
<Corner> Menentukan radius untuk sudut panel, sehingga memungkinkan sudut bulat dan berisi atribut radius (bilangan bulat). Sudut tajam adalah default dan tidak perlu ditentukan.
<Insets>

Menentukan inset (padding) untuk panel. Berisi atribut kiri, atas, kanan, bawah. Inset ini dilaporkan ke aplikasi yang diluncurkan dalam panel.

  • left menentukan inset di sisi kiri.
  • right menentukan inset di sisi kanan. Misalnya, inset kanan nol menunjukkan tidak ada inset di sisi kanan.
  • top menentukan inset di sisi atas.
  • bottom menentukan inset di sisi bawah. Misalnya, inset kanan nol menunjukkan tidak ada inset di sisi kanan.
<Background> Memperkenalkan panel dekorasi latar belakang opsional, untuk mencegah efek tembus pandang saat aplikasi dialihkan. Menentukan properti seperti warna dan alfa untuk lapisan dekorasi ini. Properti lapisan dekorasi, seperti batas dan lapisan, secara default menggunakan properti varian jika belum ditetapkan.

Kode contoh

<Variant id="@id/opened">
    <Visibility isVisible="true"/>
    <Bounds left="0dp"
            top="0dp"
            right="100%"
            bottom="100%"
            bottomOffset="100dp"/>
    <Alpha value="1.0"/>
    <Layer value="10"/>
    <Focus onTransition="true"/>
    <Corner radius="24dp"/>
    <Insets left="16dp" top="0dp" right="16dp" bottom="48dp"/>
    <Background color="@color/app_background" alpha="0.9"/>
</Variant>

Menginterpolasi properti visual

Gunakan KeyFrameVariant untuk menginterpolasi properti visual. Ekstensi variant khusus ini didasarkan pada nilai fraksional berkelanjutan (0 hingga 1) yang memungkinkan transisi dinamis yang lancar dan didorong oleh input berkelanjutan, seperti operasi penarikan saat status panel berubah secara dinamis dengan jumlah penarikan.

Atribut XML

KeyFrameVariant tidak memiliki atribut. Tag <KeyFrameVariant> berisi informasi yang diperlukan untuk menentukan KeyFrameVariant.

Elemen turunan XML

KeyFrameVariant berisi satu atau beberapa tag turunan <KeyFrame>. Setiap <KeyFrame> memiliki atribut framePosition (0-100) dan mengacu pada atribut varian (ID varian lain). keyframes ini menentukan status panel pada titik tertentu dalam transisi berkelanjutan.

Kode Samole

<KeyFrameVariant id="@id/panel_resizing">
    <KeyFrame framePosition="0" variant="@id/minimized"/>
    <KeyFrame framePosition="75" variant="@id/opened"/>
    <KeyFrame framePosition="100" variant="@id/expanded"/>
</KeyFrameVariant>
Sebelumnya
Mengonfigurasi panel
Berikutnya
Mengonfigurasi transisi