Material 3 Expressive เป็นวิวัฒนาการขั้นถัดไปของ Material Design ซึ่งรวมถึงธีม คอมโพเนนต์ และฟีเจอร์การปรับแต่งในแบบของคุณที่อัปเดตแล้ว เช่น สีแบบไดนามิก

คู่มือนี้มุ่งเน้นที่การย้ายข้อมูลจากไลบรารี Jetpack ของ Wear Compose Material 2.5 (androidx.wear.compose) ไปยังไลบรารี Jetpack ของ Wear Compose Material 3 (androidx.wear.compose.material3) สำหรับแอป

แนวทาง

หากต้องการย้ายข้อมูลโค้ดแอปจาก M2.5 ไปยัง M3 ให้ทําตามแนวทางเดียวกับที่อธิบายไว้ในคําแนะนําในการย้ายข้อมูลโทรศัพท์ของ Compose Material โดยเฉพาะอย่างยิ่ง

• คุณไม่ควรใช้ทั้ง M2.5 และ M3 ในแอปเดียวในระยะยาว
• ใช้แนวทางแบบเป็นขั้นเป็นตอน

ทรัพยากร Dependency

M3 มีแพ็กเกจและเวอร์ชันแยกต่างหากจาก M2.5 ดังนี้

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

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

ดู M3 เวอร์ชันล่าสุดได้ในหน้ารุ่น Wear Compose Material 3

ไลบรารี Wear Compose Foundation เวอร์ชัน 1.5.0-beta01 เปิดตัวคอมโพเนนต์ใหม่บางรายการที่ออกแบบมาให้ทำงานร่วมกับคอมโพเนนต์ Material 3 ในทํานองเดียวกัน SwipeDismissableNavHost จากไลบรารีการนําทางของ Wear Compose จะมีภาพเคลื่อนไหวที่อัปเดตเมื่อทํางานใน Wear OS 6 (API ระดับ 36) ขึ้นไป เมื่ออัปเดตเป็น Wear Compose เวอร์ชัน Material 3 เราขอแนะนำให้อัปเดตไลบรารีพื้นฐานและการนำทางของ Wear Compose ด้วย โดยทำดังนี้

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

ธีม

ทั้ง M2.5 และ M3 คอมโพสิชันธีมจะมีชื่อว่า MaterialTheme แต่แพ็กเกจและพารามิเตอร์การนําเข้าจะแตกต่างกัน ใน M3 เราได้เปลี่ยนชื่อพารามิเตอร์ Colors เป็น ColorScheme และเพิ่ม MotionScheme มาใช้กับการเปลี่ยน

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
)

สี

ระบบสีใน M3 แตกต่างจาก M2.5 อย่างมาก จำนวนพารามิเตอร์สีเพิ่มขึ้น มีชื่อต่างกัน และแมปกับคอมโพเนนต์ M3 ต่างกัน ในเครื่องมือเขียน รูปแบบนี้จะมีผลกับคลาส M2.5 Colors, คลาส M3 ColorScheme และฟังก์ชันที่เกี่ยวข้อง

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
)

ตารางต่อไปนี้อธิบายความแตกต่างที่สําคัญระหว่าง M2.5 กับ M3

ธีมสีแบบไดนามิก

ฟีเจอร์ใหม่ใน M3 คือธีมสีแบบไดนามิก หากผู้ใช้เปลี่ยนสีหน้าปัด สีใน UI จะเปลี่ยนตาม

ใช้ฟังก์ชัน dynamicColorScheme เพื่อใช้รูปแบบสีแบบไดนามิก และระบุ defaultColorScheme เป็นค่าสำรองในกรณีที่รูปแบบสีแบบไดนามิกไม่พร้อมใช้งาน

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

การพิมพ์

ระบบแบบอักษรใน M3 แตกต่างจาก M2 และมีฟีเจอร์ต่อไปนี้

• รูปแบบข้อความใหม่ 9 รูปแบบ
• แบบอักษรแบบยืดหยุ่น ซึ่งช่วยให้ปรับขนาดแบบอักษรสำหรับความหนา ความกว้าง และระดับความโค้งได้

• AnimatedText ซึ่งใช้แบบอักษร Flex

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
)

แบบอักษร Flex

แบบอักษร Flex ช่วยให้นักออกแบบระบุความกว้างและน้ำหนักของแบบอักษรสำหรับขนาดที่ต้องการได้

รูปแบบข้อความ

TextStyles ต่อไปนี้พร้อมใช้งานใน M3 คอมโพเนนต์ต่างๆ ของ M3 จะใช้ค่าเหล่านี้โดยค่าเริ่มต้น

