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](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/understand-ui-package/content-of-ui-package.png?authuser=0&hl=tr)
İç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](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/understand-ui-package/folders-of-generated-files.png?authuser=0&hl=tr)
Aşağıdaki ekran görüntüleri bu dizindeki dosyaları gösterir:
Yazı tipleri ve resimler gibi kaynaklar
build/generated/res/relay/
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ı zamandaFonts.kt
ile biten ve bileşen tarafından kullanılan yazı tipi öğeleri.Ayrıca
com.google.relay.compose
adlı çalışma zamanı kitaplığı da vardır. işlev görür.
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](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/understand-ui-package/hello-card-component.png?authuser=0&hl=tr)
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:
Hello Card katmanı:
@Composable fun HelloCard( modifier: Modifier = Modifier, title: String ) { TopLevel(modifier = modifier) { Image() Title(title = title) } ]
Resim katmanı:
@Composable fun Image(modifier: Modifier = Modifier) { Image(...) }
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 = {}
) {...}
.
Sizin için önerilenler
- Not: JavaScript kapalıyken bağlantı metni gösterilir
- Sınırlamalar ve sorun giderme
- Android Studio iş akışı
- Oluşturulabilir önizlemelerle kullanıcı arayüzünüzü önizleme