بدء استخدام الشاشات

لبدء توفير مربّعات معلومات من تطبيقك، أدرِج التبعيات التالية فيملفbuild.gradle الخاص بتطبيقك.

رائع

dependencies {
    // Use to implement support for wear tiles
    implementation "androidx.wear.tiles:tiles:1.4.1"

    // Use to utilize standard components and layouts in your tiles
    implementation "androidx.wear.protolayout:protolayout:1.2.1"

    // Use to utilize components and layouts with Material Design in your tiles
    implementation "androidx.wear.protolayout:protolayout-material:1.2.1"

    // Use to include dynamic expressions in your tiles
    implementation "androidx.wear.protolayout:protolayout-expression:1.2.1"

    // Use to preview wear tiles in your own app
    debugImplementation "androidx.wear.tiles:tiles-renderer:1.4.1"

    // Use to fetch tiles from a tile provider in your tests
    testImplementation "androidx.wear.tiles:tiles-testing:1.4.1"
}

Kotlin

dependencies {
    // Use to implement support for wear tiles
    implementation("androidx.wear.tiles:tiles:1.4.1")

    // Use to utilize standard components and layouts in your tiles
    implementation("androidx.wear.protolayout:protolayout:1.2.1")

    // Use to utilize components and layouts with Material Design in your tiles
    implementation("androidx.wear.protolayout:protolayout-material:1.2.1")

    // Use to include dynamic expressions in your tiles
    implementation("androidx.wear.protolayout:protolayout-expression:1.2.1")

    // Use to preview wear tiles in your own app
    debugImplementation("androidx.wear.tiles:tiles-renderer:1.4.1")

    // Use to fetch tiles from a tile provider in your tests
    testImplementation("androidx.wear.tiles:tiles-testing:1.4.1")
}

المفاهيم الرئيسية

لا يتم إنشاء التطبيقات المصغّرة بالطريقة نفسها التي يتم بها إنشاء تطبيقات Android، وتستخدِم مفاهيم مختلفة:

  • نماذج التنسيق: يمكنك تحديد الترتيب العام للعناصر المرئية على الشاشة. ويتم تنفيذ ذلك من خلال الدالة primaryLayout().
  • عناصر التنسيق: تمثّل عنصرًا رسوميًا فرديًا، مثل زر أو بطاقة، أو عدة عناصر من هذا النوع مجمّعة معًا باستخدام عمود أو buttonGroup أو ما شابه ذلك. ويتم تضمينها في نموذج تنسيق.
  • الموارد: تتألف عناصر ResourceBuilders.Resources من خريطة لزوجات المفاتيح والقيم لموارد Android (الصور) المطلوبة لمحاولة عرض تنسيق، وإصدار.
  • المخطط الزمني: كائن TimelineBuilders.Timeline هو قائمة بمثيل واحد أو أكثر من كائن تنسيق. يمكنك توفير آليات وتعبيرات مختلفة للإشارة إلى الحالات التي يجب فيها أن يبدّل المشغّل عنصر تنسيق واحدًا إلى آخر، مثل إيقاف عرض تنسيق في وقت محدّد.
  • الحالة: هي بنية بيانات من النوع StateBuilders.State يتم تمريرها بين المربّع والتطبيق، ما يتيح للعنصرَين التواصل مع بعضهما. على سبيل المثال، إذا تم النقر على زر في المربّع، تحتفظ الحالة بمعرّف الزر. يمكنك أيضًا تبديل أنواع البيانات باستخدام خريطة.
  • الشريحة: عنصر TileBuilders.Tile يمثّل شريحة، ويتألّف من مخطط زمني ورقم تعريف إصدار الموارد وفاصل الحداثة والحالة.
  • Protolayout: يظهر هذا المصطلح في اسم فئات مختلفة مرتبطة بالبلاط ويشير إلى مكتبة Protolayout في Wear OS، وهي مكتبة رسومات يتم استخدامها في مساحات العرض المختلفة في Wear OS.

إنشاء مربّع

لتوفير مربّع معلومات من تطبيقك، عليك تنفيذ خدمة من النوع TileService وتسجيلها في بيان التطبيق. بناءً على ذلك، يطلب النظام اللوحات اللازمة أثناء طلبات البيانات إلى onTileRequest() والموارد أثناء طلبات البيانات إلى onTileResourcesRequest().

class MyTileService : TileService() {

