XML temalarını Compose'da Material 3'e taşıma

Mevcut bir uygulamada Compose'u kullanmaya başladığınızda, Compose bileşenlerinde MaterialTheme kullanmak için Material XML temalarınızı taşımanız gerekir. Bu, uygulamanızın temalandırmasının iki doğruluk kaynağı olacağı anlamına gelir: View tabanlı tema ve Compose teması. Stilinizde yapacağınız değişikliklerin birden fazla yerde yapılması gerekir. Uygulamanız Compose'a tamamen taşındıktan sonra XML temalandırmanızı kaldırın.

Renkleri taşımak için Material Theme Builder aracını kullanabilirsiniz.

XML'den Compose'a taşıma işlemine başladığınızda temayı Material 3 Compose temasına taşıyın.

Sözlük

Terim Tanım
MaterialTheme Compose kullanıcı arayüzü bileşenlerine tema (renkler, tipografi, şekiller) sağlayan composable işlevi.
Shape MaterialTheme için özel bileşen şekillerini tanımlamak üzere kullanılan bir Compose nesnesi.
Typography Bir MaterialTheme için özel metin stillerini (yazı tipi aileleri, boyutlar, ağırlıklar) tanımlamak üzere kullanılan bir Compose nesnesi.
Color MaterialTheme için özel renk şemalarını tanımlamak üzere kullanılan bir Compose nesnesi.
XML Teması XML dosyalarında tanımlanan ve View sistemi tarafından kullanılan Android tema sistemi.

Sınırlamalar

Taşıma işlemine başlamadan önce aşağıdaki sınırlamaları göz önünde bulundurun:

  • Bu kılavuz yalnızca Material 3'e geçişe odaklanmaktadır. Alternatif tasarım sistemlerinden geçiş yapmak için Material 2 veya Compose'da özel tasarım sistemleri başlıklı makaleleri inceleyin.
  • Nihai hedef, Compose'a tam geçiş yaparak XML temalandırmanın kaldırılmasını sağlamaktır. Bu kılavuzda nasıl taşıma yapılacağı açıklanmaktadır ancak XML temalandırmanın nasıl tamamen kaldırılacağı açıklanmamaktadır.

1. adım: Tasarım sistemini değerlendirin

XML Görünümü projesinde hangi tasarım sisteminin kullanıldığını belirleyin. Mevcut tasarım sistemini Compose'da Material 3'e taşımak için gereken taşıma yolunu ve adımları analiz edin.

2. adım: Tema kaynak dosyalarını belirleyin

Temalandırma için gerekli tüm XML kaynaklarını ve dosyalarını (açık ve koyu renk şemaları, temalar, şekiller, boyutlar, tipografi, stiller ve diğer ilgili dosyalar) belirleyip bulun.

Dizeler gibi kaynaklar olduğu gibi yeniden kullanılabilir ve taşınması gerekmez.

3. adım: Renkleri taşıyın

Koyu ve açık renk şemalarını XML'den Material 3 Compose'daki eşdeğerlerine taşıyın.

4. adım: Özel şekilleri ve tipografiyi taşıyın

  • Uygulamanızda özel şekiller kullanılıyorsa:

    1. Compose kodunuzda, XML şekil tanımlarınızı kopyalamak için bir Shape nesnesi tanımlayın.
    2. Shape nesnesini MaterialTheme öğenize sağlayın.

      Daha fazla bilgi için şekiller bölümüne bakın.

  • Uygulamanızda özel tipografi kullanılıyorsa:

    1. Oluşturma kodunuzda, XML metin stillerinizi ve yazı tipi tanımlarınızı kopyalamak için Typography nesnesi tanımlayın.
    2. Typography nesnesini MaterialTheme öğenize sağlayın.

      Daha fazla bilgi için tipografi bölümüne bakın.

5. adım: Tema taşımayı doğrulayın

Compose'daki yeni Material teması için her zaman orijinal XML temasındaki mevcut tema değerlerini doğru kaynak olarak kullanın. Marka tutarlılığını korumak ve görsel gerilemeleri önlemek için taşıma sırasında asla yeni tema değerleri oluşturmayın.

Tüm yeni Compose teması değerlerinin mevcut XML değerleriyle eşleştiğini doğrulayın. Migrasyonu yapılan değerleri sabit kodlamayın.