Relay ve Jetpack Compose ile eksiksiz bir uygulama oluşturma

1. Başlamadan önce

Relay, ekiplerin Figma'da kullanıcı arayüzü bileşenleri tasarlamasına ve bunları doğrudan Jetpack Compose projelerinde kullanmasına olanak tanıyan bir araç setidir. Zahmetli tasarım spesifikasyonu ve QA döngülerinin ortadan kaldırılmasını sağlayarak ekiplerin hızlıca mükemmel Android kullanıcı arayüzleri sunmasına yardımcı olur.

Bu codelab'de, Relay kullanıcı arayüzü paketlerini Compose geliştirme sürecinize nasıl entegre edeceğinizi öğreneceksiniz. Uçtan uca iş akışına değil, entegrasyon tekniklerine odaklanır. Relay'in genel iş akışı hakkında bilgi edinmek için Relay'in temel eğitimi başlıklı makaleyi inceleyin.

Ön koşullar

Neler öğreneceksiniz?

  • Kullanıcı arayüzü paketlerini içe aktarma.
  • Kullanıcı arayüzü paketlerini gezinme ve veri mimarisiyle entegre etme.
  • Kullanıcı arayüzü paketlerini kontrolör mantığıyla sarmalama.
  • Figma stillerini Oluştur temanızla eşleme.
  • Kullanıcı arayüzü paketlerini, oluşturulan koddaki mevcut bileşenlerle değiştirme

Ne oluşturacaksınız?

  • Bir tasarımcı tarafından sağlanan Relay paketlerine dayalı gerçekçi bir uygulama tasarımı. Reflect adlı bu uygulama, farkındalığı ve iyi alışkanlıkları teşvik eden günlük bir takip uygulamasıdır. Çeşitli türde takip cihazları ve bunları eklemek ve yönetmek için kullanıcı arayüzü içerir. Uygulama aşağıdaki resimdeki gibi görünür:

Bitmiş uygulama

Gerekenler

2. Hazırlanın

Kodu alma

Bu codelab'in kodunu almak için aşağıdakilerden birini yapın:

$ git clone https://github.com/googlecodelabs/relay-codelabs
  • GitHub'da relay-codelabs deposuna gidin, istediğiniz dalı seçin, ardından Kod > Zip dosyasını indir'i tıklayın ve indirilen zip dosyasını açın.

Her iki durumda da main şubesi başlangıç kodunu, end şubesi ise çözüm kodunu içerir.

Android Studio için Relay eklentisini yükleme

Android Studio için Relay eklentiniz yoksa aşağıdaki adımları uygulayın:

  1. Android Studio'da Ayarlar > Eklentiler'i tıklayın.
  2. Metin kutusuna Relay for Android Studio yazın.
  3. Arama sonuçlarında görünen uzantıda Yükle'yi tıklayın.

Android Studio eklenti ayarları

  1. Üçüncü taraf eklentileri gizlilik notu iletişim kutusu görürseniz Kabul et'i tıklayın.
  2. Tamam > Yeniden başlat'ı tıklayın.
  3. Çıkış işlemini onaylayın iletişim kutusunu görürseniz Çıkış'ı tıklayın.

Android Studio'yu Figma'ya bağlama

Relay, kullanıcı arayüzü paketlerini Figma API ile alır. Bu aracı kullanmak için ücretsiz bir Figma hesabınız ve kişisel erişim jetonunuz olmalıdır. Bu nedenle, İhtiyacınız olan öğeler bölümünde bu öğeler listelenir.