    override fun onTileRequest(requestParams: RequestBuilders.TileRequest) =
        Futures.immediateFuture(
            Tile.Builder()
                .setResourcesVersion(RESOURCES_VERSION)
                .setTileTimeline(
                    Timeline.fromLayoutElement(
                        materialScope(this, requestParams.deviceConfiguration) {
                            primaryLayout(
                                mainSlot = {
                                    text("Hello, World!".layoutString, typography = BODY_LARGE)
                                }
                            )
                        }
                    )
                )
                .build()
        )

    override fun onTileResourcesRequest(requestParams: ResourcesRequest) =
        Futures.immediateFuture(
            Resources.Builder().setVersion(RESOURCES_VERSION).build()
        )
}
Tile.kt

بعد ذلك، أضِف خدمة داخل علامة <application> في ملف AndroidManifest.xml.

<service
    android:name=".snippets.m3.tile.MyTileService"
    android:label="@string/tile_label"
    android:description="@string/tile_description"
    android:icon="@mipmap/ic_launcher"
    android:exported="true"
    android:permission="com.google.android.wearable.permission.BIND_TILE_PROVIDER">
    <intent-filter>
        <action android:name="androidx.wear.tiles.action.BIND_TILE_PROVIDER" />
    </intent-filter>

    <meta-data android:name="androidx.wear.tiles.PREVIEW"
        android:resource="@drawable/tile_preview" />
</service>
AndroidManifest.xml

يسجِّل فلتر الأذونات والنوايا هذه الخدمة كمقدّم مربّعات معلومات.

يظهر للمستخدم رمز المربّع وتسميته ووصفه ومصدر المعاينة عند ضبط مربّعات الشاشة على هاتفه أو ساعته. يُرجى العِلم أنّ مرجع المعاينة يتيح استخدام جميع محدّدات الموارد العادية في Android، لذا من الممكن تغيير المعاينة وفقًا لعوامل مثل حجم الشاشة ولغة الجهاز. اطّلِع على قائمة التحقّق من المعاينة للحصول على اقتراحات إضافية.

يمكنك نشر تطبيقك وإضافة الشاشة إلى لوحة العرض الدوّارة للشاشات (تتوفّر طريقة أكثر ملاءمةً للمطوّرين لمعاينة شاشة أيضًا، ولكن في الوقت الحالي، يمكنك إجراء ذلك يدويًا).

مربّع &quot;مرحبًا بك&quot;
الشكل 1. مربّع "مرحبًا"

للحصول على مثال كامل، اطّلِع على نموذج الرمز على GitHub أو codelab.

إنشاء واجهة مستخدم للمربّعات

يتم إنشاء عناصر واجهة المستخدم في Material 3 Expressive باستخدام نهج منظَّم مدعوم من نمط المُنشئ الآمن من النوع في Kotlin.

التنسيق

لإنشاء التنسيق، اتّبِع الخطوات التالية:

  1. بدء نطاق Material Design: استخدِم الدالة materialScope() ، مع تقديم context وdeviceConfiguration المطلوبَين. يمكنك تضمين مَعلمات اختيارية، مثل allowDynamicTheme و defaultColorScheme. يكون الخيار allowDynamicTheme هو true تلقائيًا، ويمثّل الرمز defaultColorScheme الرمز ColorScheme المستخدَم عندما لا تكون الألوان الديناميكية متوفّرة، مثلما لو أوقف المستخدم الميزة، أو عندما لا تكون الميزة متاحة على الجهاز، أو عندما يكون الخيار allowDynamicTheme هو false).

  2. إنشاء واجهة المستخدم ضمن النطاق: يجب تحديد جميع مكوّنات واجهة المستخدم لتخطيط شاشة مستطيلة معيّن ضمن دالة lambda لدالة واحدة من المستوى الأعلى materialScope(). وظائف المكوّنات هذه، مثل primaryLayout() و textEdgeButton()، هي وظائف تمديد في MaterialScope ولا تتوفّر إلا عند استدعائها في نطاق المستلِم هذا.

    materialScope(
    context = context,
    deviceConfiguration = requestParams.deviceConfiguration, // requestParams is passed to onTileRequest
    defaultColorScheme = myFallbackColorScheme
) {
    // inside the MaterialScope, you can call functions like primaryLayout()
    primaryLayout(
        titleSlot = { text(text = "Title".layoutString) },
        mainSlot = { text(text = "Main Content".layoutString) },
        bottomSlot = { textEdgeButton(text = "Action".layoutString) }
    )
}

