Parametry treści

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.

1. 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).

2. We wtyczce Relay for Figma kliknij + i wybierz image-content z menu, a potem zmień nazwę na „thumbnail” (miniaturę).

   

3. 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”.

   

4. 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.

1. Otwórz wtyczkę Figma Relay, jeśli nie jest jeszcze otwarta.

2. Kliknij Udostępnij deweloperowi.

3. Na ekranie Udostępnij deweloperowi wpisz nazwę i opis wersji.

   Przykładowy tytuł: Dodane parametry

   Przykładowy tekst: dodano do karty parametry treści

4. Kliknij Zapisz.

Zaktualizuj komponent w Android Studio

Zaktualizujmy komponent NewsCard:

1. 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.

   

2. Kliknij , aby utworzyć projekt. Spowoduje to pobranie zaktualizowanego pakietu UI i wygenerowanie zaktualizowanej wersji kodu kompozycyjnego.

   

3. 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.

1. W programie app/java/com/example/hellonews/ui/home/HomeScreen.kt obok innych wierszy importu na górze pliku dodaj te importy: import com.example.hellonews.newscard.NewsCard.

   import com.example.hellonews.newscard.View

2. 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(...)
   ...
   

3. 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))
           ...
       }
   }
   

4. 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))
           }
       }
   }
   

5. 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(...)
   ...
   

6. 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))
           }
       }
   }
   

7. 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