รูปทรง

ระบบรูปร่างใน M3 แตกต่างจาก M2 จำนวนพารามิเตอร์ของรูปร่างเพิ่มขึ้น มีการตั้งชื่อต่างกัน และจับคู่กับคอมโพเนนต์ M3 ต่างกัน รูปร่างมี 3 ขนาด ได้แก่

• เล็กพิเศษ
• เล็ก
• ปานกลาง
• ใหญ่
• ใหญ่พิเศษ

ในเครื่องมือเขียน คำสั่งนี้จะมีผลกับคลาส Shapes ของ M2 และคลาส Shapes ของ M3

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
)

ใช้การแมปพารามิเตอร์รูปร่างจากย้ายข้อมูลจาก Material 2 ไปยัง Material 3 ใน Compose เป็นจุดเริ่มต้น

การเปลี่ยนรูปร่าง

M3 เปิดตัวการเปลี่ยนรูปร่าง: ตอนนี้รูปร่างจะเปลี่ยนรูปตามการโต้ตอบ

ลักษณะการแปรสภาพรูปร่างมีให้บริการเป็นรูปแบบของปุ่มกลมหลายแบบ โปรดดูด้านล่าง

คอมโพเนนต์และเลย์เอาต์

คอมโพเนนต์และเลย์เอาต์ส่วนใหญ่จาก M2.5 มีให้บริการใน M3 อย่างไรก็ตาม คอมโพเนนต์และเลย์เอาต์ M3 บางรายการไม่มีอยู่ใน M2.5 นอกจากนี้ คอมโพเนนต์ M3 บางรายการยังมีรูปแบบมากกว่าคอมโพเนนต์ที่เทียบเท่าใน M2.5

แม้ว่าคอมโพเนนต์บางอย่างจะต้องพิจารณาเป็นพิเศษ แต่เราขอแนะนําให้ใช้การแมปฟังก์ชันต่อไปนี้เป็นจุดเริ่มต้น

รายการคอมโพเนนต์ Material 3 ทั้งหมดมีดังนี้

และสุดท้ายคือรายการคอมโพเนนต์ที่เกี่ยวข้องบางส่วนจากไลบรารี Wear Compose Foundation เวอร์ชัน 1.5.0-beta01

ปุ่ม

ปุ่มใน M3 แตกต่างจาก M2.5 ปุ่มเข้ามาแทนที่ชิป M2.5 แล้ว การติดตั้งใช้งาน Button จะมีค่าเริ่มต้นสําหรับ Text maxLines และ textAlign คุณสามารถลบล้างค่าเริ่มต้นเหล่านั้นได้ในองค์ประกอบ Text

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 ยังมีปุ่มรูปแบบใหม่ด้วย โปรดดูข้อมูลในภาพรวมเอกสารอ้างอิง API ของ Compose Material 3

M3 เปิดตัวปุ่มใหม่: EdgeButton EdgeButton มี 4 ขนาด ได้แก่ เล็กพิเศษ เล็ก กลาง และใหญ่ การติดตั้งใช้งาน EdgeButton ให้ค่าเริ่มต้นสำหรับ maxLines โดยขึ้นอยู่กับขนาดที่ปรับแต่งได้

หากคุณใช้ TransformingLazyColumn และ ScalingLazyColumn ให้ส่ง EdgeButton ไปยัง ScreenScaffold เพื่อให้เปลี่ยนรูปร่างตามการเลื่อน ดูรหัสด้านล่างเพื่อดูวิธีใช้ EdgeButton กับ ScreenScaffold และ TransformingLazyColumn

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

Scaffold

Scaffold ใน M3 แตกต่างจาก M2.5 ใน M3 AppScaffold และคอมโพสิเบิล ScreenScaffold ใหม่ได้เข้ามาแทนที่ Scaffold แล้ว AppScaffold และ ScreenScaffold วางโครงสร้างของหน้าจอและประสานงานการเปลี่ยนคอมโพเนนต์ ScrollIndicator และ TimeText

AppScaffold ช่วยให้องค์ประกอบหน้าจอแบบคงที่ เช่น TimeText ยังคงปรากฏอยู่ขณะที่แอปเปลี่ยนหน้าจอ เช่น การปัดเพื่อปิด ​​โดยจะมีช่องสำหรับเนื้อหาแอปพลิเคชันหลัก ซึ่งโดยปกติแล้วจะมีให้โดยคอมโพเนนต์การนําทาง เช่น SwipeDismissableNavHost

คุณประกาศ AppScaffold 1 รายการสําหรับกิจกรรม และใช้ ScreenScaffold สําหรับแต่ละหน้าจอ

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