ألعاب المقامرة

في الإصدار 3 من التطبيق، يستخدم تنسيق مربّعات التطبيقات أسلوبًا مستوحى من تطبيق Compose يستخدِم ثلاث مَواضع مختلفة. من أعلى إلى أسفل، تشمل هذه العناصر ما يلي:

  1. الرمز titleSlot، وهو عادةً لعنوان أو عنوان رئيسي
  2. mainSlot، للمحتوى الأساسي
  3. bottomSlot، يُستخدَم غالبًا للإجراءات أو المعلومات التكميلية. ويظهر زرّ الحافة أيضًا في هذا المربّع.
تنسيق مربّعات المعلومات الذي يعرض titleSlot وmainSlot وbottomSlot
الشكل 2: titleSlot وmainSlot وbottomSlot

في ما يلي محتوى كل خانة:

  • ‫titleSlot (اختياري): عادةً ما تكون بضع كلمات تم إنشاؤها بواسطة text().
  • mainSlot (سمة إلزامية): المكوّنات المنظَّمة في بنى مثل الصفوف والأعمدة ومجموعات الأزرار يمكن أيضًا دمج هذه المكوّنات بشكل متكرّر داخل بعضها البعض، على سبيل المثال، يمكن أن يحتوي عمود على صفوف.
  • ‫bottomSlot (اختياري): يتم عادةً ملء هذا الحقل إما بزر ملتصق بالجانب أو تصنيف نصي.

وبما أنّه لا يمكن الانتقال بين المربّعات، لا تتوفّر عناصر لعرض الصفحات أو الانتقال بينها أو التعامل مع قوائم طويلة من المحتوى. احرص على أن يظل المحتوى مرئيًا عند زيادة حجم الخط أو عندما يصبح النص أطول بسبب الترجمة.

مكونات واجهة المستخدم

توفّر مكتبة protolayout-material3 عددًا كبيرًا من المكوّنات المصمّمة وفقًا لمواصفات Material 3 Expressive واقتراحات واجهة المستخدِم.

الأزرار

  • textButton()‎: زر يتضمّن خانة واحدة لمحتوى نصي (قصير)
  • iconButton()‎: زر يحتوي على خانة واحدة لتمثيل رمز
  • avatarButton()‎: زر أفاتار على شكل قرص يقدّم ما يصل إلى ثلاث مَواضع لعرض محتوى يمثّل تصنيفًا متراكمًا عموديًا وتصنيفًا ثانويًا وصورة (أفاتار) بجانبه
  • imageButton()‎: زر صورة قابل للنقر لا يقدّم أماكن إضافية للعناصر، بل يقدّم صورة فقط (مثل backgroundImage كخلفية)
  • ‫compactButton()‎: زر مكثّف يقدّم ما يصل إلى خانتَين لعرض محتوى مُكدَّس أفقيًا يمثّل رمزًا ونصًا بجانبه
  • button()‎: زرّ على شكل قرص يقدّم ما يصل إلى ثلاث خانات لعرض محتوى يمثّل تصنيفًا وتصنيفًا ثانويًا مُرصَّفين عموديًا، ورمزًا بجانبه

أزرار الحافة

  • ‫iconEdgeButton()‎: زر على الحافة يقدّم خانة واحدة لعرض رمز أو محتوى صغير مستدير بشكل مشابه
  • ‫textEdgeButton()‎: زرّ على الحافة يقدّم خانة واحدة لعرض نص أو محتوى طويل وواسع بشكل مشابه

بيانات بطاقات الائتمان

  • ‫titleCard()‎: بطاقة عنوان تتضمّن خانة واحدة أو ثلاث خانات، وتكون عادةً مستندة إلى النص
  • appCard()‎: بطاقة تطبيق تتيح ما يصل إلى خمس خانات، وتكون عادةً مستندة إلى نص
  • textDataCard()‎: بطاقة بيانات تقدّم ما يصل إلى ثلاث خانات مُكدَّسة عموديًا، وتكون عادةً مستندة إلى نص أو رقم
  • iconDataCard()‎: بطاقة بيانات تقدّم ما يصل إلى ثلاث خانات مُكدَّسة عموديًا، وتكون عادةً مستندة إلى نص أو أرقام، مع رمز
  • graphicDataCard()‎: بطاقة بيانات الرسومات التي تقدّم خانة لبيانات الرسومات، مثل مؤشر التقدّم، وما يصل إلى خانتَين مُكدّستَين عموديًا، عادةً للأوصاف النصية

