Tasarım varyantlarını kullanma

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ı

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

1. HelloNews.fig dosyasını bilgisayarınıza indirin.

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

   

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

1. Dosyanızda Relay for Figma eklentisini açın (menü çubuğunda: Eklentiler > Relay Figma için). Başlayın'ı tıklayın.

2. Bileşeni seçin ve Kullanıcı Arayüzü Paketi Oluştur'u tıklayın.

   

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

1. Açık değilse Figma Relay eklentisini açın.
2. Geliştiriciyle paylaş'ı tıklayın.
3. 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.

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

1. Örnek HelloNews.zip dosyasını indirin.
2. 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.
3. 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.
4. 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.

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

   

2. Android Studio'daki HelloNews projesine geçin. Dosya > Yeni > İçe aktarma Kullanıcı Arayüzü Paketleri...'ni seçin.

   

3. Figma dosyanızın URL'sini yapıştırın ve Next'i (İleri) tıklayın.

   

   

   talimatları
   1. Dosyanın getirilmesi tamamlandığında (bu işlem biraz zaman alabilir) Bitir.

   

4. Sonraki slayta geçin . bahsedeceğiz. Bu işlem bir dakika kadar sürebilir.

   

Uygulamayı önizle ve bileşen

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

   

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

   

3. 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ızdaki view parametresinde kullanılır. composable'dan bahsetmek istiyorum.

   

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

İçerik Parametreleri

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

ziyaret edin.