Kullanıcı Arayüzü Paketini ve Oluşturulan Kodu Anlama

Kullanıcı Arayüzü Paketi

Kullanıcı Arayüzü Paketleri, kullanıcı arayüzü bilgileri alışverişinin yeni ve esnek bir yoludur. Tasarımcılar Figma'daki bileşenlerden Kullanıcı Arayüzü Paketleri oluşturan Figma eklentisi için geçiş Yapmak Böylece, tasarım geliştiriciler tarafından kullanılmaya hazır hale gelir. Tasarımcılar daha sonra .

Geliştiriciler, Figma'dan Kullanıcı Arayüzü Paketlerini içe aktarmak için Android Studio eklentisini kullanır. tasarım dosyası olabilir. Bir Android Studio projesinde Kullanıcı Arayüzü Paketi, bildirim temelli içe aktarılan Figma bileşenlerinin ve ilişkili öğelerin açıklamaları, Bunların arasında yazı tipi dosyaları, resimler ve SVG'ler yer alır.

Kullanıcı Arayüzü Paketleri, kalıcı yapılardır ve kaynak kontrolüne bağlı olabilir. Bir geliştirici bir Android Studio projesine Figma paketini içe aktardığında, dosyalar ui-packages klasöründeki projeye eklenir. İşte içe aktarılan bir örnek Kullanıcı Arayüzü Paketi:

Kullanıcı Arayüzü Paketinin İçeriği

İçe aktarılmış Kullanıcı Arayüzü Paketine sahip bir proje aşağıdaki dosyaları içerir:

  • [component_name].json — Bileşeni açıklayan bir JSON dosyası (örneğin, story_card.json) tıklayın.
  • config.json — Belirli Kullanıcı Arayüzü Paketi için meta verileri depolar.
  • fonts/: Aşağıdaki durumlarda bileşen tarafından kullanılan yazı tipi öğelerinin depolandığı klasör herhangi.
  • *.png: Bileşende kullanılan resim öğeleri (örneğin, menu.png). herhangi.
  • [component_name]_preview.png — Bileşenin önizleme resmi ( örnek, story_card_preview.png).
  • *.svg — Bileşende kullanılan vektör grafik öğeleri (örneğin, üçgen) gösterilir.
  • FONTS.txt — Varsa kullanılan yazı tiplerinin listesi.
  • DEPS.txt — Tüm alt bileşenlerin adları.
  • VERSION.txt: Kullanıcı arayüzünü oluşturmak ve içe aktarmak için kullanılan Relay sürümü Paket.

Bunlar src/main/ui-packages/[package_name] altında depolanır.

Kullanıcı Arayüzü Paketlerini Kaldırma

Bir Kullanıcı Arayüzü Paketini projeden kaldırmak için şunun altındaki klasörü silebilirsiniz: ui-packages/ Klasör kaldırıldıktan sonra projeyi yeniden oluşturmak, oluşturmamıza yardımcı olur.

Oluşturulan kod klasörü yapısı

Proje derlendiğinde, bu Kullanıcı Arayüzü Paketleri oluşturulan koda dönüştürülür geliştiricinin çağırabileceği @Composable işlevlerini içeren. Bunlar: build/generated/ altında saklanıyor. Android görünümünde bunlar modül dizininizin altında java (generated) ve res olarak gösterilir (bu örnekte app dizin).

Android Studio'da oluşturulan dosyaların bulunduğu klasörler

Aşağıdaki ekran görüntüleri bu dizindeki dosyaları gösterir:

  • Yazı tipleri ve resimler gibi kaynaklar build/generated/res/relay/

    Res klasörü altında oluşturulan kaynaklar

  • Her kullanıcı arayüzü paketinin, oluşturulan kodu build/generated/source/relay/ Her kullanıcı arayüzü paketinin oluşturulan kod klasöründe içe aktarılan bileşene karşılık gelen tek bir dosya oluşturur. Aynı zamanda Fonts.kt ile biten ve bileşen tarafından kullanılan yazı tipi öğeleri.

    Java(oluşturulan) klasörü altında oluşturulan Kotlin dosyaları

  • Ayrıca com.google.relay.compose adlı çalışma zamanı kitaplığı da vardır. işlev görür.

    Geçiş çalışma zamanı kitaplığı
ziyaret edin.

Oluşturulan kod yapısı

Oluşturulabilirler

Figma'daki bileşenler katmanlardan oluşur. Örneğin, bu tasarım bir Image (resim) ve iki alt katman içeren Hello Card katmanı) ve Başlık (metin katmanı):

Resim ve Başlık katmanlarına sahip Hello Card bileşeni

Bu tasarım koda çevrildiğinde, her bir bileşen için ayrı fonksiyonlarını girin; burada Figma katmanının adı katmanın adı composable işlev (Kotlin söz dizimine uygun olacak şekilde değiştirilmiş). Katmanlar şu şekilde çevrildi:

  1. Hello Card katmanı:

    @Composable
fun HelloCard(
  modifier: Modifier = Modifier,
  title: String
) {
  TopLevel(modifier = modifier) {
      Image()
      Title(title = title)
  }
]

  2. Resim katmanı:

    @Composable
fun Image(modifier: Modifier = Modifier) {
  Image(...)
}

  3. Başlık katmanı:

    @Composable
fun Title(
  title: String,
  modifier: Modifier = Modifier
) {
  Text(...)
}

Çevrilmiş Figma varyantları ve parametreleri

Bir Figma bileşeninin birden fazla varyantı varsa oluşturulan kod, enum sıralamasına sahiptir. Her bir varyant sıralamasındaki değerler değerini alır. composable her biri için bir parametre içerir değişken sıralaması.

// Design to select for NewsCard
enum class View {
    HeroItem,
    ArticleItem,
    AudioItem
}

/**
 *   This composable was generated from the UI Package 'news_card'.
 *   Generated code; do not edit directly
 */
@Composable
fun NewsCard(
    modifier: Modifier = Modifier,
    view: View = View.HeroItem,
    onNewsCardTapped: () -> Unit = {},
    thumbnail: Painter,
    headline: String,
    author: String,
    date: String,
    onMenuTapped: () -> Unit = {}
) {
       when (view) {
           View.HeroItem -> TopLevelViewHeroItem(...) {
               ContentViewHeroItem { ... }
           }
           View.ArticleItem -> TopLevelViewArticleItem(...) {
               ContentViewArticleItem { ... }
           }
           View.AudioItem -> TopLevelViewAudioItem(...) {
               ContentViewAudioItem { ... }
           }
       }
   }
}

Figma bileşeninin her bir içerik parametresi ve etkileşim işleyicisi composable'ın bir parametresine dönüştürülür. Aşağıdaki NewsCard composable dört içerik parametresine (bir resim ve üç dize) ve iki etkileşime sahiptir işleyicileri (son iki parametre) içerir.

/**
 *   This composable was generated from the UI Package 'news_card'.
 *   Generated code; do not edit directly
 */
@Composable
fun NewsCard(
    modifier: Modifier = Modifier,
    view: View = View.HeroItem,
    thumbnail: Painter,
    headline: String,
    author: String,
    date: String,
    onNewsCardTapped: () -> Unit = {},
    onMenuTapped: () -> Unit = {}
) {...}
. ziyaret edin.