Material 3 Etkileyici, Materyal Tasarımın bir sonraki sürümüdür. Güncellenen temalar, bileşenler ve dinamik renk gibi kişiselleştirme özellikleri içerir.

Bu kılavuzda, uygulamalar için Wear Compose Material 2.5 (androidx.wear.compose) Jetpack kitaplığından Wear Compose Material 3 (androidx.wear.compose.material3) Jetpack kitaplığına geçiş ele alınmaktadır.

Yaklaşımlar

Uygulama kodunuzu M2.5'ten M3'e taşımak için Kompozisyon Materyali taşıma telefon kılavuzunda açıklanan yaklaşımı uygulayın. Özellikle:

• Tek bir uygulamada uzun süreli olarak hem M2.5 hem de M3'ü kullanmamalısınız.
• Aşama aşama yaklaşım

Bağımlılıklar

M3, M2.5'ten ayrı bir pakete ve sürüme sahiptir:

implementation("androidx.wear.compose:compose-material:1.4.0")

implementation("androidx.wear.compose:compose-material3:1.5.0-beta01")

En son M3 sürümlerini Wear Compose Material 3 sürümleri sayfasında bulabilirsiniz.

Wear Compose Foundation kitaplığının 1.5.0-beta01 sürümünde, Material 3 bileşenleriyle çalışacak şekilde tasarlanmış bazı yeni bileşenler kullanıma sunulmuştur. Benzer şekilde, Wear Compose Navigation kitaplığındaki SwipeDismissableNavHost, Wear OS 6 (API düzeyi 36) veya sonraki sürümlerde çalıştırıldığında güncellenmiş bir animasyona sahiptir. Wear Compose Material 3 sürümüne güncelleme yaparken Wear Compose Foundation ve Navigation kitaplıklarını da güncellemenizi öneririz:

implementation("androidx.wear.compose:compose-foundation:1.5.0-beta01")
implementation("androidx.wear.compose:compose-navigation:1.5.0-beta01")

Tema oluşturma

Hem M2.5 hem de M3'te tema bileşeni MaterialTheme olarak adlandırılır ancak içe aktarma paketleri ve parametreleri farklıdır. M3'te Colors parametresi ColorScheme olarak yeniden adlandırıldı ve geçişleri uygulamak için MotionScheme tanıtıldı.

import androidx.wear.compose.material.MaterialTheme

MaterialTheme(
        colors = AppColors,
        typography = AppTypography,
        shapes = AppShapes,
        content = content
)

import androidx.wear.compose.material3.MaterialTheme

MaterialTheme(
        colorScheme = AppColorScheme,
        typography = AppTypography,
        shapes = AppShapes,
        motionScheme = AppMotionScheme,
        content = content
)

Renk

M3'teki renk sistemi, M2.5'ten önemli ölçüde farklıdır. Renk parametrelerinin sayısı arttı, farklı adlara sahipler ve M3 bileşenleriyle farklı şekilde eşleniyorlar. Oluşturma'da bu durum M2.5 Colors sınıfı, M3ColorScheme sınıfı ve ilgili işlevler için geçerlidir:

import androidx.wear.compose.material.Colors

val appColorScheme: Colors = Colors(
   // M2.5 Color parameters
)

import androidx.wear.compose.material3.ColorScheme

val appColorScheme: ColorScheme = ColorScheme(
   // M3 ColorScheme parameters
)

Aşağıdaki tabloda M2.5 ile M3 arasındaki temel farklılıklar açıklanmaktadır:

Dinamik Renk Teması

M3'teki yeni özelliklerden biri dinamik renk temalarıdır. Kullanıcılar kadran renklerini değiştirirse kullanıcı arayüzündeki renkler de eşleşecek şekilde değişir.

Dinamik renk şemasını uygulamak için dynamicColorScheme işlevini kullanın ve dinamik renk şeması kullanılamadığında yedek olarak defaultColorScheme sağlayın.

@Composable
fun myApp() {
  val myColorScheme = myBrandColors()
  val dynamicColorScheme = dynamicColorScheme(LocalContext.current)
  MaterialTheme(colorScheme = dynamicColorScheme ?: myBrandColors) {...}
}

Yazı biçimi

M3'teki tipografi sistemi, M2'den farklıdır ve aşağıdaki özellikleri içerir:

• Dokuz yeni metin stili
• Farklı kalınlıklar, genişlikler ve yuvarlaklıklar için yazı ölçeklerinin özelleştirilmesine olanak tanıyan esnek yazı tipleri

• AnimatedText, esnek yazı tipleri kullanır

import androidx.wear.compose.material.Typography

val Typography = Typography(
   // M2.5 TextStyle parameters
)

import androidx.wear.compose.material3.Typography

val Typography = Typography(
   // M3 TextStyle parameters
)

Esnek Yazı Tipleri

Esnek yazı tipleri, tasarımcıların belirli boyutlar için yazı tipi genişliğini ve ağırlığını belirtmesine olanak tanır.

Metin Stilleri

