Figma'da, değişkenlerin farklı varyasyonlarını gruplandırmak için varyantlar kullanılır. aynı bileşeni (ör. farklı durumlar veya boyutlar) gösterir. Röle korundu bir bileşenin koda çevrildiğinde varyantlarını ifade eder. Bu bölümde, Relay'in tasarımlardaki varyantları nasıl ele aldığına bakalım.
Başlangıç noktası
![Ağaç çeşitlerini içeren haber kartı](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/design-variants/news-card-with-variants.png?authuser=9&hl=tr)
İlk olarak, üçlü Haber Kartı bileşenini içeren bir Figma dosyasıyla varyantlar:
- hero-item, en önemli haber makalesidir
- article-item tipik bir makale içindir
- audio-item, okumak yerine dinlediğiniz bir makale içindir
Figma örneğini kopyala
Bu eğitim için örnek olarak mevcut bir Figma dosyasını kullanacağız. Şunlardan emin olun: Figma hesabınıza giriş yaptığınızdan emin olun.
- HelloNews.fig dosyasını bilgisayarınıza indirin.
Figma'da dosya tarayıcısına gidin. Sol tarafta imlecin üzerine gelin Taslaklar. + simgesi görünür. + simgesini ve ardından İçe aktar'ı tıklayın. Yeni indirdiğiniz HelloNews.fig dosyasını seçin. Bu işlem 10 saniyeden bir dakikaya kadar değişebilir.
İçe aktarılan dosyayı Figma'da açın.
Kullanıcı arayüzü paketi oluşturma
Relay for Figma eklentisi, bileşenimize fazladan bilgi ekler. Böylece, kodlarında bileşenimizi kullanacak geliştiricilarımızla çalışacaklar.
- Dosyanızda Relay for Figma eklentisini açın (menü çubuğunda: Eklentiler > Relay Figma için). Başlayın'ı tıklayın.
Bileşeni seçin ve Kullanıcı Arayüzü Paketi Oluştur'u tıklayın.
Kullanıcı Arayüzü Paketi seçiliyken özet kutusuna bir açıklama ekleyin. Örneğin, örnek: “Bir listeye ilişkin haber öğelerini görüntülemeyi amaçlayan haber kartı bileşeni”.
Adlandırılmış sürümü kaydet
Kullanıcı arayüzü paketi oluşturduğunuza göre şimdi bileşeninizi geliştirme ekibiyle paylaşmak için hazırlayın.
- Açık değilse Figma Relay eklentisini açın.
- Geliştiriciyle paylaş'ı tıklayın.
- Geliştiriciyle paylaş ekranından Sürüm geçmişini kaydet bölümüne yeni bir sürüm adı ve açıklaması girebilirsiniz.
Kaydet'i tıklayın.
Örnek Başlık: İlk Yeni Kart
Örnek Açıklama: Haber makalesi öğelerinin ilk yinelemesi
Android Studio projesini indir
Bu eğiticinin Android Studio bölümünde önceden yapılandırılmış bir Android Studio projesi. Bu proje, haber makalelerini görüntüleyen bir uygulama içeriyor düz metin biçimindedir.
- Örnek HelloNews.zip dosyasını indirin.
- Sıkıştırılmış dosyayı açmak için dosyayı çift tıklayın. Bunu yaptığınızda adlı bir klasör oluşturulur. HelloNews. Dosyayı ana klasörünüze taşıyın.
- Android Studio'ya geri dönün. Dosya > Aç, evinize gidin klasörünün altındaki HelloNews'u seçin ve Open'ı (Aç) tıklayın.
- Projeyi açtığınızda, Android Studio size belirler. Projeye Güvenin'i tıklayın.
Android Studio'ya aktarma
Figma bileşenimizi projeye aktaralım.
Figma'ya dönün ve Haber Kartı Eğiticisi Figma dosyasının URL'sini kopyalayın. Saat bileşenlerimizi içe aktarmak için bu URL'yi kullanın. Reklam öğesinin sağ üst köşesinde, Figma'da, Paylaş düğmesini tıklayın. Açılan iletişim kutusunda Bağlantıyı Kopyala.
Android Studio'daki HelloNews projesine geçin. Dosya > Yeni > İçe aktarma Kullanıcı Arayüzü Paketleri...'ni seçin.
Figma dosyanızın URL'sini yapıştırın ve Next'i (İleri) tıklayın.
- Dosyanın getirilmesi tamamlandığında (bu işlem biraz zaman alabilir) Bitir.
Sonraki slayta geçin
. bahsedeceğiz. Bu işlem bir dakika kadar sürebilir.
Uygulamayı önizle ve bileşen
Android görünümünde açın
app/java/com/example/hellonews/ui/home/HomeScreen.kt
, uygulamanın önizlemesini görürsünüz. Bu önizlemede, düz metin biçimindedir.app/java (generated)/com/example/hellonews/newscard/NewsCard.kt
uygulamasını açın. Bu , Figma bileşenimiz için oluşturulan Jetpack Compose kodudur. Şuradan: NewsCard bileşeninin üç varyantının çevrilmiştir. Koda daha yakından bakalım.View
sıralaması, bu bileşen için kullanılacak varyantı seçmemize olanak tanır. Sıralama adı ve değerleri, Figma bileşeni. Bu değer, NewsCard'ımızdakiview
parametresinde kullanılır. composable'dan bahsetmek istiyorum.NewsCard composable, kullanıcı arayüzü paketinden oluşturuldu. Bir
View
türündeki parametre. Bu parametre, haber kartının varyantını örneklendiririz.package com.example.myapplication.newscard import ... // Design 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; do not edit directly */ @Composable fun NewsCard( modifier: Modifier = Modifier, view: View = View.HeroItem ) {...}
Sıradaki
Henüz NewsCard'ı kullanmaya hazır değiliz. Bileşen, öğenin nasıl Figma'da sabit kodlu olarak yalnızca aynı haber yazısını görüntüleyebilirsiniz. Örneğin, bileşeni ekleyecektik. Elde ettiğimiz tek şey aynı haber tekrarlanır. NewsCard'ın hangi bölümlerinin doldurulması gerektiğini belirtmek için bir yönteme ihtiyacımız var dinamik verilerle.
Bu bölümde NewsCard bileşenine içerik parametreleri ekleyeceğiz.
Sizin için önerilenler
- Not: JavaScript kapalıyken bağlantı metni gösterilir
- İçerik parametreleri
- Kaydırma
- Görünümler'de Oluşturma işlevini kullanma