Material 3 Expressive هو التطوّر التالي في Material Design. يتضمّن هذا الإصدار ميزات محدّثة للتصميم والمكوّنات والتخصيص، مثل الألوان الديناميكية.
يركّز هذا الدليل على عملية نقل البيانات من مكتبة Wear Compose Material 2.5 (androidx.wear.compose) Jetpack إلى مكتبة Wear Compose Material 3 (androidx.wear.compose.material3) Jetpack للتطبيقات.
الطرق
لنقل رمز تطبيقك من M2.5 إلى M3، اتّبِع النهج نفسه الموضّح في دليل نقل Compose Material على الهاتف، وخاصةً:
- يجب عدم استخدام كل من M2.5 وM3 في تطبيق واحد على المدى الطويل
- اتّبِع نهجًا تدريجيًا
التبعيات
تتضمّن حزمة M3 إصدارًا منفصلاً عن M2.5:
M2.5
implementation("androidx.wear.compose:compose-material:1.4.0")
التصميم 3
implementation("androidx.wear.compose:compose-material3:1.5.0-beta05")
يمكنك الاطّلاع على أحدث إصدارات M3 في صفحة إصدارات Wear Compose Material 3.
يقدّم الإصدار 1.5.0-beta01 من مكتبة Wear Compose Foundation بعض المكوّنات الجديدة المصمَّمة للعمل مع مكوّنات Material 3. وبالمثل، تم تعديل حركة SwipeDismissableNavHost من مكتبة Wear Compose Navigation لتصبح أكثر سلاسة عند تشغيلها على الإصدار 6 من نظام التشغيل Wear OS (المستوى 36 لواجهة برمجة التطبيقات) أو الإصدارات الأحدث. عند التحديث إلى الإصدار 3 من Wear Compose Material، ننصحك أيضًا بتحديث مكتبتَي Wear Compose Foundation وNavigation:
implementation("androidx.wear.compose:compose-foundation:1.5.0-beta05")
implementation("androidx.wear.compose:compose-navigation:1.5.0-beta05")
التصميم
في كلّ من M2.5 وM3، يُطلق على العنصر القابل للإنشاء الخاص بالمظهر الاسم MaterialTheme، ولكن تختلف حِزم الاستيراد والمَعلمات. في الإصدار M3، تم تغيير اسم المَعلمة Colors إلى ColorScheme، وتمت إضافة MotionScheme لتنفيذ عمليات الانتقال.
M2.5
import androidx.wear.compose.material.MaterialTheme
MaterialTheme(
colors = AppColors,
typography = AppTypography,
shapes = AppShapes,
content = content
)
التصميم 3
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 والدوال ذات الصلة:
M2.5
import androidx.wear.compose.material.Colors
val appColorScheme: Colors = Colors(
// M2.5 Color parameters
)
التصميم 3
import androidx.wear.compose.material3.ColorScheme
val appColorScheme: ColorScheme = ColorScheme(
// M3 ColorScheme parameters
)
يوضّح الجدول التالي الاختلافات الرئيسية بين M2.5 وM3:
M2.5 |
التصميم 3 |
|---|---|
|
تمت إعادة تسمية |
13 لونًا |
28 لونًا |
لا ينطبق |
ميزة جديدة لتطبيق مظهر بلون تفاعلي |
لا ينطبق |
ألوان ثانوية جديدة للتعبير بشكل أفضل |
تطبيق مظهر "الألوان الديناميكية"
تتضمّن M3 ميزة جديدة هي سمات الألوان الديناميكية. إذا غيّر المستخدمون ألوان خلفية شاشة الساعة، ستتغيّر الألوان في واجهة المستخدم لتتطابق معها.
استخدِم الدالة dynamicColorScheme لتنفيذ نظام ألوان ديناميكي وتوفير defaultColorScheme كخيار احتياطي في حال عدم توفّر نظام الألوان الديناميكي.
@Composable
fun myApp() {
val myColorScheme = myBrandColors()
val dynamicColorScheme = dynamicColorScheme(LocalContext.current)
MaterialTheme(colorScheme = dynamicColorScheme ?: myBrandColors) {...}
}
أسلوب الخط
يختلف نظام الطباعة في M3 عن M2، ويتضمّن الميزات التالية:
- تسعة أنماط نص جديدة
- الخطوط المرنة التي تتيح تخصيص مقاييس الخطوط لأوزان وعرض واستدارة مختلفة
AnimatedText، الذي يستخدم خطوطًا مرنة
M2.5
import androidx.wear.compose.material.Typography
val Typography = Typography(
// M2.5 TextStyle parameters
)
التصميم 3
import androidx.wear.compose.material3.Typography
val Typography = Typography(
// M3 TextStyle parameters
)
خطوط مرنة
تتيح الخطوط المرنة للمصمّمين تحديد عرض الخط ووزنه لأحجام معيّنة.
أنماط النص
تتوفّر TextStyles التالية في M3. يتم استخدامها تلقائيًا من خلال مختلف مكونات M3.
أسلوب الخط |
TextStyle |
|---|---|
الشاشة |
displayLarge وdisplayMedium وdisplaySmall |
العنوان |
titleLarge وtitleMedium وtitleSmall |
التصنيف |
labelLarge وlabelMedium وlabelSmall |
الجسم |
bodyLarge وbodyMedium وbodySmall وbodyExtraSmall |
الرقم |
numeralExtraLarge وnumeralLarge وnumeralMedium وnumeralSmall وnumeralExtraSmall |
قوس |
arcLarge, arcMedium, arcSmall |
الشكل
يختلف نظام الأشكال في M3 عن M2. زاد عدد مَعلمات الأشكال، وأصبحت أسماؤها مختلفة، كما أنّها ترتبط بشكل مختلف بمكوّنات Material Design 3. تتوفّر أحجام الأشكال التالية:
- صغير جدًا
- صغير
- متوسط
- كبير
- كبيرة جدًا
في Compose، ينطبق ذلك على الفئة M2 Shapes والفئة M3 Shapes:
M2.5
import androidx.wear.compose.material.Shapes
val Shapes = Shapes(
// M2.5 Shapes parameters
)
التصميم 3
import androidx.wear.compose.material3.Shapes
val Shapes = Shapes(
// M3 Shapes parameters
)
استخدِم عملية ربط مَعلمات الأشكال من نقل البيانات من Material 2 إلى Material 3 في Compose كنقطة بداية.
تحويل الأشكال
تقدّم M3 ميزة "تحويل الأشكال": يمكن الآن تحويل الأشكال استجابةً للتفاعلات.
تتوفّر ميزة "تغيير الشكل" كصيغة مختلفة لعدد من الأزرار الدائرية، كما هو موضّح أدناه:
الأزرار |
وظيفة تحويل الأشكال |
|---|---|
|
تعمل الدالة IconButtonDefaults.animatedShape() على تحريك زر الرمز عند الضغط عليه |
|
تعمل الدالة IconToggleButtonDefaults.animatedShape() على تحريك زر تبديل الرمز عند الضغط عليه و تعمل الدالة IconToggleButtonDefaults.variantAnimatedShapes() على تحريك زر تبديل الرمز عند الضغط عليه وعند وضع علامة اختيار أو إزالتها. |
|
تعمل الدالة TextButtonDefaults.animatedShape() على تحريك زر النص عند الضغط عليه |
|
تعمل الدالة TextToggleButtonDefaults.animatedShapes() على تحريك زر التبديل النصي عند الضغط عليه، بينما تعمل الدالة TextToggleButtonDefaults.variantAnimatedShapes() على تحريك زر التبديل النصي عند الضغط عليه وعند وضع علامة اختيار أو إزالتها. |
المكوّنات والتنسيق
تتوفّر معظم المكوّنات والتصاميم من M2.5 في M3. ومع ذلك، لم تكن بعض مكوّنات وتنسيقات M3 متوفّرة في M2.5. بالإضافة إلى ذلك، تتضمّن بعض مكوّنات M3 خيارات أكثر من تلك المتوفّرة في M2.5.
مع أنّ بعض المكوّنات تتطلّب مراعاة اعتبارات خاصة، ننصحك باستخدام عمليات الربط التالية بين الدوال كنقطة بداية:
في ما يلي قائمة كاملة بجميع عناصر Material 3:
Material 3 |
مكوّن مكافئ لإصدار Material 2.5 (إذا لم يكن جديدًا في Material 3) |
|---|---|
جديد |
|
جديد |
|
android.wear.compose.material.Scaffold (مع androidx.wear.compose.material3.ScreenScaffold ) |
|
جديد |
|
androidx.wear.compose.material.ToggleChip مع عنصر تحكّم في تبديل مربع الاختيار |
|
androidx.wear.compose.material.Chip (عندما لا تكون الخلفية مطلوبة فقط) |
|
جديد |
|
جديد |
|
جديد |
|
androidx.wear.compose.material.Chip عند الحاجة إلى خلفية زر بلون مميز |
|
جديد |
|
جديد |
|
جديد |
|
جديد |
|
جديد |
|
androidx.wear.compose.material.ToggleChip مع عنصر تحكّم في التبديل باستخدام زر اختيار |
|
android.wear.compose.material.Scaffold (مع androidx.wear.compose material3.AppScaffold) |
|
androidx.wear.compose.material3.SegmentedCircularProgressIndicator |
جديد |
androidx.wear.compose.material.SwipeToRevealCard وandroidx.wear.compose.material.SwipeToRevealChip |
|
androidx.wear.compose.material.ToggleChip مع عنصر تحكّم في مفتاح التبديل |
|
جديد |
وأخيرًا، إليك قائمة ببعض المكوّنات ذات الصلة من الإصدار 1.5.0-beta01 من مكتبة Wear Compose Foundation:
الإصدار 1.5.0 التجريبي من Wear Compose Foundation |
|
|---|---|
يُستخدَم لإضافة تعليقات توضيحية إلى العناصر القابلة للإنشاء في أحد التطبيقات، وذلك لتتبُّع الجزء النشط من التركيب وتنسيق التركيز. |
|
أداة عرض صفحات قابلة للتمرير أفقيًا، تم إنشاؤها استنادًا إلى مكوّنات Compose Foundation مع تحسينات خاصة بنظام التشغيل Wear لتحسين الأداء والالتزام بإرشادات Wear OS. |
|
أداة عرض صفحات قابلة للتمرير عموديًا، تم إنشاؤها باستخدام مكوّنات Compose Foundation مع تحسينات خاصة بنظام التشغيل Wear لتحسين الأداء والالتزام بإرشادات Wear OS. |
|
يمكن استخدامها بدلاً من ScalingLazyColumn لإضافة تأثيرات تحويل التمرير إلى كل عنصر. |
|
الأزرار
تختلف الأزرار في M3 عن M2.5. تم استبدال شريحة M2.5 بـ
Button. يوفر تنفيذ Button قيمًا تلقائية لكل من Text
maxLines وtextAlign. يمكن تجاهل هذه القيم التلقائية في العنصر Text.
M2.5
import androidx.wear.compose.material.Chip
//M2.5 Buttons
Chip(...)
CompactChip(...)
Button(...)
التصميم 3
import androidx.wear.compose.material3.Button
//M3 Buttons
Button(...)
CompactButton(...)
IconButton(...)
TextButton(...)
يتضمّن M3 أيضًا أشكالاً جديدة للأزرار. يمكنك الاطّلاع عليها في نظرة عامة حول مرجع واجهة برمجة التطبيقات في Compose 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
}
}
سقالة
يختلف Scaffold في M3 عن M2.5. في الإصدار 3 من Material Design، تم استبدال AppScaffold وScreenScaffold الجديد القابل للإنشاء بـ Scaffold. تحدّد AppScaffold وScreenScaffold بنية الشاشة وتنسّق عمليات الانتقال بين المكوّنين ScrollIndicator وTimeText.
تسمح AppScaffold ببقاء عناصر الشاشة الثابتة، مثل TimeText، مرئية
أثناء عمليات الانتقال داخل التطبيق، مثل التمرير سريعًا لإغلاق الشاشة. يوفر هذا العنصر مساحة لمحتوى التطبيق الرئيسي، والذي سيتم توفيره عادةً من خلال أحد مكونات التنقّل، مثل SwipeDismissableNavHost
عليك تعريف AppScaffold واحد للنشاط واستخدام ScreenScaffold لكل شاشة.
M2.5
import androidx.wear.compose.material.Scaffold
Scaffold {...}
التصميم 3
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 {
…
}
}
عنصر نائب
هناك بعض التغييرات في واجهة برمجة التطبيقات بين الإصدارين M2.5 وM3. توفّر Placeholder.PlaceholderDefaults
الآن معدِّلَين:
Modifier.placeholder، الذي يتم عرضه بدلاً من المحتوى الذي لم يتم تحميله بعد- تأثير التموّج الخاص بالعناصر النائبة
Modifier.placeholderShimmerالذي يوفّر تأثير التموّج الخاص بالعناصر النائبة والذي يتم تشغيله في حلقة رسوم متحركة أثناء انتظار تحميل البيانات.
يمكنك الاطّلاع أدناه على التغييرات الإضافية التي طرأت على المكوّن Placeholder.
M2.5 |
التصميم 3 |
|---|---|
|
تمت إزالتها |
|
تمت إزالتها |
|
تمت إعادة تسميته إلى |
|
تمت إزالتها |
|
تمت إزالته |
|
تمت إزالتها |
|
تمت إزالتها |
SwipeDismissableNavHost
SwipeDismissableNavHost هو جزء من wear.compose.navigation. عند استخدام هذا المكوّن مع M3، يحدّث M3 MaterialTheme السمتَين 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 من Material Design في Compose، يُرجى الاطّلاع على المراجع الإضافية التالية.