M3'te aşağıdaki metin stilleri kullanılabilir. Bunlar, M3'ün çeşitli bileşenleri tarafından varsayılan olarak kullanılır.

Şekil

M3'teki şekil sistemi, M2'den farklıdır. Şekil parametrelerinin sayısı arttı, farklı şekilde adlandırıldı ve M3 bileşenleriyle farklı şekilde eşlendi. Aşağıdaki şekil boyutları kullanılabilir:

• Ekstra küçük
• Küçük
• Orta zorlukta
• Büyük
• Ekstra büyük

Oluşturma'da bu, M2 Şekiller sınıfı ve M3 Şekiller sınıfı için geçerlidir:

import androidx.wear.compose.material.Shapes

val Shapes = Shapes(
   // M2.5 Shapes parameters
)

import androidx.wear.compose.material3.Shapes

val Shapes = Shapes(
   // M3 Shapes parameters
)

Başlangıç noktası olarak Oluşturma'da 2. materyalden 3. materyale geçme başlıklı makaledeki Şekiller parametresi eşlemesini kullanın.

Şekil dönüşümü

M3, Şekil Değiştirme özelliğini kullanıma sundu: Şekiller artık etkileşimlere yanıt olarak değişiyor.

Şekil Dönüşüm davranışı, çeşitli yuvarlak düğmelerde bir varyasyon olarak kullanılabilir. Aşağıya bakın:

Bileşenler ve Düzen

M2.5'teki bileşenlerin ve düzenlerin çoğu M3'te kullanılabilir. Ancak bazı M3 bileşenleri ve düzenleri M2.5'te mevcut değildi. Ayrıca bazı M3 bileşenleri, M2.5'teki eşdeğerlerine kıyasla daha fazla varyasyona sahiptir.

Bazı bileşenler için özel hususlar dikkate alınmalıdır. Başlangıç noktası olarak aşağıdaki işlev eşlemelerini kullanabilirsiniz:

Tüm Material 3 bileşenlerinin tam listesini aşağıda bulabilirsiniz:

Son olarak, Wear Compose Foundation kitaplığının 1.5.0-beta01 sürümündeki bazı ilgili bileşenlerin listesi:

Düğmeler

M3'teki düğmeler M2,5'ten farklıdır. M2.5 çip, düğmeyle değiştirildi. Button uygulaması, Text maxLines ve textAlign için varsayılan değerler sağlar. Bu varsayılan değerler, Text öğesinde geçersiz kılınabilir.

import androidx.wear.compose.material.Chip

//M2.5 Buttons
Chip(...)
CompactChip(...)
Button(...)

import androidx.wear.compose.material3.Button

//M3 Buttons
Button(...)
CompactButton(...)
IconButton(...)
TextButton(...)

M3, yeni düğme varyantları da içerir. Compose Material 3 API referansına genel bakış başlıklı makalede bu bilgilere göz atabilirsiniz.

M3, EdgeButton adlı yeni bir düğme sunar. EdgeButton 4 farklı bedenle (extra small, small, medium ve large) sunulur. EdgeButton uygulaması, özelleştirilebilen boyuta bağlı olarak maxLines için varsayılan bir değer sağlar.

TransformingLazyColumn ve ScalingLazyColumn kullanıyorsanız EdgeButton öğesini ScreenScaffold öğesine iletin. Böylece, kaydırmayla şeklini değiştirerek dönüşüm gerçekleştirir. EdgeButton'ü ScreenScaffold ve TransformingLazyColumn ile nasıl kullanacağınızı öğrenmek için aşağıdaki koda bakın.

import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.ScreenScaffold

ScreenScaffold(
   scrollState = state,
   contentPadding = contentPadding,
   edgeButton = {
      EdgeButton(...)
   }
){ contentPadding ->
   TransformingLazyColumn(state = state, contentPadding = contentPadding,){
   // additional code here
   }
}

İskele

M3'teki iskele, M2.5'ten farklıdır. M3'te AppScaffold ve yeni ScreenScaffold bileşeni, Scaffold'un yerini aldı. AppScaffold ve ScreenScaffold, ekranın yapısını düzenler ve ScrollIndicator ile TimeText bileşenlerinin geçişlerini koordine eder.

AppScaffold, TimeText gibi statik ekran öğelerinin, kaydırarak kapatma gibi uygulama içi geçişler sırasında görünür kalmasına olanak tanır. ​​Ana uygulama içeriği için bir yuva sağlar. Bu yuva genellikle SwipeDismissableNavHost gibi bir gezinme bileşeni tarafından sağlanır.

Etkinlik için bir AppScaffold tanımlar ve her ekran için bir ScreenScaffold kullanırsınız.

import androidx.wear.compose.material.Scaffold

Scaffold {...}

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.ScreenScaffold

AppScaffold {
   // Define the navigation hierarchy within the AppScaffold,
   // such as using SwipeDismissableNavHost.
   SwipeDismissableNavHost(...) {
      composable("home") {
         HomeScreen()
      }
      //other screens
   }
}
fun HomeScreen() {
    val scrollState = rememberScrollState()
    ScreenScaffold(scrollState = scrollState) {
    //rest of the screen code
    }
}

