Relay ve Jetpack Compose ile eksiksiz bir uygulama geliştirin

1. Başlamadan önce

Geçiş, 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. Yorucu tasarım spesifikasyonu ve kalite güvencesi döngüleri ihtiyacını ortadan kaldırarak ekiplerin hızlı bir şekilde mükemmel Android kullanıcı arayüzleri teslim etmesine 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. Geçişle ilgili genel iş akışı hakkında bilgi edinmek için Geçişle ilgili temel eğitime göz atın.

Ön koşullar

• Oluşturma ile temel deneyim. Henüz yapmadıysanız Jetpack Compose temel bilgileri codelab'ini tamamlayın.
• Kotlin söz dizimi deneyimi.

Neler öğreneceksiniz?

• Kullanıcı Arayüzü Paketleri nasıl içe aktarılır?
• Kullanıcı arayüzü paketlerinin gezinme ve veri mimarisiyle entegre edilmesi.
• Kullanıcı arayüzü paketlerini denetleyici mantığıyla sarmalama.
• Figma stillerini Compose temanızla eşleme.
• Oluşturulan koddaki kullanıcı arayüzü paketleri mevcut composable'larla nasıl değiştirilir?

Oluşturacaklarınız

• Bir tasarımcı tarafından sağlanan Relay paketlerine dayalı gerçekçi bir uygulama tasarımı. Farkındalığı ve iyi alışkanlıkları teşvik eden günlük takip uygulaması Reflect adlı uygulamanın adını alıyor. Çeşitli türlerde takip cihazları ve kullanıcı arayüzü içeren bir koleksiyonla eklenir ve yönetilir. Uygulama aşağıdaki görsele benzer:

Gerekenler

• Android Studio Electric Eel veya sonraki sürümler
• Ücretsiz bir Figma hesabı ve kişisel erişim jetonu

2. Hazırlanın

Kodu alma

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

• GitHub'dan relay-codelabs deposunu klonlayın:

$ git clone https://github.com/googlecodelabs/relay-codelabs

• GitHub'da relay-codelabs deposuna gidin, istediğiniz dalı seçin ve Kod > Zip dosyasını indirin ve indirilen zip dosyasını açın.

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

Relay for Android Studio eklentisini yükleme

Relay for Android Studio eklentiniz henüz yoksa şu adımları uygulayın:

1. Android Studio'da Ayarlar > Eklentiler.
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.

4. Üçüncü taraf eklentileri gizlilik notu iletişim kutusunu görürseniz Kabul et'i tıklayın.
5. Tamam > Yeniden başlatın.
6. Çıkışı onayla iletişim kutusunu görürseniz Çıkış'ı tıklayın.

Android Studio'yu Figma'ya bağlama

Geçiş, Figma API ile Kullanıcı Arayüzü Paketlerini alır. Bu aracı kullanmak için ücretsiz bir Figma hesabına ve bir kişisel erişim jetonuna ihtiyacınız vardır. Bu nedenle, bunlar İhtiyacınız olanlar bölümünde listelenmektedir.

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 tarafı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şlarına basın. Bir jeton oluşturulur.
3. Copy this token (Bu jetonu kopyala) seçeneğini tıklayın.

4. Android Studio'da Araçlar > Geçiş Ayarları. Geçiş ayarları iletişim kutusu görünür.
5. Figma Access Token metin kutusuna erişim jetonunu yapıştırın ve Tamam'ı tıklayın. Ortamınız ayarlandı.

Not: Geçiş geliştirme ortamının kurulumuyla ilgili daha fazla bilgi için Geçişi Yükleme'ye bakın.

3. Uygulamanın tasarımını inceleyin

Reflect uygulaması için uygulamanın rengini, yazı tipini, düzenini ve davranışını tanımlamamıza yardımcı olması için bir tasarımcıyla çalıştık. Uygulamanın Materyal bileşenler ve temalarla sorunsuz çalışması için bu tasarımları Materyal Tasarım 3 kurallarına uygun olarak oluşturduk.

Ana ekranı inceleme

Ana ekranda, kullanıcı tanımlı takip cihazlarının listesi görüntülenir. Ayrıca, aktif günü değiştirme ve başka takip cihazları oluşturma olanakları da sağlar.

