این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

با کاشی شروع کنید
با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

Tiles for Wear OS نسخه

برای شروع ارائه کاشی ها از برنامه خود، وابستگی های زیر را در فایل 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"
}

کاتلین

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

شیار

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

کاتلین

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

مفاهیم کلیدی

کاشی ها مانند برنامه های اندروید ساخته نمی شوند و از مفاهیم مختلفی استفاده می کنند:

الگوهای چیدمان: ترتیب کلی عناصر بصری را روی نمایشگر تعریف کنید. این کار توسط تابع primaryLayout() انجام می شود.
عناصر چیدمان: نشان دهنده یک عنصر گرافیکی منفرد، مانند یک دکمه یا کارت ، یا چندین عنصر از این قبیل که با استفاده از یک ستون ، گروه دکمه یا موارد مشابه با هم گروه بندی شده اند. اینها در قالب یک طرح بندی تعبیه شده اند.

منابع: اشیاء ResourceBuilders.Resources شامل نقشه جفت‌های کلید-مقدار منابع Android (تصاویر) است که برای ارائه یک طرح‌بندی و نسخه مورد نیاز است.
Timeline: یک شی TimelineBuilders.Timeline لیستی از یک یا چند نمونه از یک شی layout است. می‌توانید مکانیسم‌ها و عبارات مختلفی را برای نشان دادن زمانی که رندر باید از یک شی طرح‌بندی به شی دیگر تغییر کند، ارائه دهید، مانند توقف نمایش یک طرح‌بندی در یک زمان خاص.
State: یک ساختار داده از نوع StateBuilders.State که بین کاشی و برنامه ارسال می شود تا دو مؤلفه بتوانند با یکدیگر ارتباط برقرار کنند. به عنوان مثال، اگر دکمه ای روی کاشی ضربه بزنید، وضعیت شناسه دکمه را نگه می دارد. همچنین می توانید انواع داده ها را با استفاده از نقشه مبادله کنید.
Tile: یک شی TileBuilders.Tile که یک کاشی را نشان می دهد، متشکل از یک جدول زمانی ، یک شناسه نسخه منابع ، فاصله تازه و حالت .
Protolayout: این اصطلاح در نام کلاس‌های مختلف مربوط به کاشی‌ها ظاهر می‌شود و به کتابخانه Wear OS Protolayout اشاره دارد، یک کتابخانه گرافیکی که در سطوح مختلف 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 پشتیبانی می‌کند، بنابراین می‌توان پیش‌نمایش را بر اساس عواملی مانند اندازه صفحه و زبان دستگاه تغییر داد. برای توصیه های بیشتر به چک لیست پیش نمایش مراجعه کنید.

برنامه خود را اجرا کنید و کاشی را به چرخ فلک کاشی اضافه کنید ( روش مناسب تری برای توسعه دهندگان برای پیش نمایش یک کاشی نیز وجود دارد، اما در حال حاضر فقط آن را به صورت دستی انجام دهید).

کاشی "سلام جهان". — **شکل 1.** کاشی "Hello World".

برای مثال کامل، نمونه کد در GitHub یا Codelab را ببینید.

ایجاد رابط کاربری برای کاشی ها

عناصر رابط کاربری بیانگر ماده 3 با استفاده از یک رویکرد ساختاریافته با الگوی سازنده ایمن کاتلین ایجاد می شوند.

طرح بندی

برای ایجاد طرح بندی خود، موارد زیر را انجام دهید:

یک محدوده طراحی متریال را شروع کنید: تابع materialScope() فراخوانی کنید و context و deviceConfiguration مورد نیاز را ارائه کنید. می توانید پارامترهای اختیاری مانند allowDynamicTheme و defaultColorScheme را اضافه کنید. allowDynamicTheme به طور پیش‌فرض true است، و defaultColorScheme نشان‌دهنده ColorScheme است که در زمانی که رنگ‌های پویا در دسترس نیستند - مانند زمانی که کاربر این ویژگی را خاموش کرده است - یا زمانی که توسط دستگاه پشتیبانی نمی‌شود، یا allowDynamicTheme false است، استفاده می‌شود.

UI خود را در محدوده بسازید: همه اجزای UI برای یک طرح کاشی معین باید در لامبدا یک فراخوانی () 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) }
    )
}

شکاف ها

در M3، چیدمان کاشی ها از رویکرد الهام گرفته از Compose استفاده می کند که از سه شکاف مجزا استفاده می کند. از بالا به پایین اجرا می شوند، آنها عبارتند از:

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() : کارت داده گرافیکی که یک اسلات برای داده های گرافیکی، مانند نشانگر پیشرفت، و حداکثر دو اسلات عمودی روی هم، معمولاً برای توضیحات متن ارائه می دهد.

