API استایل، الگوی جدیدی برای سفارشیسازی یا «استایلدهی» عناصر و کامپوننتها در Jetpack Compose است که به طور سنتی از طریق اصلاحکنندهها انجام میشد. این API برای شخصیسازی عمیقتر و آسانتر طراحی شده است.
API استایلها انعطافپذیری را در بین عوامل فرم بهبود میبخشد، عملکرد بهتری را ارائه میدهد و ایجاد سیستم طراحی سفارشی را آسانتر میکند. حتی اگر به اجزای سفارشی نیاز نداشته باشید، API استایلها مزایای زیادی برای سیستم طراحی شما دارد.
یک تمایز مهم این است که Styleها جایگزین modifierها نیستند، اما به عنوان جایگزینی برای پارامترهای استایلبندی، مانند padding و رنگها عمل میکنند. توصیه میکنیم برای افزایش انعطافپذیری و عملکرد، به جای پارامترها از Styleها استفاده کنید.
مزایای استایلها
- سادهسازی استایلدهی مبتنی بر حالت: این API روشی مختصرتر و اعلانیتر برای تعریف استایلهایی که بر اساس حالتهای مختلف (مثلاً ماوس روی صفحه، فوکوس روی صفحه، فشردن دکمه) تغییر میکنند، ارائه میدهد و در مقایسه با سیستم اصلاحکننده، کد تکراری را به میزان قابل توجهی کاهش میدهد.
- بهبود انتقال حالتهای انیمیشنی: رابط برنامهنویسی کاربردی استایل (Style API) امکان انیمیشن داخلی ویژگیهای استایل را بین حالتهایی با ویژگیهای عملکردی ایدهآل فراهم میکند و از ترکیبهای مجددی که با رویکرد فعلی
animateColorAsStateرخ میدهد، جلوگیری میکند. - سادهسازی APIهای کامپوننت: با معرفی یک پارامتر استایل واحد برای سفارشیسازی، APIهای کامپوننت به طرز چشمگیری ساده شده و انعطافپذیری بیشتری ارائه میدهند.
- ترکیببندیهای مجدد کمتر منجر به عملکرد بهتر نسبت به اصلاحکنندهها میشود: سبکها در مراحل ترسیم و طرحبندی Compose اجرا میشوند و در مرحله ترکیببندی اجرا نمیشوند.
- مجموعه استانداردتر APIها: مجموعهای استاندارد از ویژگیهای سبکی، هر کامپوننتی را قابل استایلدهی میکند.
مفاهیم اصلی
| مفهوم | توضیحات |
|---|---|
Style | رابطی که ظاهر یک عنصر رابط کاربری را با مجموعهای استاندارد از ویژگیهای قابل استایلدهی تعریف میکند. این رابط شبیه به استایلهای CSS است و میتواند به صورت محلی یا از طریق یک تم سفارشیسازی شود. استایلها روی یکدیگر بازنویسی میشوند؛ تنظیم مجدد یک ویژگی (مثلاً background() ) منجر به یک مقدار نهایی واحد میشود. |
StyleScope | یک محدوده گیرنده برای تابع applyStyle() درون یک Style. این تابع توابعی را برای تعریف ویژگیهای بصری (padding، background، border و غیره) و دسترسی به StyleState فعلی فراهم میکند. |
StyleState | حالتی (مثلاً isEnabled ، isPressed ، isChecked ، حالتهای سفارشی) را ارائه میدهد که میتوانید در یک Style برای تعریف استایلبندی شرطی از آنها استفاده کنید. |
شروع کنید: وابستگیها را اضافه کنید
برای استفاده از APIها در پروژه خود، مطمئن شوید که از آخرین نسخه آلفای Jetpack Compose Foundation استفاده میکنید. در فایل settings.gradle.kts خود، مخزن snapshot maven را به لیست مخازن مورد استفاده اضافه کنید.
یا در libs.versions.toml یا مستقیماً در فایل app/build.gradle.kts خود، نسخه Compose را روی 1.11.0-alpha06 تنظیم کنید:
compose = "1.11.0-alpha06"
androidx-compose-runtime = { group = "androidx.compose.runtime", name = "runtime", version.ref = "compose" }
androidx-compose-ui = { group = "androidx.compose.ui", name = "ui", version.ref = "compose" }
androidx-compose-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics", version.ref = "compose" }
androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling", version.ref = "compose" }
androidx-compose-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview", version.ref = "compose" }
androidx-compose-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest", version.ref = "compose" }
androidx-compose-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4", version.ref = "compose" }
androidx-compose-foundation = { group = "androidx.compose.foundation", name = "foundation", version.ref = "compose" }