Figma'da tasarımcımız bu ekranı birden fazla bileşene ayırdı, API'lerini tanımladı ve Relay for Figma eklentisi ile paketledi. Bu bileşenler paketlendikten sonra Android Studio projenize aktarabilirsiniz.

Not: Bileşen parametrelerinin tanımlanması, tasarımcılar ve geliştiriciler arasındaki ortak çalışmada en iyi sonucu verir. Bu, her iki rolün de bileşenin ve kullanılabilir seçeneklerinin birleşik görünümüne sahip olmasını sağlar.

Ekleme/düzenleme ekranını inceleyin.

Ekleme/düzenleme ekranı, kullanıcıların izleyici eklemesine veya düzenlemesine olanak tanır. Gösterilen form, takip cihazı türüne bağlı olarak biraz farklılık gösterir.

Benzer şekilde, bu ekran da paketlenmiş birden fazla bileşene bölünmüştür.

Temayı inceleyin

Bu tasarımdaki renkler ve yazı biçimi, Materyal Tasarım 3 jeton adlarına dayalı Figma stilleri olarak uygulanmıştır. Bu özellik, Compose temaları ve Materyal bileşenleriyle daha iyi birlikte çalışabilirlik sağlar.

4. Kullanıcı Arayüzü Paketlerini İçe Aktarın

Figma kaynağının bağlantısını alma

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ı izleyin:

1. Figma'da, Import file'ı (Dosyayı içe aktar) tıklayın ve ardından CompleteAppCodelab proje klasöründe bulunan ReflectDesign.fig dosyasını seçin.
2. Dosyayı sağ tıklayıp Bağlantıyı kopyala'yı seçin. Bir sonraki bölümde ihtiyacınız olacak.

Not: Figma kaynak dosyalarını bu codelab'in dışına aktarmanız gerekmez. Tasarımcılar bir URL sağlar.

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ın. Kullanıcı Arayüzü Paketlerini İçe Aktar iletişim kutusu görünür.
3. Figma kaynak URL'si metin kutusuna, önceki bölümde kopyaladığınız URL'yi yapıştırın.

4. Uygulama teması metin kutusuna com.google.relay.example.reflect.ui.theme.ReflectTheme yazın. Bu işlem, oluşturulan önizlemelerin özel temayı kullanmasını sağlar.
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.
7. Proje sekmesine gidin ve ardından ui-packages klasörünün yanındaki genişletici oku tıklayın.

Not: ui-packages klasörünü görmüyorsanız app klasörünü sağ tıklayın ve Diskten Yeniden Yükle'yi seçin.

8. Paket klasörlerinden birinin yanındaki genişletici okunu tıklayın, ardından JSON kaynak dosyası ve öğe bağımlılıkları içerdiğine dikkat edin.
9. JSON kaynak dosyasını açın. Geçiş modülü, paketin ve API'sinin önizlemesini görüntüler.

Kod derleme ve oluşturma

1. Android Studio'nun üst kısmında 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 composable'lar, 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ğuna dikkat edin. Gerekirse kodu ve önizleme bölmelerini yan yana görmek için Böl'ü tıklayın.

5. Bileşenleri entegre etme

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

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()
                }
            }
        }
    }
}

2. Aşağıdakilere dikkat edin:

• Figma tasarımından elde edilen tüm düzen ve stil oluşturulur.
• Alt öğeler ayrı composable'lara ayrılır.
• Oluşturulabilir Önizlemeler, tüm tasarım varyasyonları için oluşturulur.
• Renk ve tipografi stilleri sabit kodludur. Bunu daha sonra düzeltirsiniz.

Takip cihazını takın

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

3. com.google.relay.example.reflect.switch.Switch paketini dosyaya aktarın.
4. Text(text = trackerData.tracker.toString()) öğesini, trackerData.tracker.type alanında özetlenen bir when bloğuyla değiştirin.
5. when bloğunun gövdesinde, tür TrackerType.BOOLEAN olduğunda 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())
}

6. Projeyi yeniden oluşturun. Artık ana sayfa, Switch izleyiciyi canlı verilerle tasarlandığı şekilde doğru bir şekilde oluşturmaktadır.

6. Durum ve etkileşim ekle

