Giriş
![NewsCard'ı daha fazla parametreyle güncelleme](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/content-parameters-advanced/update-with-more-parameters.png?authuser=0&hl=tr)
Çoğu kullanıcı arayüzü tasarımının içeriği sabit değildir. Bunlar, dışı verilerdir. Bu bölümde, tasarımımıza veri eklemek için içerik parametreleri aracılığıyla tasarımcıların bir tasarımın hangi bölümünün verilerle doldurulması gerektiğini belirtmesine olanak sağlar
Figma'da parametre ekleme
Bileşenimize içerik parametreleri ekleyelim.
- Figma'ya geçin. NewsCardEğitici'de küçük resim katmanını seçin. hero-öğe varyantı (Mac'te ⌘ + tıklama veya Mac'te Ctrl + Windows ve Linux'u tıklayın) resim) ekleyebilirsiniz.
Relay for Figma eklentisinde + işaretini tıklayın ve
image-content
açılır menüyü ve ardından adı "küçük resim" olarak değiştirin.Başlık metni katmanını seçin, + işaretini tıklayın ve
text-content
öğesini seçin. Tekrarla hero öğedeki author ve date metin katmanları için aynı adımları varyantı. Bunları sırasıyla "başlık", "yazar" ve "tarih" olarak adlandırın.Eklentideki küçük resim parametresini tıklayın. Unutmayın ki bileşen varyantını seçerseniz küçük resim katmanı bir resimdir ve seçilidir.
Çünkü üç katman aynı ada ("küçük resim") ve aynı verilere sahiptir. type (image-content) türünde, içerik parametresi tüm üç varyant vardır. Bu, bir parametrenin aynı veriyi birden çok için de geçerlidir. 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.
Bileşeni Android Studio'da güncelleyin
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ın ve Kullanıcı arayüzünü güncelle Paket.Projenizi oluşturmak için
simgesini tıklayın. Bu, güncellenmiş Kullanıcı Arayüzü Paketi'ni alıp composable'ın girin.
app/java (generated)/com/example/hellonews/newscard/NewsCard.kt
özelliğine bakarsanız eklediğimiz içerik parametreleri (thumbnail
,headline
,author
,date
) composable'ın parametre listemizde görünür.// 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 et
Kullanıcı arayüzünde henüz değişiklik yapmadığımız uygulamamıza tekrar göz atalım. Bir liste içeriyor düzenli haberlerin ve sesli haberlerin listesinden oluşur. Bu ikisi NewsCard bileşenimizi aşağıdaki composable'lara eklememiz gerekir:
- PostListArticleStories composable, düzenli olarak yayınlanan haberlerden hikayeler.
- postTop parametresi, en çok okunan haberi temsil eder.
- submit parametresi, haberlerin geri kalanını temsil eder.
- PostListAudioStories composable, sesli haber hikayelerini oluşturur.
app/java/com/example/hellonews/ui/home/HomeScreen.kt
alanına şunu ekleyin: içe aktarma işlemleri, dosyanın üst kısmındaki diğer içe aktarma satırlarının yanına yerleştirilir:com.example.hellonews.newscard.NewsCard
içe aktarimport com.example.hellonews.newscard.View
HomeScreen.kt sayfasındayken PostListArticleStories'e gidin.
@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, Text bileşenini yeni içe aktarılan HeroItem görünümünü kullanarak NewsCard.
@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, Metin bileşenini yeni içe aktarılan ArticleItem görünümünü kullanarak NewsCard.
@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)) } } }
Aynı işlemi en alttaki sesli haberler için de yapabiliriz. Hâlâ devam ediyor
HomeScreen.kt
, 260. satırdaki PostListAudioStories bölümüne gidin.@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 Text bileşenini yeni içe aktarılan NewsCard'a yerleş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 için
simgesini tıklayın ve sonucu şurada görüntüleyin: önizleme (bölünmüş ekran görünümü):
Sonraki Adım
Daha sonra, uygulamamıza bazı etkileşimler ekleyeceğiz.
Sizin için önerilenler
- Not: JavaScript kapalıyken bağlantı metni gösterilir
- Tasarımlara etkileşim işleyici ekleme
- Tasarım varyantlarını kullanma
- Android Studio'da tasarımları koda dönüştürme