Pakiet UI
Pakiety UI to nowy, elastyczny sposób wymiany informacji o UI. Projektanci używają wtyczki Relay for Figma do tworzenia pakietów UI na podstawie komponentów w Figmie. Spowoduje to, że projekt będzie gotowy do użycia przez programistów. Następnie projektanci podają adres URL pliku projektu Figma.
Programiści używają wtyczki Android Studio do importowania pakietów UI z pliku projektowego Figma. W projekcie Android Studio pakiet UI zawiera deklaratywne opisy zaimportowanych komponentów Figma wraz z powiązanymi zasobami, w tym plikami czcionek, obrazami i plikami SVG.
Pakiety UI to trwałe artefakty, które można zatwierdzić do kontroli źródła.
Gdy deweloper zaimportuje pakiet Figma w projekcie Android Studio, pliki zostaną do niego dodane w folderze ui-packages
. Oto przykładowy zaimportowany pakiet UI:
Projekt z zaimportowanym pakietem UI zawiera te pliki:
[component_name].json
– plik JSON z opisem komponentu (np.story_card.json
).config.json
– przechowuje metadane konkretnego pakietu UI.fonts/
– folder, w którym są przechowywane zasoby czcionek używane przez komponent (jeśli występują).*.png
– komponenty z obrazem używane w komponencie (np.menu.png
), jeśli występują.[component_name]_preview.png
– obraz podglądu komponentu (np.story_card_preview.png
).*.svg
– zasoby graficzne wektorowe używane w komponencie (np. trójkąt), jeśli występują.FONTS.txt
– lista używanych czcionek (jeśli są używane).DEPS.txt
– nazwy komponentów podrzędnych.VERSION.txt
– wersja przekaźnika użyta do utworzenia i zaimportowania pakietu UI.
Są one przechowywane na koncie src/main/ui-packages/[package_name]
.
Usuwanie pakietów UI
Aby usunąć pakiet UI z projektu, możesz usunąć folder w sekcji ui-packages/
. Odbudowanie projektu po usunięciu folderu spowoduje również usunięcie wygenerowanego kodu.
Struktura folderu z wygenerowanym kodem
Podczas kompilacji projektu te pakiety interfejsu użytkownika są zamieniane w wygenerowany kod zawierający funkcje @Composable
, które deweloper może wywołać. Są one przechowywane na koncie build/generated/
. W widoku Androida są one widoczne jako java
(generated)
i res
w katalogu modułów (w tym przypadku jest to katalog app
).
Na poniższych zrzutach ekranu znajdują się pliki znajdujące się w tym katalogu:
Zasoby, takie jak czcionki i obrazy, są kopiowane do
build/generated/res/relay/
.Każdy pakiet UI ma wygenerowany kod w obszarze
build/generated/source/relay/
. Folder kodu wygenerowanego w każdym pakiecie UI zawiera pojedynczy plik odpowiadający zaimportowanemu komponentowi. Zawiera też jeden plik z końcówkąFonts.kt
, który zawiera odwołania do zasobów czcionek używanych przez komponent.Dostępna jest też biblioteka środowiska wykonawczego
com.google.relay.compose
, która udostępnia funkcje wykorzystywane przez wygenerowany kod.
Struktura wygenerowanego kodu
Materiały kompozycyjne
Komponenty w aplikacji Figma są złożone z warstw. Na przykład ten projekt zawiera warstwę ramki Hello Card, która zawiera 2 warstwy podrzędne: Image (warstwa obrazu) i Title (warstwa tekstowa):
Po przekształceniu projektu na kod tworzymy dla każdej warstwy osobne funkcje kompozycyjne, w których nazwa warstwy Figma to nazwa funkcji kompozycyjnej (zmodyfikowanej w celu dostosowania do składni Kotlin). Warstwy są przetłumaczone w ten sposób:
Warstwa Karta Hello:
@Composable fun HelloCard( modifier: Modifier = Modifier, title: String ) { TopLevel(modifier = modifier) { Image() Title(title = title) } ]
Warstwa Obraz:
@Composable fun Image(modifier: Modifier = Modifier) { Image(...) }
Warstwa Tytuł:
@Composable fun Title( title: String, modifier: Modifier = Modifier ) { Text(...) }
Przetłumaczone warianty i parametry Figma
Jeśli komponent Figma ma kilka wariantów, wygenerowany kod będzie zawierał wyliczenie dla każdej właściwości wariantu. Wartości w poszczególnych listach wariantów odpowiadają wartościom danej właściwości wariantu. Funkcja kompozycyjna zawiera parametr dla każdej wyliczenia wariantów.
// 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 { ... }
}
}
}
}
Każdy parametr treści i moduł obsługi interakcji w komponencie Figma są przekształcane w parametr elementu kompozycyjnego. Poniższy element kompozycyjny NewsCard
ma 4 parametry treści (1 obraz i 3 ciągi) oraz 2 moduły obsługi interakcji (2 ostatnie parametry).
/**
* 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 = {}
) {...}
Polecane dla Ciebie
- Uwaga: tekst linku jest wyświetlany, gdy JavaScript jest wyłączony
- Ograniczenia i rozwiązywanie problemów
- Przepływ pracy w Android Studio
- Wyświetlanie podglądu interfejsu za pomocą podglądów funkcji kompozycyjnych