Kullanıcı Arayüzü Paketleri durum bilgisizdir. Oluşturulan, iletilen parametrelerin basit bir sonucudur. Ancak gerçek uygulamalarda etkileşim ve durum gerekir. Etkileşim işleyiciler, diğer parametreler gibi oluşturulan composable'lara aktarılabilir, ancak bu işleyicilerin değiştirdiği durum nerede korunuyor? Her örneğe aynı işleyicinin iletilmesinden nasıl kaçınabilirsiniz? Paket kompozisyonlarını soyut olarak yeniden kullanılabilir composable'ları nasıl oluşturabilirsiniz? Böyle durumlarda, oluşturulan paketlerinizi özel bir Composable işlevinde sarmalamanızı öneririz.

Denetleyici Composable işlevinde kullanıcı arayüzü paketlerini sarmalama

Kullanıcı Arayüzü Paketlerini denetleyici Composable işlevinde 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'daki orijinal Kullanıcı Arayüzü Paketini güncelleyebilir.

Switch izleyici için bir kumanda 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: süsleme nesnesi
• onLongClick: Takipçilerin düzenleme ve silme işlemleri için uzun basmasını sağlayan etkileşim geri çağırması

Not: Model verilerini nesne olarak almak, denetleyici API'nizi Range veri şemasından ayırır.

3. Bir Switch() işlevi ekleyip tıklama ve uzun basma işlemlerini işlemek için combinedClickable değiştiricisi iletin.
4. Switch() işlevine, TrackerData nesnesinden isToggled() yöntemi de dahil olmak üzere değerler iletin.

Tamamlanmış SwitchControl() işlevi şu kod snippet'i gibi görünür:

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)
}

5. TrackerControl.kt dosyasında, Switch içe aktarma işlemini kaldırın ve ardından Switch() işlevini, SwitchControl() işlevine yapılan bir çağrıyla değiştirin.
6. TrackerType.RANGE ve TrackerType.COUNT numaralandırıcı sabitleri için olgu ekleyin.

Not: RangeControl() ve ValueControl() Composable işlevleri başlangıç kodunda zaten uygulanmıştır.

Tamamlanan when bloğu şu kod snippet'i gibi görünür:

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 },
        )
}

7. Projeyi yeniden derleyin. Artık izleyicileri gösterebilir ve izleyicilerle etkileşimde bulunabilirsiniz. Ana ekran tamamlandı.

7. Mevcut bileşenleri eşleyin

Geçiş, geliştiricilerin Kullanıcı Arayüzü Paketlerini mevcut composable'larla değiştirerek oluşturulan kodu özelleştirmesine olanak tanır. Bu, kodunuzda kullanıma hazır bileşenleri ve hatta özel tasarım sistemlerini ortaya çıkarmanı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:

Tasarımcımız tasarımda ReflectTextField kullandı. Bunun için Materyal Tasarım 3 metin alanlarının üzerine inşa edilmiş bir kod uygulamamız mevcuttur. Figma, metin alanlarını yerel olarak desteklemez, bu nedenle 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ı emülatörde oluşturun ve çalıştırın.
2. Takip cihazı satırına uzun basın ve Düzenle'yi seçin.
3. Title metin alanına dokunun ve bu alanın etkileşime yanıt vermediğini unutmayın.

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şenlerini Figma'da paketlemiş ve Tracker Settings için tasarımında bir metin alanı bileşeni kullanmıştır. Varsayılan olarak, bu iç içe yerleştirilmiş paket bir bağımlılık olarak oluşturulur, ancak bunu değiştirmek için bileşen eşlemeyi kullanırsınız.

Eşleme dosyası oluşturma

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

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 ardından Eşleme dosyası oluştur'u seçin.

2. Eşleme dosyası iletişim kutusu gösterilir. Aşağıdaki seçenekleri girin:

• Target composable bölümünde, Mevcut composable'ı kullan'ı seçip com.google.relay.example.reflect.ui.components.ReflectTextField değerini girin.
• Oluşturulan dosya bölümünde Uygulama oluştur'u işaretleyin ve Oluşturma Önizlemesi Oluştur seçeneğinin işaretini kaldırın

