Wprowadzenie
Zawartość większości projektów UI nie jest statyczna – zmienia się w zależności od danych. W tej sekcji dodajemy dane do projektu za pomocą parametrów treści, które pozwalają projektantom określać, która część projektu ma wypełnić
Dodaj parametry w Figmie
Dodajmy do komponentu parametry treści.
- Przełącz na aplikację Figma. W NewsCardtutorial wybierz warstwę miniatura obrazu w wersji produktu po kliknięciu elementu głównego (⌘ + kliknij na Macu lub Ctrl i kliknij w systemie Windows i Linux na obrazie).
We wtyczce Relay for Figma kliknij + i wybierz
image-content
z menu, a potem zmień nazwę na „thumbnail” (miniaturę).Wybierz warstwę Tekst nagłówka, kliknij + i wybierz
text-content
. Powtórz te same czynności dla warstw tekstowych autor i data w wariantu banera powitalnego. Nazwij je odpowiednio „nagłówek”, „autor” i „data”.Kliknij parametr miniaturki we wtyczce. Zwróć uwagę, że w każdym wariancie komponentu warstwa miniatury to obraz, która jest zaznaczona.
Ponieważ te 3 warstwy mają taką samą nazwę („miniaturę”) i ten sam typ danych (obraz-treść), parametr treści jest z nim połączony we wszystkich 3 wariantach. Oznacza to, że jeden parametr przekazuje te same dane wielu odmianom. Dotyczy to także nagłówka, autora i parametrów daty.
Zapisz wersję z nazwą
Oznaczmy tę wersję jako gotową do zaimportowania do kodu.
Otwórz wtyczkę Figma Relay, jeśli nie jest jeszcze otwarta.
Kliknij Udostępnij deweloperowi.
Na ekranie Udostępnij deweloperowi wpisz nazwę i opis wersji.
Przykładowy tytuł: Dodane parametry
Przykładowy tekst: dodano do karty parametry treści
Kliknij Zapisz.
Zaktualizuj komponent w Android Studio
Zaktualizujmy komponent NewsCard:
W Android Studio sprawdź, czy okno narzędzia Projekt jest ustawione w widoku Androida. Następnie kliknij prawym przyciskiem myszy
app/ui-packages/news_card/
i wybierz Zaktualizuj pakiet UI.Kliknij , aby utworzyć projekt. Spowoduje to pobranie zaktualizowanego pakietu UI i wygenerowanie zaktualizowanej wersji kodu kompozycyjnego.
Jeśli spojrzysz na
app/java (generated)/com/example/hellonews/newscard/NewsCard.kt
, zobaczysz, że dodane przez nas parametry treści (thumbnail
,headline
,author
,date
) pojawiają się na liście parametrów elementu kompozycyjnego.// View to select for NewsCard enum class View { HeroItem, ArticleItem, AudioItem } /** * News card component intended to display news items for a list * * This composable was generated from the UI package 'news_card'. * Generated code; don't edit directly. */ @Composable fun NewsCard( modifier: Modifier = Modifier, view: View = View.HeroItem, thumbnail: Painter = EmptyPainter(), headline: String = "", author: String = "", date: String = "" ) { ...
Integracja z aplikacją
Spójrzmy na naszą aplikację, której interfejs nie został jeszcze zmodyfikowany. Zawiera on listę zwykłych wiadomości oraz listę materiałów audio. Oto 2 elementy kompozycyjne, które musimy dodać do komponentu NewsCard:
- Funkcja kompozycyjna PostListArticleStories odpowiada za standardowe artykuły z wiadomościami.
- Parametr postTop oznacza najważniejszy artykuł.
- Parametr posts reprezentuje pozostałe artykuły.
- Funkcja kompozycyjna PostListAudioStories służy do renderowania wiadomości dźwiękowych. Zintegrujmy teraz komponent NewsCard z ekranem głównym.
W programie
app/java/com/example/hellonews/ui/home/HomeScreen.kt
obok innych wierszy importu na górze pliku dodaj te importy: importcom.example.hellonews.newscard.NewsCard
.import com.example.hellonews.newscard.View
Będąc na stronie HomeScreen.kt, przewiń w dół do sekcji PostListArticleStories.
@Composable fun HomeScreen(...) @Composable private fun PostList(...) @Composable private fun PostListArticleStoriesSection(...) @Composable private fun SearchArticlesSection(...) @Composable private fun PostListArticleStories( postTop: Post, posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) {...} @Composable private fun AudioStoriesTitle(...) @Composable private fun PostListAudioStories(...) @Composable fun Dialog(...) ...
W przypadku postTop zastąp komponent Text nowo zaimportowanym komponentem NewsCard w widoku HeroItem.
@Composable private fun PostListArticleStories( postTop: Post, posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) { ... Column( horizontalAlignment = Alignment.Start, modifier = ... ) { Spacer(modifier = Modifier.size(12.dp)) NewsCard( thumbnail = painterResource(postTop.imageId), headline = postTop.title, author = postTop.metadata.author.name, date = postTop.metadata.date, view = View.HeroItem ) Spacer(modifier = Modifier.size(12.dp)) ... } }
W przypadku każdego posta zastąp komponent Tekst nowo zaimportowanym NewsCard w widoku ArticleItem.
@Composable private fun PostListArticleStories( postTop: Post, posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) { ... Column( horizontalAlignment = Alignment.Start, modifier = ... ) { ... posts.forEach { post -> NewsCard( thumbnail = painterResource(post.imageId), headline = post.title, author = post.metadata.author.name, date = post.metadata.date, view = View.ArticleItem ) Spacer(modifier = Modifier.size(12.dp)) } } }
To samo możemy zrobić z relacjami dźwiękowymi u dołu. Będąc w
HomeScreen.kt
, przewiń w dół do sekcji PostListAudioStories, która znajduje się około wiersza 260.@Composable fun HomeScreen(...) @Composable private fun PostList(...) @Composable private fun PostListArticleStoriesSection(...) @Composable private fun SearchArticlesSection(...) @Composable private fun PostListArticleStories(...) @Composable private fun AudioStoriesTitle(...) @Composable private fun PostListAudioStories( posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) {...} @Composable fun Dialog(...) ...
W przypadku każdego posta zastąp komponent Text nowo zaimportowanym postem NewsCard w widoku AudioItem.
@Composable private fun PostListAudioStories( posts: List<Post>, createOnTapped: (String, String) -> () -> Unit ) { Column( horizontalAlignment = ..., modifier = ... ) { posts.forEach { post -> NewsCard( thumbnail = painterResource(post.imageId), headline = post.title, author = post.metadata.author.name, date = post.metadata.date, view = View.AudioItem ) Spacer(modifier = Modifier.size(12.dp)) } } }
Kliknij , aby ponownie utworzyć projekt i wyświetlić wynik w podglądzie (podzielony ekran):
Dalej
Następnie dodamy kilka interakcji do aplikacji.
Polecane dla Ciebie
- Uwaga: tekst linku jest wyświetlany, gdy JavaScript jest wyłączony
- Dodawanie modułów obsługi interakcji do projektów
- Obsługa wariantów projektowych
- Konwertowanie projektów na kod w Android Studio