مؤشرات التقدّم

تجميع عناصر التنسيق

  • buttonGroup()‎: تنسيق مكوّن يضع عناصره الثانوية في تسلسل أفقي
  • ‫primaryLayout()‎: تنسيق ملء الشاشة الذي يمثّل نمط تنسيق M3 рекомендованный مقترَحًا سريع الاستجابة ويهتم بوضع العناصر، بالإضافة إلى الهوامش والوسائد المقترَحة التي يتم تطبيقها

التصميم

في Material 3 Expressive، يتم تحديد نظام الألوان من خلال 29 دورًا قياسيًا للّون، ويتم تنظيمها في ست مجموعات: الأساسي والثانوي والثالث والأخطاء والسطح والحدود.

نظام الألوان التعبيرية في Material 3
الشكل 3. نظام الألوان التعبيرية في Material 3

يربط ColorScheme كل دور من هذه الأدوار الـ 29 بلون ملائم، ولأنّه جزء من MaterialScope ويجب إنشاء المكوّنات داخله، فإنه يأخذ تلقائيًا الألوان من المخطّط. تتيح هذه الطريقة لجميع عناصر واجهة المستخدم الالتزام تلقائيًا بمعايير Material Design.

للسماح للمستخدمين باختيار نظام ألوان تحدّده بنفسك، مثل نظام يعكس ألوان علامتك التجارية، ونظام يوفّره النظام، إما من واجهة الساعة الحالية للمستخدم أو من نظام اختاره المستخدم، يمكنك بدء MaterialScope على النحو التالي:

val myColorScheme =
    ColorScheme(
        primary = ...
        onPrimary = ...
        // 27 more
    )

materialScope(
  defaultColorScheme = myColorScheme
) {
  // If the user selects "no theme" in settings, myColorScheme is used.
  // Otherwise, the system-provided theme is used.
}

لفرض ظهور مربّعاتك بالألوان التي تقدّمها، أوقِف ميزة التوافق مع المظهر الديناميكي من خلال ضبط allowDynamicTheme على false:

materialScope(
  allowDynamicTheme = false,
  defaultColorScheme = myColorScheme
) {
  // myColorScheme is *always* used.
}

اللون

يستخدم كل مكوّن فردي مجموعة فرعية من الأدوار الـ 29 للألوان التي يحدّدها ColorScheme. على سبيل المثال، تستخدِم الأزرار ما يصل إلى أربعة ألوان، يتم أخذها تلقائيًا من المجموعة "الأساسية" للعنصر ColorScheme النشط:

الرمز المميّز للمكوّن ButtonColors دور ColorScheme
containerColor أساسي
iconColor onPrimary
labelColor onPrimary
secondaryLabelColor onPrimary (opacity 0.8)

قد تحتاج إلى الابتعاد عن الرموز التلقائية للألوان لعناصر محددة في واجهة المستخدم. على سبيل المثال، قد تريد استخدام textEdgeButton واحد لتطبيق ألوان من المجموعة "الثانوية" أو "الثالثية" بدلاً من المجموعة "الأساسية"، وذلك لشدّ الانتباه وتحقيق تباين أفضل.