HorizontalPagerIndicator ile HorizontalPager kullanıyorsanız HorizontalPagerScaffold'e geçebilirsiniz. HorizontalPagerScaffold, bir AppScaffold içine yerleştirilir. AppScaffold ve HorizontalPagerScaffold, bir Sayfalayıcı'nın yapısını düzenler ve HorizontalPageIndicator ileTimeText bileşenlerinin geçişlerini koordine eder.

HorizontalPagerScaffold, varsayılan olarak ekranın orta ucunda HorizontalPageIndicator'u gösterir ve Pager'ın sayfaya ayrılıp ayrılmadığına göre TimeText ile HorizontalPageIndicator'u göstermeyi/gizlemeyi koordine eder. Bu, PagerState tarafından belirlenir.

Ayrıca, bir Sayfalayıcı içindeki sayfayı konumuna göre ölçeklendirme ve sis efektiyle animasyonlu hale getiren yeni bir AnimatedPage bileşeni de vardır.

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.HorizontalPagerScaffold
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.foundation.pager.HorizontalPager
import androidx.wear.compose.foundation.pager.rememberPagerState

AppScaffold {
    val pagerState = rememberPagerState(pageCount = { 10 })

    HorizontalPagerScaffold(pagerState = pagerState) {
       HorizontalPager(
          state = pagerState,
        ) { page ->
            AnimatedPage(pageIndex = page, pagerState = pagerState) {
                ScreenScaffold {
…
   }
}

Son olarak M3, HorizontalPagerScaffold ile aynı kalıbı izleyen bir VerticalPagerScaffold sunar:

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.HorizontalPagerScaffold
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.foundation.pager.VerticalPager
import androidx.wear.compose.foundation.pager.rememberPagerState

AppScaffold {
   val pagerState = rememberPagerState(pageCount = { 10 })

   VerticalPagerScaffold(pagerState = pagerState) {
      VerticalPager(
         state = pagerState
      ) { page ->
             AnimatedPage(pageIndex = page, pagerState = pagerState){
                ScreenScaffold {
        …
   }
}

Yer tutucu

M2.5 ile M3 arasında bazı API değişiklikleri vardır. Placeholder.PlaceholderDefaults artık iki değiştirici sağlar:

• Henüz yüklenmemiş içerik yerine çizilen Modifier.placeholder
• Verilerin yüklenmesini beklerken animasyon döngüsünde çalışan bir yer tutucu parıltı efekti sağlayan yer tutucu parıltı efekti Modifier.placeholderShimmer.

Placeholder bileşeninde yapılan diğer değişiklikler için aşağıya bakın.

SwipeDismissableNavHost

SwipeDismissableNavHost, wear.compose.navigation kuruluşunun bir parçasıdır. Bu bileşen M3 ile kullanıldığında M3 MaterialTheme, LocalSwipeToDismissBackgroundScrimColor ve LocalSwipeToDismissContentScrimColor öğelerini günceller.

TransformingLazyColumn

TransformingLazyColumn, wear.compose.lazy.foundation'un bir parçasıdır ve kaydırma sırasında liste öğelerinde ölçeklendirme ve şekil değiştirme animasyonları için destek ekleyerek kullanıcı deneyimini iyileştirir.

ScalingLazyColumn ile benzer şekilde, rememberTransformingLazyColumnState()'a, bestelerde akılda kalan bir TransformingLazyColumnState oluşturma olanağı sunar.

Ölçeklendirme ve şekil değiştirme animasyonları eklemek için her liste öğesine aşağıdakileri ekleyin:

• Modifier.transformedHeight, TransformationSpec kullanarak öğelerin dönüştürülmüş yüksekliğini hesaplamanıza olanak tanır. Daha fazla özelleştirmeye ihtiyacınız yoksa rememberTransformationSpec() kullanabilirsiniz.
• SurfaceTransformation

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.SurfaceTransformation
import androidx.wear.compose.material3.lazy.rememberTransformationSpec
import androidx.wear.compose.material3.lazy.transformedHeight
import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState
import androidx.wear.compose.foundation.lazy.TransformingLazyColumn

val state = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
AppScaffold {
   ScreenScaffold(state) { contentPadding ->
      TransformingLazyColumn(state = state, contentPadding = contentPadding) {
         items(count = 50) {
            Button(
               onClick = {},
               modifier =
                        Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                        transformation = SurfaceTransformation(transformationSpec),
                    ) {
                        Text("Item $it")
                    }
                }
            }
        }
    }

Faydalı bağlantı

Compose'da M2.5'ten M3'e geçiş hakkında daha fazla bilgi edinmek için aşağıdaki ek kaynaklara göz atın.

Örnekler

GitHub'daki Material3 dalında Wear OS örnekleri

Wear OS için kodlama codelab'i

API referansı ve kaynak kodu

• Compose Material 3 API referansı
• Kaynak kodda Material 3 örnekleri oluşturma

Tasarım

• Tasarımla ilgili yönergeler