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ı, ortak özelliklerin birden fazla varyantta 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

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

Alt öğe Açıklama
<Visibility> Panelin görünür veya gizli olup olmadığını 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ğini (tam sayı) içerir. Daha yüksek değerler üstte gösterilir.
<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 ve 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üzdeye dayalı 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öşelerinin yarıçapını 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>

Panel için iç boşlukları (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 iç kenar, sağ tarafta iç kenar olmadığını gösterir.
  • top üst taraftaki iç boşluğu belirtir.
  • bottom, alt taraftaki iç boşluğu belirtir. Örneğin, sağda sıfır iç kenar boşluğu, sağ tarafta iç kenar boşluğu 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 enterpolasyon yapmak için KeyFrameVariant kullanın. variant öğesinin 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 <KeyFrame>, bir framePosition özelliğine (0-100) sahiptir ve bir varyant özelliğini (başka bir varyantın kimliği) ifade eder. 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