Giriş
Çoğu kullanıcı arayüzü tasarımının içeriği sabit değildir, verilere bağlı olarak değişir. Bu bölümde, tasarımcıların bir tasarımın hangi bölümünün verilerle doldurulması gerektiğini belirlemesini sağlayan içerik parametreleri aracılığıyla tasarımımıza veri ekliyoruz.
Figma'ya parametre ekleme
Bileşenimize içerik parametreleri ekleyelim.
- Figma'ya geçin. NewsCardTutorial'da, hero-item varyantındaki küçük resim resim katmanını seçin (Mac'te ⌘ + tıklama veya görüntüde Windows ve Linux'ta Ctrl + tıklama).
Relay for Figma eklentisinde + işaretini tıklayıp açılır menüden
image-content
'yi seçip adı "thumbnail" olarak değiştirin.Başlık metin katmanını seçin, + simgesini tıklayın ve
text-content
seçeneğini belirleyin. Lokomotif öğe varyantında author ve tarih metin katmanları için aynı adımları tekrarlayın. Bunları sırasıyla "headline", "author" ve "date" olarak adlandırın.Eklentideki küçük resim parametresini tıklayın. Her bileşen varyantında küçük resim katmanının bir resim olduğuna ve seçildiğine dikkat edin.
Üç katman aynı ada ("küçük resim") ve aynı veri türüne (resim-içerik) sahip olduğundan, içerik parametresi üç varyantta da ona bağlanmıştır. Diğer bir deyişle, bir parametre aynı verileri birden fazla varyanta verir. Bu durum başlık, yazar ve tarih parametreleri için de geçerlidir.
Adlandırılmış sürümü kaydet
Şimdi bu sürümü koda aktarılmaya hazır olarak işaretleyelim.
Açık değilse Figma Relay eklentisini açın.
Geliştiriciyle paylaş'ı tıklayın.
Geliştiriciyle paylaş ekranında, sürüm için bir ad ve açıklama girin.
Örnek Başlık: Eklenen Parametreler
Örnek Açıklama: Karta içerik parametreleri eklendi
Kaydet'i tıklayın.
Android Studio'da bileşeni güncelleme
NewsCard bileşenini güncelleyelim:
Android Studio'da, Proje aracı penceresinin Android görünümünde olduğundan emin olun. Ardından
app/ui-packages/news_card/
öğesini sağ tıklayıp Kullanıcı Arayüzü Paketini Güncelle'yi tıklayın.Projenizi oluşturmak için öğesini tıklayın. Bu işlem, güncellenmiş Kullanıcı Arayüzü Paketi'ni alır ve composable kodunun güncellenmiş bir sürümünü oluşturur.
app/java (generated)/com/example/hellonews/newscard/NewsCard.kt
özelliğine bakarsanız, eklediğimiz içerik parametrelerinin (thumbnail
,headline
,author
,date
) composable'ın parametre listesinde yer aldığını göreceksiniz.// 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 = "" ) { ...
Uygulamaya entegre edin
Kullanıcı arayüzünde henüz değişiklik yapmadığımız uygulamamıza tekrar göz atalım. Düzenli haber ve sesli haberlerin bir listesini içerir. NewsCard bileşenimizi eklememiz gereken iki composable şunlardır:
- PostListArticleStories composable, düzenli haber hikayelerinden sorumludur.
- postTop parametresi en çok okunan haberi temsil eder.
- posts parametresi, haberlerin geri kalanını temsil eder.
- PostListAudioStories composable, sesli haber hikayelerini oluşturur. Şimdi NewsCard bileşenimizi ana ekrana entegre edelim.
app/java/com/example/hellonews/ui/home/HomeScreen.kt
konumunda, dosyanın üst kısmına yakın olan diğer içe aktarma satırlarının yanına şu içe aktarmaları ekleyin:com.example.hellonews.newscard.NewsCard
import com.example.hellonews.newscard.View
HomeScreen.kt'deyken PostListArticleStories'e (PostListArticleStories) ilerleyin.
@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(...) ...
postTop için, HeroItem görünümünü kullanarak Text bileşenini yeni içe aktarılan NewsCard ile değiştirin.
@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)) ... } }
Her yayın için, ArticleItem görünümünü kullanarak, Metin bileşenini yeni içe aktarılan NewsCard ile değiştirin.
@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)) } } }
Alt kısımdaki sesli hikayeler için de aynısını yapabiliriz. Hâlâ
HomeScreen.kt
alanında, 260. satır civarındaki PostListAudioStories'e ilerleyin.@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(...) ...
Her yayın için AudioItem görünümünü kullanarak Text bileşenini yeni içe aktarılan NewsCard ile değiştirin.
@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)) } } }
Projenizi tekrar derlemek ve sonucu önizlemede görmek için simgesini tıklayın (bölünmüş ekran görünümü):
Sonraki Adım
Sırada, uygulamamıza bazı etkileşimler ekleyeceğiz.
Sizin için önerilenler
- Not: Bağlantı metni JavaScript kapalıyken görüntülenir
- Tasarımlara etkileşim işleyicileri ekleme
- Tasarım varyantlarını kullanma
- Android Studio'da tasarımları koda dönüştürme