3. Eşleme dosyası oluştur'u tıklayın. Bu işlem, aşağıdaki eşleme dosyasını oluşturur:

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 hedefi ve paketi ile fieldMapping nesnelerinden oluşan isteğe bağlı bir koleksiyonu tanımlar. Bu alan eşlemeleri, paket parametrelerini beklenen Compose parametrelerine dönüştürmenizi sağlar. Bu durumda API'ler aynı olduğundan yalnızca hedef sınıfı belirtmeniz gerekir.

4. Projeyi yeniden derleyin.
5. trackersettings/ TrackerSettings.kt dosyasında, oluşturulan TitleFieldStyleFilledStateEnabledTextConfigurationsInputText() Oluşturulabilir işlevini bulun ve oluşturulmuş ReflectTextField bileşeni içerdiğini unutmayın.

TrackerSettings.kt (oluşturuldu)

@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)
    )
}

6. Projeyi yeniden derleyin. Artık takip cihazı ayarları alanlarıyla etkileşimde bulunabilirsiniz. Düzenleme ekranı tamamlandı.

Not: Geçiş bileşeni eşlemesi hakkında daha fazla bilgi için Bileşenleri mevcut kodla eşleme başlıklı makaleye bakın.

8. Oluşturma temalarıyla eşleme

Varsayılan olarak, Relay renkler ve tipografi için değişmez değerler oluşturur. Bu, çeviri doğruluğunu sağlar ancak bileşenlerin Oluştur tema oluşturma sistemini kullanmasını engeller. Bu durum, uygulamanızı koyu modda görüntülediğinizde belirgindir:

Gün gezinme bileşeni neredeyse görünmüyor ve renkler yanlış. Bu sorunu düzeltmek için Geçiş'te stil eşleme özelliğini kullanarak Figma stillerini, oluşturulan kodunuzdaki Oluşturma tema jetonlarına bağlayabilirsiniz. Bu, Geçiş ve Materyal Tasarım 3 bileşenleri arasındaki görsel tutarlılığı artırır ve koyu mod desteğini sağlar.

Stil eşleme dosyası oluşturma

1. Android Studio'da src/main/ui-package-resources dizinine gidip style-mappings adlı yeni bir dizin oluşturun. 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 yapılandırılır: figma ve compose. Bu nesnelerin içindeki renk ve tür tanımları, ara jetonlar aracılığıyla her iki ortam arasında bağlanır. Bu, birden fazla Figma stilinin tek bir Compose tema girişiyle eşlenmesine olanak tanır. Açık ve koyu temaları desteklediğinizde bu özellik kullanışlıdır.

2. Eşleme dosyasını, özellikle de Figma'daki tipografi özelliklerini Compose'un beklentileriyle nasıl yeniden eşleştirdiğini inceleyin.

Not: Geçiş stili eşleme hakkında daha fazla bilgi için Stilleri Oluştur temasıyla eşleme konusuna bakın.

Kullanıcı Arayüzü Paketlerini Yeniden İçe Aktarma

Bir eşleme dosyası oluşturduktan sonra, eşleme dosyası sağlanmadığından tüm Figma stili değerleri ilk içe aktarma sırasında silindiğinden tüm Kullanıcı Arayüzü Paketlerini projenize yeniden aktarmanız gerekir.

Kullanıcı Arayüzü Paketlerini yeniden içe aktarmak için şu adımları izleyin:

1. Android Studio'da Dosya > Yeni > Kullanıcı Arayüzü Paketlerini İçe Aktarın. Kullanıcı Arayüzü Paketlerini İçe Aktar iletişim kutusu görünür.
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 ardından 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.

7. Projenizi yeniden derleyin 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)
    )
}

8. backgroundColor parametresinin Oluştur tema nesnesindeki MaterialTheme.colorScheme.surfaceVariant alanına nasıl ayarlandığına dikkat edin.
9. Projeyi çalıştırın ve emülatörde koyu modu etkinleştirin. Tema doğru bir şekilde uygulanmış ve görsel hatalar düzeltilmiştir.

9. Tebrikler

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

Daha fazla bilgi

• Geçişe genel bakış, kurulum ve belgeler
• Geçişle ilgili temel eğitim
• Geçişle ilgili gelişmiş eğitim
• Geçiş Bülteni'ne kaydolun