شاخص های پیشرفت

circularProgressIndicator() : پیشرفت به سمت هدف را با استفاده از یک عنصر شعاعی نشان می دهد
segmentedCircularProgressIndicator() : پیشرفت به سمت هدف را با استفاده از یک عنصر شعاعی با مراحل مشخص نشان می دهد.

گروه بندی عناصر چیدمان

buttonGroup() : کامپوننت-layout که فرزندان خود را در یک دنباله افقی قرار می دهد
()primaryLayout : چیدمان تمام صفحه که نمایانگر سبک چیدمان پیشنهادی M3 است که پاسخگو است و از قرارگیری عناصر به همراه حاشیه‌های توصیه شده و بالشتک اعمال شده مراقبت می‌کند.

موضوع بندی

در Material 3 Expressive، سیستم رنگ با 29 نقش رنگ استاندارد تعریف می‌شود که در شش گروه اصلی، ثانویه، سوم، خطا، سطح و طرح کلی سازماندهی شده‌اند.

ماده 3 سیستم رنگ بیانگر — **شکل 3.** سیستم رنگ بیانگر ماده 3.

یک ColorScheme هر یک از این 29 نقش را به یک رنگ مربوطه نگاشت می کند، و از آنجایی که بخشی از MaterialScope است و اجزا باید درون آن ایجاد شوند، به طور خودکار رنگ ها را از طرح می گیرند. این رویکرد به تمام عناصر UI اجازه می دهد تا به طور خودکار استانداردهای طراحی متریال را رعایت کنند.

برای اینکه به کاربران اجازه دهید بین طرح رنگی که شما تعریف می‌کنید انتخاب کنند - مانند طرح رنگی که رنگ‌های برند شما را منعکس می‌کند - و طرحی که سیستم ارائه می‌کند - خواه برگرفته از صفحه ساعت فعلی کاربر یا انتخابی توسط کاربر) - 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`
ظرف رنگ	اولیه
iconColor	در Primary
labelColor	در Primary
secondaryLabelColor	onPrimary (Openity 0.8)

ممکن است لازم باشد از نشانه های رنگی پیش فرض برای عناصر UI خاص منحرف شوید. به عنوان مثال، ممکن است بخواهید یک textEdgeButton از رنگ‌های گروه «ثانویه» یا «ثالثیه» به جای «اولیه» استفاده کند تا متمایز شود و کنتراست بهتری ارائه دهد.

شما می توانید رنگ اجزا را به چند روش سفارشی کنید:

از یک تابع کمکی برای رنگ های از پیش تعریف شده استفاده کنید. از توابع کمکی مانند filledTonalButtonColors() برای اعمال سبک دکمه های استاندارد برای Material 3 Expressive استفاده کنید. این توابع نمونه‌های 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
)
```

به صراحت نقش های رنگ جایگزین را ارائه دهید. شی ButtonColors خود را ایجاد کنید و آن را به کامپوننت ارسال کنید. برای کارت ها، از شی معادل CardColors استفاده کنید.

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

رنگ های ثابت را مشخص کنید (با احتیاط استفاده کنید). در حالی که به طور کلی توصیه می شود رنگ ها را بر اساس نقش معنایی آنها مشخص کنید (به عنوان مثال، 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 و بهینه‌سازی عملکرد، تمام متن‌های روی کاشی‌ها با استفاده از یک فونت ارائه‌شده توسط سیستم ارائه می‌شوند. یعنی کاشی ها از حروف سفارشی پشتیبانی نمی کنند. در Wear OS 6 و بالاتر، این یک فونت مخصوص OEM است. در بیشتر موارد این یک فونت متغیر خواهد بود که تجربه گویاتر و کنترل دقیق تری را ارائه می دهد.

برای ایجاد یک سبک متن، معمولاً از متد text() همراه با ثابت های تایپوگرافی استفاده می کنید. این مؤلفه به شما امکان می دهد از نقش های تایپوگرافی از پیش تعریف شده در Material 3 Expressive استفاده کنید، که به کاشی شما کمک می کند تا از بهترین شیوه های تایپوگرافی برای خوانایی و سلسله مراتب پیروی کند. این کتابخانه مجموعه ای از 18 ثابت تایپوگرافی معنایی مانند BODY_MEDIUM را ارائه می دهد. این ثابت ها همچنین بر محورهای فونت غیر از اندازه تأثیر می گذارند.

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

برای کنترل بیشتر، می‌توانید تنظیمات اضافی را ارائه کنید. در Wear OS 6 و بالاتر، احتمالاً از یک فونت متغیر استفاده می‌شود که می‌توانید آن را در امتداد محورهای مورب، وزن ، عرض و گرد تغییر دهید. شما می توانید این محورها را با استفاده از پارامتر 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)),
)

