Görsel durum tasarlamak için varyant kullanma

Varyant, bir panel için belirli bir görsel durumu tanımlar. Böylece tek bir panelin açık veya kapalı durum gibi birden fazla farklı görsel temsili olabilir. Varyantı yapılandırmak için XML'yi kullanın. <Panel> öğesinde bir alt etiket kullanın.

Her <Variant> etiketinin, benzersiz şekilde tanımlanması için zorunlu bir id özelliği vardır. Etiket, özellikleri devralmak için bir üst varyanta da referans verebilir. Bu devralma mekanizması, birden fazla varyantta ortak özelliklerin verimli bir şekilde tanımlanmasına olanak tanır.

XML özellikleri

Durumları ve geçişleri tanımlamak için bu özellikleri <TaskPanel> veya <DecorPanel> etiketiyle birlikte kullanın.

Özellik Durum Açıklama
id Zorunlu Varyantın benzersiz tanımlayıcısı. Bu kimlik, geçişlerde varyanta başvurmak veya bir panel için defaultVariant olarak kullanılır.
parent İsteğe bağlı Mevcut varyantın özellikleri devralması gereken başka bir varyantın kimliğini belirtir. Bir özellik mevcut varyantta açıkça tanımlanmamışsa üst varyantta tanımlanan değere geri döner.

XML alt öğeleri

Bu varyant durumundayken panelin görsel özelliklerini belirtmek için bu isteğe bağlı öğeleri kullanın.

Alt öğe Açıklama
<Visibility> Panelin görünür mü yoksa gizli mi olduğunu belirtir ve bir isVisible özelliği (boolean) içerir.
<Alpha> Panelin şeffaflık düzeyini belirtir; alpha özelliğini (kayan, 0,0 ile 1,0 arasında) içerir.
<Layer> Panelin diğer panellere göre Z sırasını ayarlar; layer özelliği (tam sayı) içerir. Daha yüksek değerler üstte çizilir.
<Focus> Panelin geçiş sırasında odaklanıp odaklanamayacağını belirtir. onTransition özelliğini (boolean) içerir.
<Bounds>

Ekranda panelin dikdörtgen alanını (konum ve boyut) tanımlar. Bu alan; sol, üst, alt, genişlik ve yükseklik gibi özelliklerle kontrol edilir.

  • left ve right, ekranın sol kenarından olan mesafeyi belirtir.
  • top ve bottom, ekranın üst kenarından olan mesafeyi belirtir.
  • width ve height, dikdörtgenin genişliğini ve yüksekliğini belirtir. Bu parametreler yalnızca hem left hem de right (veya top ve bottom) belirtilmediğinde gereklidir.
  • dimensions piksel, DP, yüzde veya kaynak referansları olarak belirtilebilir.

Yüzdeleri kullanırken yüzde tabanlı sınırlara sabit ayarlamalar uygulamak için dengeleme özelliklerini (leftOffset, topOffset, rightOffset ve bottomOffset) kullanabilirsiniz.

Örneğin, bir panelin ekran yüksekliğinin% 100'ünü kaplamasını sağlamak ancak alttaki sabit yükseklikteki gezinme çubuğunu hariç tutmak için yüksekliği% 100'e, bottomOffset değerini ise gezinme çubuğunun sabit yüksekliğine ayarlayın. Bu işlem, panelin alt kenarını yukarı çeker.
<SafeBounds> Panelin sınırları içinde, ekran kesikleri veya iç kısımlarla çakışmayan güvenli bir alan belirtir. Bu alan, içinde çizilen uygulamaların uyumluluğunu vurgulamak için kullanılır. Özellikleri <Bounds> ile benzerdir.
<Corner> Panelin köşeleri için yarıçapı tanımlar. Yuvarlatılmış köşelere izin verir ve bir yarıçap özelliği (tam sayı) içerir. Keskin köşe varsayılandır ve tanımlanması gerekmez.
<Insets>

Panelin iç boşluklarını (dolgu) belirtir. Sol, üst, sağ ve alt özellikleri içerir. Bu yerleşimler, panelde başlatılan uygulamalara bildirilir.

  • left, sol taraftaki girintiyi belirtir.
  • right sağ taraftaki girintiyi belirtir. Örneğin, sağda sıfır ek, sağ tarafta ek olmadığını gösterir.
  • top üst taraftaki ek boşluğu belirtir.
  • bottom, alt taraftaki iç boşluğu belirtir. Örneğin, sağda sıfır ek, sağ tarafta ek olmadığını gösterir.
<Background> Uygulamalar arasında geçiş yapıldığında şeffaf efektlerin oluşmasını önlemek için isteğe bağlı bir arka plan dekoru paneli sunar. Bu dekor katmanı için renk ve alfa gibi özellikleri tanımlar. Sınırlar ve katman gibi dekor katmanının özellikleri, önceden ayarlanmamışsa varsayılan olarak varyantın özelliklerine ayarlanır.

Örnek kod

<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>

Görsel özellikleri enterpolasyonla belirleme

Görsel özellikleri enterpole etmek için KeyFrameVariant kullanın. variant'nın bu özel uzantısı, sürekli girişle yönlendirilen sorunsuz ve dinamik geçişlere olanak tanıyan sürekli bir kesirli değere (0-1) dayanır. Örneğin, panelin durumu sürükleme miktarıyla dinamik olarak değiştiğinde sürükleme işlemi gibi.

XML özellikleri

KeyFrameVariant öğesinin özellikleri yok. <KeyFrameVariant> etiketi, KeyFrameVariant tanımlamak için gereken bilgileri içerir.

XML alt öğeleri

KeyFrameVariant, bir veya daha fazla <KeyFrame> alt etiketi içerir. Her birinin <KeyFrame> özelliği (0-100) vardır ve bir varyant özelliğini (başka bir varyantın kimliği) ifade eder.framePosition Bu keyframes, panelin sürekli geçişteki belirli noktalardaki durumunu tanımlar.

Örnek kod

<KeyFrameVariant id="@id/panel_resizing">
    <KeyFrame framePosition="0" variant="@id/minimized"/>
    <KeyFrame framePosition="75" variant="@id/opened"/>
    <KeyFrame framePosition="100" variant="@id/expanded"/>
</KeyFrameVariant>
Önceki
Panel yapılandırma
Sonraki
Geçişleri yapılandırma