يمكنك تخصيص ألوان المكوّنات بعدة طرق:

  1. استخدام دالة مساعدة للألوان المحدّدة مسبقًا: استخدِم دوالّ مساعدة مثل filledTonalButtonColors() لتطبيق أنماط الأزرار العادية لتطبيق Material 3 Expressive. تنشئ هذه الدوالّ مثيلات pre-configured ButtonColors التي تربط الأنماط الشائعة، مثل الملء أو الألوان أو المخططات، بالدور المناسب من ColorScheme النشط ضمن MaterialScope. يتيح لك ذلك تطبيق أنماط متّسقة بدون تحديد كل لون يدويًا لأنواع الأزرار الشائعة.

    textEdgeButton(
    colors = filledButtonColors() // default
    /* OR colors = filledTonalButtonColors() */
    /* OR colors = filledVariantButtonColors() */
    // ... other parameters
)

    بالنسبة إلى البطاقات، استخدِم عائلة الدوالّ filledCardColors() المماثلة.

    يمكنك أيضًا تعديل عنصر ButtonColors الذي تعرضه الدوالّ المساعِدة باستخدام طريقة copy() إذا كنت بحاجة إلى تغيير رمزين فقط:

    textEdgeButton(
    colors =
        filledButtonColors()
            .copy(
                containerColor = colorScheme.tertiary,
                labelColor = colorScheme.onTertiary
            )
    // ... other parameters
)

  2. توفير أدوار ألوان بديلة بشكل صريح: أنشئ عنصر ButtonColors خاصًا بك، ثم أعِد توجيهه إلى المكوّن. بالنسبة إلى البطاقات، استخدِم عنصر CardColors المكافئ.

    textEdgeButton(
    colors =
        ButtonColors(
            // the materialScope makes colorScheme available
            containerColor = colorScheme.secondary,
            iconColor = colorScheme.secondaryDim,
            labelColor = colorScheme.onSecondary,
            secondaryLabelColor = colorScheme.onSecondary
        )
    // ... other parameters
)

  3. تحديد ألوان ثابتة (يُرجى استخدامها بحذر) على الرغم من أنّه يُنصح بشكل عام بتحديد الألوان حسب دورها الدلالي (مثل colorScheme.primary)، يمكنك أيضًا تقديم قيم ألوان مباشرة. يجب استخدام هذا الأسلوب بقدرٍ معقول، لأنّه قد يؤدي إلى حدوث تناقضات مع المظهر العام، خاصةً إذا كان المظهر يتغيّر بشكل ديناميكي.

    textEdgeButton(
    colors = filledButtonColors().copy(
        containerColor = android.graphics.Color.RED.argb, // Using named colors
        labelColor = 0xFFFFFF00.argb // Using a hex code for yellow
    )
    // ... other parameters
)

أسلوب الخط

لإنشاء اتساق مرئي على منصة Wear OS وتحسين الأداء، يتم عرض كل النص على المربّعات باستخدام خط يقدّمه النظام. ويعني ذلك أنّه لا يمكن استخدام خطوط مخصّصة في المربّعات. في الإصدار 6 من نظام التشغيل Wear OS والإصدارات الأحدث، يكون هذا خطًا خاصًا بالمصنّع الأصلي للجهاز. في معظم الحالات، سيكون الخط متغيّرًا، ما يوفّر تجربة أكثر تعبيرًا وإمكانية تحكّم أكثر دقة.

لإنشاء نمط نص، يتم عادةً استخدام طريقة text() مع الثوابت الطباعية. يتيح لك هذا المكوّن الاستفادة من أدوار أسلوب الخط المحدّدة مسبقًا في Material 3 Expressive، ما يساعد مربّع البطاقات في الالتزام بأفضل الممارسات المتّبعة في أسلوب الخط لسهولة القراءة والتسلسل الهرمي. تقدّم المكتبة مجموعة من 18 متغيّرًا ثابتًا للخطّ الدلالي، مثل BODY_MEDIUM. وتؤثر هذه الثوابت أيضًا في محاور الخط غير الحجم.

text(
    text = "Hello, World!".layoutString,
    typography = BODY_MEDIUM,
)

لمزيد من التحكّم، يمكنك تقديم إعدادات إضافية. في الإصدار 6 من Wear OS والإصدارات الأحدث، من المرجّح استخدام خط متغيّر يمكنك تعديله على طول محوري الميل والوزن والعرض والاستدارة. يمكنك التحكّم في هذه المحاور باستخدام المَعلمة settings:

text(
    text = "Hello, World".layoutString,
    italic = true,

    // Use elements defined in androidx.wear.protolayout.LayoutElementBuilders.FontSetting
    settings =
        listOf(weight(500), width(100F), roundness(100)),
)

أخيرًا، إذا كنت بحاجة إلى التحكّم في الحجم أو مسافة بين الأحرف (غير مستحسن)، استخدِم basicText()‎ بدلاً من text()‎، وأنشئ قيمة لسمة fontStyle باستخدام fontStyle()‎.

الشكل والهامش

يمكنك تغيير نصف قطر الزاوية لكل مكوّن تقريبًا باستخدام سمةshape. تأتي القيم من السمة MaterialScope shapes:

textButton(
   height = expand(),
   width = expand(),
   shape = shapes.medium, // OR another value like shapes.full
   colors = filledVariantButtonColors(),
   labelContent = { text("Hello, World!".layoutString) },
)

