Material 3 Expressive هو الجيل التالي من أسلوب Material Design. ويشمل ذلك ميزات تخصيص وعناصر وألوان ديناميكية معدَّلة.

يركز هذا الدليل على نقل البيانات من مكتبة Wear Compose Material 2.5 (androidx.wear.compose) في Jetpack إلى مكتبة Wear Compose Material 3 (androidx.wear.compose.material3) في Jetpack لتطبيقات.

الأساليب

لنقل رمز تطبيقك من الإصدار 2.5 من Material Design إلى الإصدار 3، اتّبِع النهج نفسه الموضّح في إرشادات نقل بيانات هاتفك إلى Compose Material، وعلى وجه الخصوص:

• يجب عدم استخدام كل من M2.5 وM3 في تطبيق واحد على المدى الطويل.
• اتّباع نهج تدريجي

التبعيات

تتوفّر حزمة وإصدار منفصلان لإصدار M3 مقارنةً بإصدار M2.5:

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

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

يمكنك الاطّلاع على أحدث إصدارات Material 3 على صفحة إصدارات Wear Compose Material 3.

يقدّم الإصدار 1.5.0-beta01 من مكتبة Wear Compose Foundation بعض المكوّنات الجديدة المصمّمة للعمل مع مكوّنات Material 3. وبالمثل، تم تعديل الصورة المتحركة لرمز SwipeDismissableNavHost من مكتبة التنقل في ميزة "الكتابة الصوتية" في Wear OS عند تشغيلها على الإصدار 6 من Wear OS (المستوى 36 لواجهة برمجة التطبيقات) أو إصدار أحدث. عند التحديث إلى الإصدار 3 من Wear Compose Material، ننصحك بالتحديث أيضًا إلى الإصدار 3 من مكتبتَي Wear Compose Foundation وNavigation:

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

التصميم

في كلّ من الإصدارَين M2.5 وM3، يتمّ تسمية العنصر المكوّن للموضوع باسم MaterialTheme، ولكن تختلف حِزم الاستيراد والمَعلمات. في الإصدار 3 من "إحصاءات YouTube"، تمت إعادة تسمية المَعلمة 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. في Compose، ينطبق ذلك على فئة 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:

مظهر الألوان الديناميكية

من الميزات الجديدة في الإصدار 3 هي مظهر الألوان الديناميكي. إذا غيّر المستخدمون ألوان خلفية شاشة الساعة، ستتغيّر الألوان في واجهة المستخدم لتتطابق مع الألوان الجديدة.

استخدِم الدالة dynamicColorScheme لتنفيذ نظام الألوان الديناميكي، وقدِّم defaultColorScheme كخيار احتياطي في حال عدم توفّر نظام الألوان الديناميكي.

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

أسلوب الخط

يختلف نظام الطباعة في M3 عن M2 ويتضمّن الميزات التالية:

• تسعة أنماط نص جديدة
• الخطوط المرنة التي تتيح تخصيص مقاييس الخطوط لمختلف الأوزان والعرض والأشكال المستديرة

• ‫AnimatedText، الذي يستخدم خطوطًا مرنة

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 للمصمّمين تحديد عرض النوع وتأثيره لأحجام معيّنة.

أنماط النصوص

تتوفّر TextStyles التالية في M3. يتم استخدام هذه العناصر تلقائيًا من خلال مكونات M3 المختلفة.

الشكل

يختلف نظام الأشكال في M3 عن M2. لقد زاد عدد مَعلمات شكل العناصر، وتم تسميتها بشكل مختلف، ويتم ربطها بشكل مختلف بمكونات M3. تتوفّر أحجام الأشكال التالية:

• صغير جدًا
• صغير
• متوسط
• كبير
• كبير جدًا

في ميزة "الإنشاء"، ينطبق ذلك على فئة 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
)

استخدِم تعيين مَعلمات الأشكال من نقل البيانات من المادة 2 إلى المادة 3 في الإنشاء كنقطة بداية.

تغيير الشكل