หากใช้ HorizontalPager ที่มี HorizontalPagerIndicator คุณจะย้ายข้อมูลไปยัง HorizontalPagerScaffold ได้ วาง HorizontalPagerScaffold ไว้ภายใน AppScaffold AppScaffold และ HorizontalPagerScaffold แสดงโครงสร้างของ Pager และประสานการเปลี่ยนของคอมโพเนนต์ HorizontalPageIndicator และTimeText

HorizontalPagerScaffold จะแสดง HorizontalPageIndicator ที่ส่วนกลางของหน้าจอโดยค่าเริ่มต้น และประสานงานการแสดง/ซ่อน TimeText และ HorizontalPageIndicator ตามที่มีการแบ่งหน้า Pager หรือไม่ ซึ่ง PagerState จะเป็นผู้กำหนด

นอกจากนี้ยังมีคอมโพเนนต์ AnimatedPage ใหม่ ซึ่งจะแสดงภาพเคลื่อนไหวของหน้าภายใน Pager ด้วยเอฟเฟกต์การปรับขนาดและการปรับความทึบตามตำแหน่ง

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 {
…
   }
}

สุดท้าย M3 ได้เปิดตัว VerticalPagerScaffold ซึ่งเป็นไปตามรูปแบบเดียวกับ HorizontalPagerScaffold ดังนี้

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 {
        …
   }
}

ตัวยึดตำแหน่ง

มีการเปลี่ยนแปลง API บางรายการระหว่าง M2.5 กับ M3 Placeholder.PlaceholderDefaults ตอนนี้มีตัวแก้ไข 2 รายการ ได้แก่

• Modifier.placeholder ซึ่งจะแสดงแทนเนื้อหาที่ยังไม่ได้โหลด
• เอฟเฟกต์ภาพเทมเพลตที่สั่นไหว Modifier.placeholderShimmer ซึ่งแสดงเอฟเฟกต์ภาพเทมเพลตที่สั่นไหวซึ่งทำงานแบบวนซ้ำขณะรอให้ระบบโหลดข้อมูล

ดูการเปลี่ยนแปลงเพิ่มเติมของคอมโพเนนต์ Placeholder ได้ที่ด้านล่าง

SwipeDismissableNavHost

SwipeDismissableNavHost เป็นส่วนหนึ่งของ wear.compose.navigation เมื่อใช้คอมโพเนนต์นี้กับ M3 แล้ว MaterialTheme ของ M3 จะอัปเดต LocalSwipeToDismissBackgroundScrimColor และ LocalSwipeToDismissContentScrimColor

TransformingLazyColumn

TransformingLazyColumn เป็นส่วนหนึ่งของ wear.compose.lazy.foundation และเพิ่มการรองรับการปรับขนาดและภาพเคลื่อนไหวการเปลี่ยนรูปแบบในรายการของรายการระหว่างการเลื่อนเพื่อปรับปรุงประสบการณ์ของผู้ใช้

เช่นเดียวกับ ScalingLazyColumn ฟีเจอร์นี้จะมี rememberTransformingLazyColumnState() เพื่อสร้าง TransformingLazyColumnState ที่ระบบจะจดจำในองค์ประกอบต่างๆ

หากต้องการเพิ่มภาพเคลื่อนไหวการเปลี่ยนขนาดและการเปลี่ยนรูปแบบ ให้เพิ่มข้อมูลต่อไปนี้ลงในรายการแต่ละรายการ

• Modifier.transformedHeight ซึ่งช่วยให้คุณคำนวณความสูงที่เปลี่ยนรูปแบบของรายการได้โดยใช้ TransformationSpec คุณสามารถใช้ rememberTransformationSpec() เว้นแต่ว่าจะต้องการปรับแต่งเพิ่มเติม
• 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")
                    }
                }
            }
        }
    }

ลิงก์ที่มีประโยชน์

ดูข้อมูลเพิ่มเติมเกี่ยวกับการย้ายข้อมูลจาก M2.5 ไปยัง M3 ใน Compose ได้จากแหล่งข้อมูลเพิ่มเติมต่อไปนี้

ตัวอย่าง

ตัวอย่าง Wear OS ในสาขา Material3 บน GitHub

Codelab ของ Compose สำหรับ Wear OS

เอกสารอ้างอิงและซอร์สโค้ดของ API

• ข้อมูลอ้างอิงสำหรับ Compose Material 3 API
• คอมโพสิชันตัวอย่างของ Material 3 ในซอร์สโค้ด

การออกแบบ

• คำแนะนำเกี่ยวกับการออกแบบ