Kullanıcı Arayüzü Paketi
Kullanıcı Arayüzü Paketleri, kullanıcı arayüzü bilgilerini almanın yeni ve esnek bir yoludur. Tasarımcılar, Figma'daki bileşenlerden Kullanıcı Arayüzü Paketleri oluşturmak için Relay for Figma eklentisini kullanır. Bu da tasarımın geliştiriciler tarafından kullanılmaya hazır olduğunu belirtir. Tasarımcılar daha sonra geliştiricilere Figma tasarım dosyalarının URL'sini sağlar.
Geliştiriciler, Kullanıcı Arayüzü Paketlerini Figma tasarım dosyasından içe aktarmak için Android Studio eklentisini kullanır. Bir Android Studio projesinde Kullanıcı Arayüzü Paketi; yazı tipi dosyaları, resimler ve SVG'ler dahil olmak üzere ilişkili öğelerle birlikte içe aktarılan Figma bileşenlerinin bildirimsel açıklamalarını içerir.
Kullanıcı Arayüzü Paketleri kalıcı yapılardır ve kaynak kontrolüne atanabilir.
Geliştirici bir Android Studio projesine Figma paketi aktardığında, dosyalar ui-packages
klasörü içindeki projeye eklenir. İçe aktarılan Kullanıcı Arayüzü Paketinin bir örneğini burada görebilirsiniz:
![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=5&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
).config.json
: Belirli bir kullanıcı arayüzü paketi için meta verileri depolar.fonts/
: Bileşen tarafından kullanılan yazı tipi öğelerinin (varsa) depolandığı klasör.*.png
- Bileşende kullanılan resim öğeleri (ör.menu.png
).[component_name]_preview.png
— Bileşenin önizleme resmi (örneğin,story_card_preview.png
).*.svg
: Bileşende kullanılan vektör grafik öğeleri (ör. üçgen).FONTS.txt
: Varsa kullanılan yazı tiplerinin listesi.DEPS.txt
: Tüm alt bileşenlerin adlarıdır.VERSION.txt
— Kullanıcı arayüzü paketini oluşturmak ve içe aktarmak için kullanılan Relay'in sürümü.
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 ui-packages/
altındaki klasörü silebilirsiniz. Klasör kaldırıldıktan sonra projeyi yeniden oluşturduğunuzda, oluşturulan kod da kaldırılır.
Oluşturulan kod klasörü yapısı
Proje derlendiğinde bu Kullanıcı Arayüzü Paketleri, geliştiricinin çağırabileceği @Composable
işlevlerini içeren oluşturulmuş koda dönüştürülür. Bunlar build/generated/
altında depolanır. Android görünümünde bunlar, modül dizininizin (bu örnekte, app
dizini) java
(generated)
ve res
olarak görünür.
![Android Studio'da oluşturulan dosyaları içeren klasörler](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/understand-ui-package/folders-of-generated-files.png?authuser=5&hl=tr)
Aşağıdaki ekran görüntüleri bu dizindeki dosyalarda adım adım yol gösterir:
Yazı tipleri ve resimler gibi kaynaklar
build/generated/res/relay/
hizmetine kopyalanır.Her Kullanıcı Arayüzü Paketinde,
build/generated/source/relay/
altına yerleştirilmiş bir kod bulunur. Her Kullanıcı Arayüzü Paketi'nin oluşturulan kod klasörü, içe aktarılan bileşene karşılık gelen tek bir dosyaya sahiptir. Ayrıca,Fonts.kt
ile biten ve bileşen tarafından kullanılan yazı tipi öğelerine referanslar içeren tek bir dosya içerir.Ayrıca, oluşturulan kodun kullandığı işlevi sağlayan
com.google.relay.compose
adlı bir çalışma zamanı kitaplığı da vardır.
Oluşturulan kod yapısı
Bestelenebilirler
Figma'daki bileşenler katmanlardan oluşur. Örneğin, bu tasarım, Resim (bir resim katmanı) ve Başlık (metin katmanı) olmak üzere iki alt katman içeren bir Merhaba Kart çerçeve katmanı içerir:
![Resim ve Başlık katmanlarına sahip Merhaba Kartı bileşeni](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/understand-ui-package/hello-card-component.png?authuser=5&hl=tr)
Bu tasarım koda çevrildiğinde, her katman için ayrı composable işlevler oluştururuz. Burada Figma katmanının adı, composable işlevin adıdır (Kotlin söz dizimine uygun olacak şekilde değiştirilir). Katmanlar şu şekilde çevrilir:
Merhaba Kart 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 her varyant özelliği için bir enum içerir. Her bir varyant sıralamasındaki değerler, söz konusu varyant özelliğinin değerine karşılık gelir. composable, her varyant enum için bir parametre içerir.
// 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 içerik parametresi ve etkileşim işleyicisi, composable'ın parametresine dönüştürülür. Aşağıdaki NewsCard
composable, dört içerik parametresi (bir resim ve üç dize) ve iki etkileşim işleyiciye (son iki parametre) sahiptir.
/**
* 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: Bağlantı metni JavaScript kapalıyken görüntülenir
- Sınırlamalar ve sorun giderme
- Android Studio iş akışı
- Oluşturulabilir önizlemelerle kullanıcı arayüzünüzü önizleme