توفّر ميزة M3 ميزة "تغيير الشكل": يمكن الآن تغيير أشكال العناصر استجابةً للتفاعلات.

يتوفّر سلوك "تغيير الشكل" كخيار في عدد من buttons الدوّارة، كما هو موضّح أدناه:

المكونات والتنسيق

تتوفّر معظم المكوّنات والتنسيقات من الإصدار 2.5 في الإصدار 3. ومع ذلك، لم تكن بعض مكونات M3 وتنسيقاته متوفّرة في M2.5. بالإضافة إلى ذلك، تتضمّن بعض مكوّنات M3 تباينات أكثر من نظائرها في M2.5.

على الرغم من أنّ بعض المكوّنات تتطلّب اعتبارات خاصة، يُنصح باستخدام عمليات ربط الدوال التالية كنقطة بداية:

في ما يلي قائمة كاملة بجميع مكوّنات Material 3:

أخيرًا، إليك قائمة ببعض المكوّنات ذات الصلة من الإصدار 1.5.0-beta01 من مكتبة Wear Compose Foundation:

الأزرار

تختلف الأزرار في M3 عن M2.5. تم استبدال شريحة M2.5 بأحد buttons. يقدّم تنفيذ 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 أيضًا صيغ أزرار جديدة. يمكنك الاطّلاع عليها في نظرة عامة على مرجع واجهة برمجة التطبيقات لإنشاء Material 3.

يقدّم الإصدار M3 زرًا جديدًا: EdgeButton. يتوفّر EdgeButton بأربعة مقاسات مختلفة: صغير جدًا وصغير ومتوسط وكبير. 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
   }
}

سقالة

يختلف السقالة في M3 عن M2.5. في الإصدار M3، حلّت العناصر القابلة للتجميع AppScaffold وScreenScaffold الجديدة محلّ Scaffold. يحدِّد المكوّنان AppScaffold و ScreenScaffold بنية الشاشة وينسقان عمليات النقل في المكوّنين ScrollIndicator وTimeText.

يسمح AppScaffold بظهور عناصر الشاشة الثابتة، مثل TimeText، أثناء عمليات الانتقال داخل التطبيق، مثل التمرير سريعًا لإغلاق الشاشة. ​​يوفر هذا العنصر مساحة لمحتوى التطبيق الرئيسي، والذي سيتم توفيره عادةً من خلال عنصر تنقّل مثل SwipeDismissableNavHost.

يمكنك تحديد AppScaffold واحد للنشاط واستخدام 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 بنية HorizontalPageIndicator وTimeText وتنسيقها، كما ينظّمان عمليات النقل بين هذين المكوّنين.

يعرض HorizontalPagerScaffold الHorizontalPageIndicator في منتصف نهاية الشاشة تلقائيًا ويحدِّد إحداثيات عرض/إخفاء TimeText وHorizontalPageIndicator وفقًا لما إذا كان يتم توجيه Pager، يتم تحديد ذلك من خلال PagerState.

يتوفّر أيضًا مكوّن AnimatedPage جديد يعرض صفحة متحركة ضمن ملف ّ صفحات باستخدام تأثير التمويه والتكبير/التصغير استنادًا إلى موضعه.

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

عنصر نائب

هناك بعض التغييرات في واجهة برمجة التطبيقات بين الإصدار M2.5 والإصدار M3. Placeholder.PlaceholderDefaults تتوفّر الآن مُعدِّلان:

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

روابط مفيدة

لمزيد من المعلومات حول نقل البيانات من الإصدار 2.5 من "الإصدار التجريبي" إلى الإصدار 3 من "الإصدار التجريبي" في Compose، يُرجى الرجوع إلى المراجع التالية الإضافية.

نماذج

عيّنات Wear OS في فرع Material3 على GitHub

الدرس التطبيقي حول تطبيق Compose لنظام التشغيل Wear OS

مرجع واجهة برمجة التطبيقات ورمز المصدر

• مرجع Compose Material 3 API
• إنشاء عيّنات Material 3 في رمز المصدر

التصميم

• إرشادات التصميم