بعد تغيير شكل أحد المكوّنات، إذا كنت تعتقد أنّه يترك مساحة كبيرة جدًا أو صغيرة جدًا حول حافة الشاشة، يمكنك ضبط الهوامش باستخدام المَعلمة margin في primaryLayout():

primaryLayout(
    mainSlot = {
        textButton(
            shape = shapes.small,
            /* ... */
        )
    },
    // margin constants defined in androidx.wear.protolayout.material3.PrimaryLayoutMargins
    margins = MAX_PRIMARY_LAYOUT_MARGIN,
)

أقواس

يمكن استخدام العناصر الفرعية التالية للحاويات Arc:

  • ArcLine: لعرض خط منحني حول القوس
  • ‫ArcText: لعرض نص منحني في شكل قوس
  • ‫ArcAdapter: لعرض عنصر تنسيق أساسي في القوس، يتم رسمه عند نقطة مماسة للقوس.

لمزيد من المعلومات، اطّلِع على المستندات المرجعية لكل نوع من أنواع العناصر.

مفاتيح التعديل

يمكن تطبيق عوامل تعديل اختيارية على كل عنصر تنسيق متاح. استخدِم مفاتيح التعديل هذه للأغراض التالية:

  • تغيير المظهر المرئي للتنسيق على سبيل المثال، أضِف خلفية أو حدودًا أو مساحة تملأ الفراغ بين عناصر التنسيق.
  • أضِف بيانات وصفية عن التنسيق. على سبيل المثال، أضِف مُعدِّلًا للدلالات إلى عنصر التنسيق لاستخدامه مع تطبيقات قراءة الشاشة.
  • إضافة وظائف على سبيل المثال، أضِف مُعدِّلًا قابلاً للنقر إلى عنصر التنسيق لجعل مربّع العرض تفاعليًا. لمزيد من المعلومات، يُرجى الاطّلاع على مقالة التفاعل مع المربّعات.

على سبيل المثال، يمكننا تخصيص المظهر التلقائي والبيانات الوصفية لعنصر Image، كما هو موضّح في نموذج الرمز البرمجي التالي:

Kotlin

private fun myImage(): LayoutElement =
    Image.Builder()
        .setWidth(dp(24f))
        .setHeight(dp(24f))
        .setResourceId("image_id")
        .setModifiers(Modifiers.Builder()
            .setBackground(Background.Builder().setColor(argb(0xFFFF0000)).build())
            .setPadding(Padding.Builder().setStart(dp(12f)).build())
            .setSemantics(Semantics.builder()
                .setContentDescription("Image description")
                .build()
            ).build()
        ).build()

Java

private LayoutElement myImage() {
   return new Image.Builder()
           .setWidth(dp(24f))
           .setHeight(dp(24f))
           .setResourceId("image_id")
           .setModifiers(new Modifiers.Builder()
                   .setBackground(new Background.Builder().setColor(argb(0xFFFF0000)).build())
                   .setPadding(new Padding.Builder().setStart(dp(12f)).build())
                   .setSemantics(new Semantics.Builder()
                           .setContentDescription("Image description")
                           .build()
                   ).build()
           ).build();
}

العناصر التي يمكن توسيع نطاقها

Spannable هو نوع خاص من الحاويات يعرض العناصر بشكل مشابه للنص. يكون هذا مفيدًا عندما تريد تطبيق نمط مختلف على سلسلة فرعية واحدة فقط في كتلة نص أكبر، وهو أمر غير ممكن باستخدام العنصر Text.

حاوية Spannable مليئة بعناصر Span. ولا يُسمح بعناصر فرعية أخرى أو مثيلات Spannable متداخلة.

هناك نوعان من Span الأطفال:

  • ‫SpanText: لعرض النص بنمط معيّن
  • ‫SpanImage: لعرض صورة مضمّنة في النص

على سبيل المثال، يمكنك استخدام مائل على كلمة "world" في مربّع "مرحبًا بك" وإدراج صورة بين الكلمات، كما هو موضّح في نموذج الرمز البرمجي التالي:

Kotlin

private fun mySpannable(): LayoutElement =
    Spannable.Builder()
        .addSpan(SpanText.Builder()
            .setText("Hello ")
            .build()
        )
        .addSpan(SpanImage.Builder()
            .setWidth(dp(24f))
            .setHeight(dp(24f))
            .setResourceId("image_id")
            .build()
        )
        .addSpan(SpanText.Builder()
            .setText("world")
            .setFontStyle(FontStyle.Builder()
                .setItalic(true)
                .build())
            .build()
        ).build()