در نهایت، اگر نیاز به کنترل اندازه یا فاصله حروف دارید (توصیه نمی شود)، به جای text( ) از basicText () استفاده کنید و با استفاده از fontStyle() یک مقدار برای ویژگی fontStyle بسازید.

شکل و حاشیه

شما می توانید شعاع گوشه تقریباً هر جزء را با استفاده از ویژگی shape آن تغییر دهید. مقادیر از shapes ویژگی MaterialScope می آیند:

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 : یک خط منحنی در اطراف Arc ارائه می دهد.
ArcText : متن منحنی را در Arc ارائه می دهد.
ArcAdapter : یک عنصر چیدمان اصلی را در کمان ارائه می دهد که مماس بر کمان کشیده شده است.

برای اطلاعات بیشتر، به مستندات مرجع برای هر یک از انواع عناصر مراجعه کنید.

اصلاح کننده ها

هر عنصر طرح‌بندی موجود می‌تواند به‌صورت اختیاری اصلاح‌کننده‌هایی روی آن اعمال شود. از این اصلاح کننده ها برای اهداف زیر استفاده کنید:

ظاهر بصری چیدمان را تغییر دهید. برای مثال، یک پس‌زمینه، حاشیه یا بالشتک به عنصر طرح‌بندی خود اضافه کنید.
ابرداده در مورد طرح بندی اضافه کنید. به عنوان مثال، برای استفاده در صفحه‌خوان‌ها، یک اصلاح‌کننده معنایی به عنصر طرح‌بندی خود اضافه کنید.
قابلیت اضافه کنید. به عنوان مثال، یک اصلاح کننده قابل کلیک به عنصر طرح خود اضافه کنید تا کاشی شما تعاملی شود. برای اطلاعات بیشتر، به تعامل با کاشی ها مراجعه کنید.

به عنوان مثال، می‌توانیم ظاهر و ابرداده پیش‌فرض یک Image را همانطور که در نمونه کد زیر نشان داده شده است، سفارشی کنیم:

کاتلین

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()

جاوا

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();
}

spannables

Spannable نوع خاصی از کانتینر است که عناصر را مشابه متن قرار می دهد. این زمانی مفید است که می خواهید یک سبک متفاوت را فقط برای یک زیر رشته در یک بلوک بزرگتر از متن اعمال کنید، چیزی که با عنصر Text امکان پذیر نیست.

ظرف Spannable با کودکان Span پر شده است. سایر کودکان یا نمونه‌های تودرتو Spannable مجاز نیستند.

دو نوع بچه Span وجود دارد:

SpanText : متن را با یک سبک خاص ارائه می دهد.
SpanImage : یک تصویر را با متن ارائه می دهد.

به عنوان مثال، می‌توانید «world» را در کاشی «Hello world» به صورت مورب درج کنید و تصویری را بین کلمات وارد کنید، همانطور که در نمونه کد زیر نشان داده شده است:

کاتلین

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()

جاوا

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();
}

با منابع کار کنید

کاشی ها به هیچ یک از منابع برنامه شما دسترسی ندارند. این به این معنی است که نمی‌توانید شناسه تصویر اندروید را به عنصر طرح‌بندی Image ارسال کنید و انتظار داشته باشید که برطرف شود. در عوض، متد onTileResourcesRequest() نادیده بگیرید و هر منبعی را به صورت دستی ارائه کنید.

دو راه برای ارائه تصاویر در متد onTileResourcesRequest() وجود دارد:

با استفاده از setAndroidResourceByResId() یک منبع قابل ترسیم ارائه دهید.
با استفاده از setInlineResource() یک تصویر پویا به عنوان ByteArray ارائه دهید.

کاتلین

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()
)

جاوا

@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 را برای ارائه پیش نمایش هایی که با اندازه نمایشگر، زبان یا تنظیمات محلی دستگاه مطابقت دارد، در نظر بگیرید. این به ویژه در صورتی مفید است که ظاهر کاشی شما در دستگاه‌ها متفاوت باشد.

با کاشی شروع کنید با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

شیار

کاتلین

شیار

کاتلین

مفاهیم کلیدی

یک کاشی ایجاد کنید

ایجاد رابط کاربری برای کاشی ها

طرح بندی

شکاف ها

اجزای رابط کاربری

دکمه ها

دکمه های لبه

کارت ها

شاخص های پیشرفت

گروه بندی عناصر چیدمان

موضوع بندی

رنگ

تایپوگرافی

شکل و حاشیه

قوس ها

اصلاح کننده ها

کاتلین

جاوا

spannables

کاتلین

جاوا

با منابع کار کنید

کاتلین

جاوا

چک لیست تصویر پیش نمایش کاشی

با کاشی شروع کنید
با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.