Android Studio'yu Figma'ya henüz bağlamadıysanız aşağıdaki adımları uygulayın:

  1. Figma hesabınızda, sayfanın üst kısmındaki profil simgenizi tıklayın ve Ayarlar'ı seçin.
  2. Kişisel erişim jetonları bölümünde, metin kutusuna jeton için bir açıklama girin ve ardından Enter (veya macOS'te return) tuşuna basın. Bir jeton oluşturulur.
  3. Bu jetonu kopyala'yı tıklayın.

Figma'da oluşturulan bir erişim jetonu

  1. Android Studio'da Araçlar > Aktarım Ayarları'nı seçin. Yayın ayarları iletişim kutusu görüntülenir.
  2. Figma Erişim Jetonu metin kutusuna erişim jetonunu yapıştırın ve Tamam'ı tıklayın. Ortamınız hazır.

3. Uygulamanın tasarımını inceleme

Reflect uygulamasında, uygulamanın rengini, yazı tipini, düzenini ve davranışını belirlememize yardımcı olması için bir tasarımcıyla birlikte çalıştık. Bu tasarımları, uygulamanın Materyal bileşenleri ve temalarıyla sorunsuz bir şekilde çalışması için Materyal Tasarım 3 kurallarına uygun şekilde oluşturduk.

Ana ekranı inceleme

Ana ekranda, kullanıcı tanımlı izleyiciler listelenir. Ayrıca etkin günü değiştirmenize ve başka izleyiciler oluşturmanıza olanak tanır.

Ana ekran

Figma'da tasarımcımız bu ekranı birden fazla bileşene böldü, API'lerini tanımladı ve Relay for Figma eklentisiyle paketledi. Bu bileşenler paketlendikten sonra Android Studio projenize aktarabilirsiniz.

Ana ekran bileşeni

Ekle/düzenle ekranını inceleyin.

Ekle/düzenle ekranı, kullanıcıların takip cihazı eklemesine veya düzenlemesine olanak tanır. Gösterilen form, izleyici türüne göre biraz farklıdır.

Ekle/düzenle ekranı

Benzer şekilde bu ekran da birden fazla paketlenmiş bileşene ayrılmıştır.

Ekran bileşenleri ekleme/düzenleme

Temayı inceleme

Bu tasarımın renkleri ve yazı tipleri, Materyal Tasarım 3 jeton adlarına dayalı Figma stilleri olarak uygulanır. Bu sayede Compose temaları ve Material bileşenleriyle daha iyi birlikte çalışabilirlik elde edilir.

Figma stilleri

4. Kullanıcı arayüzü paketlerini içe aktarma

Kullanıcı arayüzü paketlerini projenize aktarmadan önce tasarım kaynağını Figma'ya yüklemeniz gerekir.

Figma kaynağının bağlantısını almak için aşağıdaki adımları uygulayın:

  1. Figma'da Dosya içe aktar'ı tıklayın ve ardından CompleteAppCodelab proje klasöründeki ReflectDesign.fig dosyasını seçin.
  2. Dosyayı sağ tıklayın ve Bağlantıyı kopyala'yı seçin. Bu bilgiye bir sonraki bölümde ihtiyacınız olacak.

88afd168463bf7e5.png

Kullanıcı arayüzü paketlerini projeye aktarma

  1. Android Studio'da ./CompleteAppCodelab projesini açın.
  2. Dosya > Yeni > Kullanıcı Arayüzü Paketlerini İçe Aktar'ı tıklayın. Kullanıcı Arayüzü Paketlerini İçe Aktar iletişim kutusu görüntülenir.
  3. Figma kaynak URL'si metin kutusuna önceki bölümde kopyaladığınız URL'yi yapıştırın.

f75d0c3e17b6f75.png

  1. Uygulama teması metin kutusuna com.google.relay.example.reflect.ui.theme.ReflectTheme yazın. Böylece, oluşturulan önizlemelerde özel tema kullanılır.
  2. İleri'yi tıklayın. Dosyanın kullanıcı arayüzü paketlerinin önizlemesini görürsünüz.
  3. Oluştur'u tıklayın. Paketler projenize aktarılır.
  4. Proje sekmesine gidin ve ardından ui-packages klasörünün yanındaki 2158ffa7379d2b2e.png genişletici oku tıklayın.

ui-packages klasörü

  1. Paket klasörlerinden birinin yanındaki 2158ffa7379d2b2e.pnggenişletici oku tıklayın. Ardından, JSON kaynak dosyası ve öğe bağımlılıkları içerdiğini fark edin.
  2. JSON kaynak dosyasını açın. Aktarım modülü, paketin ve API'sinin önizlemesini gösterir.

a6105146c4cfb47.png

Kod derleme ve oluşturma

  1. Android Studio'nun üst kısmında b3bc77f3c78cac1b.png Proje oluştur'u tıklayın. Her paket için oluşturulan kod java/com.google.relay.example.reflect klasörüne eklenir. Oluşturulan kompozisyonlar, Figma tasarımındaki tüm düzen ve stil bilgilerini içerir.
  2. com/google/relay/example/reflect/range/Range.kt dosyasını açın.
  3. Her bileşen varyasyonu için Oluştur önizlemelerinin oluşturulduğunu unutmayın. Gerekirse kodu ve önizleme bölmelerini yan yana görmek için Böl'ü tıklayın.

c0d21ab0622ad550.png

5. Bileşenleri entegre etme

Bu bölümde, Switch izleyici için oluşturulan koda daha yakından göz atacaksınız.

Geçiş izleyicinin tasarımı

  1. Android Studio'da com/google/relay/example/reflect/switch/Switch.kt dosyasını açın.

Switch.kt (oluşturuldu)

/**
 * This composable was generated from the UI Package 'switch'.
 * Generated code; don't edit directly.
 */
@Composable
fun Switch(
    modifier: Modifier = Modifier,
    isChecked: Boolean = false,
    emoji: String = "",
    title: String = ""
) {
    TopLevel(modifier = modifier) {
        if (isChecked) {
            ActiveOverlay(modifier = Modifier.rowWeight(1.0f).columnWeight(1.0f)) {}
        }
        TopLevelSynth(modifier = Modifier.rowWeight(1.0f)) {
            Label(modifier = Modifier.rowWeight(1.0f)) {
                Emoji(emoji = emoji)
                Title(
                    title = title,
                    modifier = Modifier.rowWeight(1.0f)
                )
            }
            Checkmark {
                if (isChecked) {
                    Icon()
                }
            }
        }
    }
}
  1. Aşağıdakilere dikkat edin:
  • Figma tasarımındaki tüm düzen ve stil oluşturulur.
  • Alt öğeler ayrı bileşenlere ayrılır.
  • Tüm tasarım varyantları için birleştirilebilir önizlemeler oluşturulur.
  • Renk ve yazı tipi stilleri koda yerleştirilmiştir. Bu sorunu daha sonra düzeltebilirsiniz.

Takip cihazını takma

  1. Android Studio'da java/com/google/relay/example/reflect/ui/components/TrackerControl.kt dosyasını açın. Bu dosya, alışkanlık izleyicilere veri ve etkileşim mantığı sağlar.
  2. Uygulamayı derleyip emülatörde çalıştırın. Şu anda bu bileşen, takip cihazı modelinden ham verileri döndürmektedir.

5d56f8a7065066b7.png

  1. com.google.relay.example.reflect.switch.Switch paketini dosyaya aktarın.
  2. Text(text = trackerData.tracker.toString()) öğesini, trackerData.tracker.type alanında dönen bir when bloğuyla değiştirin.
  3. Tür TrackerType.BOOLEAN olduğunda when bloğunun gövdesinde Switch() Composable işlevini çağırın.

Kodunuz aşağıdaki gibi görünmelidir:

TrackerControl.kt

// TODO: replace with Relay tracker components
when (trackerData.tracker.type) {
    TrackerType.BOOLEAN ->
        Switch(
          title = trackerData.tracker.name,
          emoji = trackerData.tracker.emoji
        )
    else ->
        Text(trackerData.tracker.toString())
}
  1. Projeyi yeniden oluşturun. Artık ana sayfa, geçiş izleyiciyi canlı verilerle tasarlandığı şekilde doğru şekilde oluşturuyor.

4241e78b9f82075b.png

6. Durum ve etkileşim ekleme

Kullanıcı arayüzü paketleri durum bilgisi içermez. Oluşturulan, iletilen parametrelerin basit bir sonucudur. Ancak gerçek uygulamalarda etkileşim ve durum gerekir. Etkileşim işleyicileri, diğer tüm parametreler gibi oluşturulan kompozisyonlara iletilebilir ancak bu işleyicilerin değiştirdiği durumu nerede saklarsınız? Her örneğe aynı işleyiciyi göndermekten nasıl kaçınabilirsiniz? Paketlerin kompozisyonlarını nasıl yeniden kullanılabilir bileşenlere dönüştürebilirsiniz? Bu durumlarda, oluşturulan paketlerinizi özel bir Composable işlevine sarmalamanızı öneririz.

Kullanıcı arayüzü paketlerini bir kontrol cihazı Composable işlevine sarmalama

Kullanıcı arayüzü paketlerini bir denetleyici Composable işlevine sarmalamak, sunumu veya iş mantığını özelleştirmenize ve gerekirse yerel durumu yönetmenize olanak tanır. Tasarımcılar, sarmalayıcı kodunu güncellemenize gerek kalmadan Figma'da orijinal kullanıcı arayüzü paketini güncellemeye devam edebilir.

Switch takip cihazı için bir denetleyici oluşturmak üzere aşağıdaki adımları uygulayın:

  1. Android Studio'da java/com/google/relay/example/reflect/ui/components/SwitchControl.kt dosyasını açın.
  2. SwitchControl() Composable işlevinde aşağıdaki parametreleri iletin:
  • trackerData: TrackerData nesnesi
  • modifier: bir süsleyici nesnesi
  • onLongClick: Düzenleme ve silme için izleyicilere uzun basmayı etkinleştirmek üzere bir etkileşim geri çağırma işlevi
  1. Tıklama ve uzun basma işlemlerini yönetmek için bir Switch() işlevi ekleyin ve bir combinedClickable değiştiricisi iletin.
  2. TrackerData nesnesinden Switch() işlevine isToggled() yöntemi dahil olmak üzere değerleri aktarın.

Tamamlanmış SwitchControl() işlevi şu kod snippet'ine benzer:

SwitchControl.kt

package com.google.relay.example.reflect.ui.components

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.combinedClickable
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.google.relay.example.reflect.model.Tracker
import com.google.relay.example.reflect.model.TrackerData
import com.google.relay.example.reflect.model.TrackerType
import com.google.relay.example.reflect.switch.Switch

/*
 * A component for controlling switch-type trackers.
 *
 * SwitchControl is responsible for providing interaction and state management to the stateless
 * composable [Switch] generated by Relay. [onLongClick] provides a way for callers to supplement
 * the control's intrinsic interactions with, for example, a context menu.
 */
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun SwitchControl(
    trackerData: TrackerData,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
) {
    Switch(
        modifier
            .clip(shape = RoundedCornerShape(size = 32.dp))
            .combinedClickable(onLongClick = onLongClick) {
                trackerData.toggle()
            },
        emoji = trackerData.tracker.emoji,
        title = trackerData.tracker.name,
        isChecked = trackerData.isToggled(),
    )
}

@Preview
@Composable
fun SwitchControllerPreview() {
    val data = TrackerData(
        Tracker(
            emoji = "🍕",
            name = "Ate Pizza",
            type = TrackerType.BOOLEAN
        )
    )
    SwitchControl(data)
}
  1. TrackerControl.kt dosyasında Switch içe aktarma işlemini kaldırın ve ardından Switch() işlevini SwitchControl() işlevini çağıran bir işlevle değiştirin.
  2. TrackerType.RANGE ve TrackerType.COUNT dize dizini sabitleri için durum ekleyin.

Tamamlanmış when bloğu şu kod snippet'ine benzer:

TrackerControl.kt

when (trackerData.tracker.type) {
    TrackerType.BOOLEAN ->
        SwitchControl(
            trackerData = trackerData,
            onLongClick = { expanded = true },
        )
    TrackerType.RANGE ->
        RangeControl(
            trackerData = trackerData,
            onLongClick = { expanded = true },
        )
    TrackerType.COUNT ->
        ValueControl(
            trackerData = trackerData,
            onLongClick = { expanded = true },
        )
}
  1. Projeyi yeniden oluşturun. Artık izleyicileri görüntüleyebilir ve onlarla etkileşimde bulunabilirsiniz. Ana ekran tamamlandı.

b23b94f0034243d3.png

7. Mevcut bileşenleri eşleme

Relay, geliştiricilerin kullanıcı arayüzü paketlerini mevcut bileşenlerle değiştirerek oluşturulan kodu özelleştirmesine olanak tanır. Bu, hazır bileşenleri veya hatta özel tasarım sistemlerini kodunuzda yayınlamanın mükemmel bir yoludur.

Metin alanını eşleme

Aşağıdaki resim, İzleyici ekle/düzenle iletişim kutusundaki Tracker Settings bileşeninin tasarımıdır:

Anahtar ayarları bileşeni için tasarım

Tasarımcımız tasarımda bir ReflectTextField kullandı. Bunun için Material Design 3 metin alanlarının üzerine kodla oluşturulmuş bir uygulamamız zaten mevcut. Figma, metin alanlarını doğal olarak desteklemediğinden Relay tarafından oluşturulan varsayılan kod yalnızca tasarıma benzer; işlevsel bir kontrol değildir.

TrackerSettings için mevcut uygulamayı test etmek üzere:

  1. Android Studio'da uygulamayı derleyip emülatörde çalıştırın.
  2. Bir takipçi satırına uzun basın ve Düzenle'yi seçin.
  3. Title metin alanına dokunun ve etkileşime yanıt vermediğini not edin.

Bu öğenin gerçek uygulamasını değiştirmek için iki şeye ihtiyacınız vardır: metin alanı kullanıcı arayüzü paketi ve eşleme dosyası. Neyse ki tasarımcımız, tasarım sistemi bileşenlerimizi Figma'da paketlemiş ve Tracker Settings için tasarımında bir metin alanı bileşeni kullanmıştı. Bu iç içe yerleştirilmiş paket varsayılan olarak bağımlılık olarak oluşturulur ancak bileşen eşlemeyi kullanarak paketi değiştirebilirsiniz.

Relay eklentisi yerleştirilmiş metin alanı için Figma bileşeni

Eşleme dosyası oluşturma

Android Studio için Relay eklentisi, bileşen eşleme dosyaları oluşturmak için bir kısayol sağlar.

Bir eşleme dosyası oluşturmak için aşağıdaki adımları uygulayın:

  1. Android Studio'da text_field kullanıcı arayüzü paketini sağ tıklayın ve Eşleme dosyası oluştur'u seçin.

Eşleme dosyası içerik menüsü öğesi oluşturma

  1. Bir eşleme dosyası iletişim kutusu gösterilir. Aşağıdaki seçenekleri girin:
  • Hedeflenebilir bileşimi bölümünde Mevcut bileşimi kullan'ı seçin ve com.google.relay.example.reflect.ui.components.ReflectTextField
  • Oluşturulan dosya bölümünde Uygulama oluştur'u işaretleyin ve Oluşturma Önizlemesi Oluştur'un işaretini kaldırın.

e776585c3b838b10.png

  1. Eşleme dosyası oluştur'u tıklayın. Bu işlem sonucunda aşağıdaki eşleme dosyası oluşturulur:

text_field.json

{
  "target": "ReflectTextField",
  "package": "com.google.relay.example.reflect.ui.components",
  "generateImplementation": true,
  "generatePreviews": false,
}

Bileşen eşleme dosyaları, bir Compose sınıfı hedefini ve paketini ve isteğe bağlı bir fieldMapping nesnesi koleksiyonunu tanımlar. Bu alan eşlemeleri, paket parametrelerini beklenen Oluşturma parametrelerine dönüştürmenize olanak tanır. Bu durumda API'ler aynı olduğundan yalnızca hedef sınıfı belirtmeniz gerekir.

  1. Projeyi yeniden oluşturun.
  2. trackersettings/ TrackerSettings.kt dosyasında, oluşturulan TitleFieldStyleFilledStateEnabledTextConfigurationsInputText() Kompozit işlevini bulun ve oluşturulan bir ReflectTextField bileşeni içerdiğini unutmayın.

TrackerSettings.kt (generated)

@Composable
fun TitleFieldStyleFilledStateEnabledTextConfigurationsInputText(
    onTitleChanged: (String) -> Unit,
    title: String,
    modifier: Modifier = Modifier
) {
    ReflectTextField(
        onChange = onTitleChanged,
        labelText = "Title",
        leadingIcon = "search",
        trailingIcon = "cancel",
        supportingText = "Supporting text",
        inputText = title,
        state = State.Enabled,
        textConfigurations = TextConfigurations.InputText,
        modifier = modifier.fillMaxWidth(1.0f).requiredHeight(56.0.dp)
    )
}
  1. Projeyi yeniden oluşturun. Artık takip cihazı ayarları alanlarıyla etkileşim kurabilirsiniz. Düzenleme ekranı tamamlandı.

8. Harita ile Compose temaları

Relay, varsayılan olarak renkler ve yazı tipleri için gerçek değerler oluşturur. Bu, çevirinin doğru olmasını sağlar ancak bileşenlerin Oluştur temalandırma sistemini kullanmasını engeller. Uygulamanızı koyu modda görüntülediğinizde bu durum açıkça görülebilir:

Koyu modu kullanan ve yanlış renkleri gösteren ana ekranın önizlemesi

Gün gezinme bileşeni neredeyse görünmez ve renkler yanlış. Bu sorunu düzeltmek için, oluşturulan kodunuzda Figma stillerini Compose tema jetonlarına bağlamak üzere Relay'deki stil eşleme özelliğini kullanırsınız. Bu, Relay ile Material Design 3 bileşenleri arasındaki görsel tutarlılığı artırır ve karanlık mod desteğini etkinleştirir.

1fac916db14929bb.png

Stil eşleme dosyası oluşturma

  1. Android Studio'da src/main/ui-package-resources dizinine gidin ve style-mappings adlı yeni bir dizin oluşturun. Bu dizinde, aşağıdaki kodu içeren bir figma_styles.json dosyası oluşturun:

figma_styles.json

{
  "figma": {
    "colors": {
      "Reflect Light/background": "md.sys.color.background",
      "Reflect Dark/background": "md.sys.color.background",
      "Reflect Light/on-background": "md.sys.color.on-background",
      "Reflect Dark/on-background": "md.sys.color.on-background",
      "Reflect Light/surface": "md.sys.color.surface",
      "Reflect Dark/surface": "md.sys.color.surface",
      "Reflect Light/on-surface": "md.sys.color.on-surface",
      "Reflect Dark/on-surface": "md.sys.color.on-surface",
      "Reflect Light/surface-variant": "md.sys.color.surface-variant",
      "Reflect Dark/surface-variant": "md.sys.color.surface-variant",
      "Reflect Light/on-surface-variant": "md.sys.color.on-surface-variant",
      "Reflect Dark/on-surface-variant": "md.sys.color.on-surface-variant",
      "Reflect Light/primary": "md.sys.color.primary",
      "Reflect Dark/primary": "md.sys.color.primary",
      "Reflect Light/on-primary": "md.sys.color.on-primary",
      "Reflect Dark/on-primary": "md.sys.color.on-primary",
      "Reflect Light/primary-container": "md.sys.color.primary-container",
      "Reflect Dark/primary-container": "md.sys.color.primary-container",
      "Reflect Light/on-primary-container": "md.sys.color.on-primary-container",
      "Reflect Dark/on-primary-container": "md.sys.color.on-primary-container",
      "Reflect Light/secondary-container": "md.sys.color.secondary-container",
      "Reflect Dark/secondary-container": "md.sys.color.secondary-container",
      "Reflect Light/on-secondary-container": "md.sys.color.on-secondary-container",
      "Reflect Dark/on-secondary-container": "md.sys.color.on-secondary-container",
      "Reflect Light/outline": "md.sys.color.outline",
      "Reflect Dark/outline": "md.sys.color.outline",
      "Reflect Light/error": "md.sys.color.error",
      "Reflect Dark/error": "md.sys.color.error"
    },
    "typography": {
      "symbols": {
        "Reflect/headline/large": "md.sys.typescale.headline-large",
        "Reflect/headline/medium": "md.sys.typescale.headline-medium",
        "Reflect/headline/small": "md.sys.typescale.headline-small",
        "Reflect/title/large": "md.sys.typescale.title-large",
        "Reflect/title/medium": "md.sys.typescale.title-medium",
        "Reflect/title/small": "md.sys.typescale.title-small",
        "Reflect/body/large": "md.sys.typescale.body-large",
        "Reflect/body/medium": "md.sys.typescale.body-medium",
        "Reflect/body/small": "md.sys.typescale.body-small",
        "Reflect/label/large": "md.sys.typescale.label-large",
        "Reflect/label/medium": "md.sys.typescale.label-medium",
        "Reflect/label/small": "md.sys.typescale.label-small"
      },
      "subproperties": {
        "fontFamily": "font",
        "fontWeight": "weight",
        "fontSize": "size",
        "letterSpacing": "tracking",
        "lineHeightPx": "line-height"
      }
    }
  },
  "compose": {
    "colors": {
      "md.sys.color.background": "MaterialTheme.colorScheme.background",
      "md.sys.color.error": "MaterialTheme.colorScheme.error",
      "md.sys.color.error-container": "MaterialTheme.colorScheme.errorContainer",
      "md.sys.color.inverse-on-surface": "MaterialTheme.colorScheme.inverseOnSurface",
      "md.sys.color.inverse-surface": "MaterialTheme.colorScheme.inverseSurface",
      "md.sys.color.on-background": "MaterialTheme.colorScheme.onBackground",
      "md.sys.color.on-error": "MaterialTheme.colorScheme.onError",
      "md.sys.color.on-error-container": "MaterialTheme.colorScheme.onErrorContainer",
      "md.sys.color.on-primary": "MaterialTheme.colorScheme.onPrimary",
      "md.sys.color.on-primary-container": "MaterialTheme.colorScheme.onPrimaryContainer",
      "md.sys.color.on-secondary": "MaterialTheme.colorScheme.onSecondary",
      "md.sys.color.on-secondary-container": "MaterialTheme.colorScheme.onSecondaryContainer",
      "md.sys.color.on-surface": "MaterialTheme.colorScheme.onSurface",
      "md.sys.color.on-surface-variant": "MaterialTheme.colorScheme.onSurfaceVariant",
      "md.sys.color.on-tertiary": "MaterialTheme.colorScheme.onTertiary",
      "md.sys.color.on-tertiary-container": "MaterialTheme.colorScheme.onTertiaryContainer",
      "md.sys.color.outline": "MaterialTheme.colorScheme.outline",
      "md.sys.color.primary": "MaterialTheme.colorScheme.primary",
      "md.sys.color.primary-container": "MaterialTheme.colorScheme.primaryContainer",
      "md.sys.color.secondary": "MaterialTheme.colorScheme.secondary",
      "md.sys.color.secondary-container": "MaterialTheme.colorScheme.secondaryContainer",
      "md.sys.color.surface": "MaterialTheme.colorScheme.surface",
      "md.sys.color.surface-variant": "MaterialTheme.colorScheme.surfaceVariant",
      "md.sys.color.tertiary": "MaterialTheme.colorScheme.tertiary",
      "md.sys.color.tertiary-container": "MaterialTheme.colorScheme.tertiaryContainer"
    },
    "typography": {
      "symbols": {
        "md.sys.typescale.display-large": "MaterialTheme.typography.displayLarge",
        "md.sys.typescale.display-medium": "MaterialTheme.typography.displayMedium",
        "md.sys.typescale.display-small": "MaterialTheme.typography.displaySmall",
        "md.sys.typescale.headline-large": "MaterialTheme.typography.headlineLarge",
        "md.sys.typescale.headline-medium": "MaterialTheme.typography.headlineMedium",
        "md.sys.typescale.headline-small": "MaterialTheme.typography.headlineSmall",
        "md.sys.typescale.title-large": "MaterialTheme.typography.titleLarge",
        "md.sys.typescale.title-medium": "MaterialTheme.typography.titleMedium",
        "md.sys.typescale.title-small": "MaterialTheme.typography.titleSmall",
        "md.sys.typescale.body-large": "MaterialTheme.typography.bodyLarge",
        "md.sys.typescale.body-medium": "MaterialTheme.typography.bodyMedium",
        "md.sys.typescale.body-small": "MaterialTheme.typography.bodySmall",
        "md.sys.typescale.label-large": "MaterialTheme.typography.labelLarge",
        "md.sys.typescale.label-medium": "MaterialTheme.typography.labelMedium",
        "md.sys.typescale.label-small": "MaterialTheme.typography.labelSmall"
      },
      "subproperties": {
        "font": "fontFamily",
        "weight": "fontWeight",
        "size": "fontSize",
        "tracking": "letterSpacing",
        "line-height": "lineHeight"
      }
    },
    "options": {
      "packages": {
        "MaterialTheme": "androidx.compose.material3"
      }
    }
  }
}

Tema eşleme dosyaları, iki üst düzey nesneyle (figma ve compose) yapılandırılır. Bu nesnelerin içinde renk ve tür tanımları, ara jetonlar aracılığıyla her iki ortam arasında bağlanır. Bu sayede birden fazla Figma stili tek bir Oluşturma teması girişiyle eşlenebilir. Bu, açık ve koyu temaları desteklerken kullanışlıdır.

  1. Eşleme dosyasını, özellikle de Figma'daki yazı tipi özelliklerini Compose'un beklediği şekilde nasıl yeniden eşlediğini inceleyin.

Kullanıcı arayüzü paketlerini yeniden içe aktarma

Bir eşleme dosyası oluşturduktan sonra, eşleme dosyası sağlanmadığı için ilk içe aktarma işleminde tüm Figma stil değerleri atlandığından tüm kullanıcı arayüzü paketlerini projenize yeniden içe aktarmanız gerekir.

Kullanıcı arayüzü paketlerini yeniden içe aktarmak için aşağıdaki adımları uygulayın:

  1. Android Studio'da Dosya > Yeni > Kullanıcı Arayüzü Paketlerini İçe Aktar'ı tıklayın. Kullanıcı Arayüzü Paketlerini İçe Aktar iletişim kutusu görüntülenir.
  2. Figma kaynak URL'si metin kutusuna Figma kaynak dosyasının URL'sini girin.
  3. Figma stillerini Oluştur temasına çevir onay kutusunu işaretleyin.
  4. Özel yapılandırmayı içe aktar'ı seçin. Klasör simgesini tıklayın ve yeni oluşturduğunuz dosyayı seçin: src/main/ui-package-resources/style-mappings/figma_styles.json.
  5. İleri'yi tıklayın. Dosyanın kullanıcı arayüzü paketlerinin önizlemesini görürsünüz.
  6. Oluştur'u tıklayın. Paketler projenize aktarılır.

Kullanıcı Arayüzü Paketlerini İçe Aktar iletişim kutusu

  1. Projenizi yeniden oluşturun ve oluşturulan kodu görüntülemek için switch/Switch.kt dosyasını açın.

Switch.kt (oluşturuldu)

@Composable
fun ActiveOverlay(
    modifier: Modifier = Modifier,
    content: @Composable RelayContainerScope.() -> Unit
) {
    RelayContainer(
        backgroundColor = MaterialTheme.colorScheme.surfaceVariant,
        isStructured = false,
        radius = 32.0,
        content = content,
        modifier = modifier.fillMaxWidth(1.0f).fillMaxHeight(1.0f)
    )
}
  1. backgroundColor parametresinin, Oluştur tema nesnesinde MaterialTheme.colorScheme.surfaceVariant alanına nasıl ayarlandığını fark edin.
  2. Projeyi çalıştırın ve emülatörde koyu modu açın. Tema doğru şekilde uygulanır ve görsel hatalar düzeltilir.

6cf2aa19fabee292.png

9. Tebrikler

Tebrikler! Relay'i Oluştur uygulamalarınıza nasıl entegre edeceğinizi öğrendiniz.

Daha fazla bilgi