Figma'da varyantlar, aynı bileşenin farklı durumları veya boyutlar gibi farklı varyasyonlarını birlikte gruplandırmak için kullanılır. Geçiş, koda çevrilen bir bileşenin varyantlarını korur. Bu bölümde, Relay'in tasarımlardaki varyantları nasıl işlediğini göreceğiz.
Başlangıç noktası
![Ağaç varyantları içeren haber kartı](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/design-variants/news-card-with-variants.png?authuser=5&hl=tr)
Üç varyantlı bir Haber Kartı bileşeni içeren bir Figma dosyasıyla başlayacağız:
- hero-item öğesi ise en önemli haber makalesi içindir
- article-item tipik bir makale içindir
- audio-item okumak yerine dinlediğiniz bir makaleye yöneliktir
Figma örneğini kopyala
Bu eğitim için örnek olarak mevcut bir Figma dosyasını kullanacağız. Figma hesabınıza giriş yaptığınızdan emin olun.
- HelloNews.fig'i bilgisayarınıza indirin.
Figma'da dosya tarayıcısına gidin. Farenizle sol taraftaki Taslaklar'ın üzerine gelin. Bir + simgesi görünür. Önce + simgesini, ardından İçe aktar'ı tıklayın. Yeni indirdiğiniz HelloNews.fig dosyasını seçin. Bu işlem, 10 saniyeden bir dakikaya kadar sürebilir.
İçe aktarılan dosyayı Figma'da açın.
Kullanıcı arayüzü paketi oluşturma
Relay for Figma eklentisi, bileşenimize ekstra bilgiler ekler. Böylece, bileşenimizi kodlarında kullanacak geliştiricilerimizle birlikte çalışabiliriz.
- Dosyanızda Relay for Figma eklentisini açın (menü çubuğunda: Plugins > Relay for Figma). 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: "Bir liste için 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 bileşeninizi geliştirme ekibiyle paylaşmak için hazırlayabilirsiniz.
- Açık değilse Figma Relay eklentisini açın.
- Geliştiriciyle paylaş'ı tıklayın.
- Geliştiriciyle paylaş ekranında, 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 kullanacağız. Bu proje, haber makalelerini düz metin biçiminde görüntüleyen bir uygulama içeriyor.
- Örnek HelloNews.zip dosyasını indirin.
- Sıkıştırılmış dosyayı çift tıklayarak açın. Bu işlem, HelloNews adlı bir klasör oluşturur. Dosyayı ana klasörünüze taşıyın.
- Android Studio'ya geri dönün. File > Open (Dosya > Aç) seçeneğine gidin, ana klasör klasörünüze gidin, HelloNews'u seçin ve Open'ı (Aç) tıklayın.
- Projeyi açtığınızda, Android Studio projeye güvenip güvenmediğinizi sorar. Projeye Güven'i tıklayın.
Android Studio'ya aktar
Figma bileşenimizi projeye aktaralım.
Figma'ya geri dönün, News Card Tutorial Figma dosyasının URL'sini kopyalayın. Bu URL'yi bileşenlerimizi içe aktarmak için kullanacağız. Figma'nın sağ üst köşesindeki Paylaş düğmesini tıklayın. Açılan iletişim kutusunda Bağlantıyı Kopyala'yı tıklayın.
Android Studio'da HelloNews projesine geçin. Android Studio menü çubuğundan Dosya > Yeni > Kullanıcı Arayüzü Paketlerini İçe Aktar... seçeneğine gidin.
Figma dosyanızın URL'sini yapıştırın ve İleri'yi tıklayın.
- Dosyanın alınması tamamlandığında (bu işlem biraz zaman alabilir) Son'u tıklayın.
Projenizi derlemek için
simgesini tıklayın. Bu işlem bir dakika kadar sürebilir.
Uygulama ve bileşeni önizle
Android görünümünde
app/java/com/example/hellonews/ui/home/HomeScreen.kt
uygulamasını açtığınızda, çeşitli haber makalelerini düz metin biçiminde, basılı haberlerin üzerinde ise sesli haberlerin olduğu bir önizleme görürsünüz.app/java (generated)/com/example/hellonews/newscard/NewsCard.kt
uygulamasını açın. Bu, Figma bileşenimiz için oluşturulan Jetpack Compose kodudur. Önizlemeden, NewsCard bileşeninin üç varyantının Figma'dan koda çevrildiğini görebiliriz. Şimdi, kodu daha yakından inceleyelim.View
sıralaması, bu bileşen için hangi varyantın kullanılacağını seçmemize olanak tanır. Sıralama adı ve değerleri, Figma bileşenimizin varyantlarından türetilmiştir. Bu bilgi, NewsCardcomposable'mizdekiview
parametresinde kullanılır.NewsCard composable, kullanıcı arayüzü paketinden oluşturulmuştur. Bu öğe, haber kartının varyantını başlatılacak şekilde ayarlayan
View
türünde bir parametre içerir.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 farklı haberlerin nasıl görüntüleneceğini bilemez, sadece Figma'ya sabit bir şekilde kodlanmış olan bir haberi görür. Yani bileşeni şimdi eklersek elde ettiğimiz tek şey aynı haberin tekrarlanmasıdır. NewsCard'ın hangi bölümlerinin dinamik verilerle doldurulması gerektiğini belirtebileceğimiz bir yönteme ihtiyacımız vardır.
Bu bölümde, içerik parametrelerini NewsCard bileşenine ekleyeceğiz.
Sizin için önerilenler
- Not: Bağlantı metni JavaScript kapalıyken görüntülenir
- İçerik parametreleri
- Kaydırma
- Görünümler'de Oluşturma Özelliğini Kullanma