Java

private LayoutElement mySpannable() {
   return new Spannable.Builder()
        .addSpan(new SpanText.Builder()
            .setText("Hello ")
            .build()
        )
        .addSpan(new SpanImage.Builder()
            .setWidth(dp(24f))
            .setHeight(dp(24f))
            .setResourceId("image_id")
            .build()
        )
        .addSpan(new SpanText.Builder()
            .setText("world")
            .setFontStyle(newFontStyle.Builder()
                .setItalic(true)
                .build())
            .build()
        ).build();
}

العمل مع المراجع

لا يمكن للقوائم الوصول إلى أي من موارد تطبيقك. وهذا يعني أنّه لا يمكنك تمرير معرّف صورة Android إلى عنصر تخطيط Image والتوقع أن يتم حلّ المشكلة. بدلاً من ذلك، يمكنك إلغاء طريقة onTileResourcesRequest() و تقديم أي موارد يدويًا.

هناك طريقتان لتقديم الصور ضمن onTileResourcesRequest() الطريقة:

Kotlin

override fun onTileResourcesRequest(
    requestParams: ResourcesRequest
) = Futures.immediateFuture(
Resources.Builder()
    .setVersion("1")
    .addIdToImageMapping("image_from_resource", ImageResource.Builder()
        .setAndroidResourceByResId(AndroidImageResourceByResId.Builder()
            .setResourceId(R.drawable.image_id)
            .build()
        ).build()
    )
    .addIdToImageMapping("image_inline", ImageResource.Builder()
        .setInlineResource(InlineImageResource.Builder()
            .setData(imageAsByteArray)
            .setWidthPx(48)
            .setHeightPx(48)
            .setFormat(ResourceBuilders.IMAGE_FORMAT_RGB_565)
            .build()
        ).build()
    ).build()
)

Java

@Override
protected ListenableFuture<Resources> onTileResourcesRequest(
       @NonNull ResourcesRequest requestParams
) {
return Futures.immediateFuture(
    new Resources.Builder()
        .setVersion("1")
        .addIdToImageMapping("image_from_resource", new ImageResource.Builder()
            .setAndroidResourceByResId(new AndroidImageResourceByResId.Builder()
                .setResourceId(R.drawable.image_id)
                .build()
            ).build()
        )
        .addIdToImageMapping("image_inline", new ImageResource.Builder()
            .setInlineResource(new InlineImageResource.Builder()
                .setData(imageAsByteArray)
                .setWidthPx(48)
                .setHeightPx(48)
                .setFormat(ResourceBuilders.IMAGE_FORMAT_RGB_565)
                .build()
            ).build()
        ).build()
);
}

قائمة التحقّق من صورة معاينة المربّع

يعرض النظام صورة معاينة المربّع المرجع إليها في ملف بيان تطبيق Android ، وذلك في محرِّر لوحة العرض الدوّارة للمربّعات. يظهر هذا المحرِّر على كلٍّ من أجهزة Wear OS وتطبيق "مساعد الساعة" على الهواتف.

لمساعدة المستخدمين في الاستفادة إلى أقصى حد من صورة المعاينة هذه، يُرجى التحقّق مما يلي من التفاصيل حول مربّعك:

  • أن تعكس أحدث تصميم يجب أن تمثّل المعاينة بدقة أحدث تصميم للبلاطة.
  • استخدام مظهر ألوان ثابت استخدِم المظهر اللوني الثابت للمربّع، وليس المظهر الديناميكي.
  • أن تتضمّن رمز التطبيق تأكَّد من ظهور رمز تطبيقك في أعلى صورة المعاينة.
  • تعرض حالة التحميل/تسجيل الدخول. يجب أن تعرض المعاينة حالة "تم التحميل" أو "تم تسجيل الدخول" بشكلٍ كامل، مع تجنُّب أي محتوى فارغ أو محتوى نائب.
  • الاستفادة من قواعد حلّ الموارد للتخصيص (اختياري) ننصحك باستخدام قواعد درجة دقة الموارد في Android لتقديم معاينات تتوافق مع إعدادات شاشة الجهاز أو لغته أو لغته المحلية. ويُعدّ ذلك مفعّلاً بشكلٍ خاص إذا كان مظهر مربّع التطبيق يختلف من جهاز لآخر.