سبک‌ها و زمینه‌ها

امتحان کردن روش Compose
Jetpack Compose جعبه‌ابزار واسط کاربر توصیه‌شده برای Android است. با نحوه کار با زمینه‌سازی در Compose آشنا شوید.

سبک‌ها و زمینه‌ها در Android به شما امکان می‌دهند جزئیات طراحی برنامه‌تان را از ساختار و رفتار واسط کاربری جدا کنید، مشابه برگه‌های سبک نگارش در طراحی وب.

سبک مجموعه‌ای از مشخصه‌ها است که ظاهر یک View را مشخص می‌کند. سبک می‌تواند مشخصه‌هایی مثل رنگ قلم، اندازه قلم، رنگ پس‌زمینه، و موارد بسیار دیگری را مشخص کند.

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

سبک‌ها و زمینه‌ها در فایل منبع سبک در res/values/، معمولاً با نام styles.xml، اعلام می‌شوند.

شکل ۱. دو طرح زمینه اعمال‌شده روی یک فعالیت: Theme.AppCompat (چپ) و Theme.AppCompat.Light (راست).

طرح‌های زمینه درمقابل سبک‌ها

زمینه‌ها و سبک‌ها شباهت‌های زیادی دارند، اما برای اهداف متفاوتی استفاده می‌شوند. تم‌ها و سبک‌ها ساختار پایه یکسانی دارند—یک جفت کلید-مقدار که مشخصه‌ها را به منابع نگاشت می‌کند.

سبک مشخصه‌های نوع خاصی از نما را تعیین می‌کند. برای مثال، یک سبک ممکن است ویژگی‌های دکمه را مشخص کند. هر مشخصه‌ای که در یک سبک تعیین می‌کنید، مشخصه‌ای است که می‌توانید در فایل چیدمان تنظیم کنید. استخراج همه مشخصه‌ها به یک سبک، استفاده و نگهداری از آن‌ها را در چندین ابزاره آسان می‌کند.

زمینه مجموعه‌ای از منابع نام‌گذاری‌شده را تعریف می‌کند که می‌توانند توسط سبک‌ها، چیدمان‌ها، ابزاره‌ها، و غیره ارجاع داده شوند. زمینه نام‌های معنایی، مثل colorPrimary، را به منابع Android اختصاص می‌دهد.

سبک‌ها و زمینه‌ها برای کار کردن با یکدیگر طراحی شده‌اند. برای مثال، ممکن است سبکی داشته باشید که مشخص می‌کند یک بخش از دکمه colorPrimary است و بخش دیگر colorSecondary است. تعاریف واقعی آن رنگ‌ها در زمینه ارائه شده است. وقتی دستگاه به حالت شب می‌رود، برنامه شما می‌تواند از زمینه «روشن» به زمینه «تیره» تغییر کند، و مقادیر همه آن نام‌های منبع را تغییر دهد. نیازی به تغییر سبک‌ها نیست، زیرا سبک‌ها از نام‌های معنایی استفاده می‌کنند و نه تعاریف رنگ خاص.

برای اطلاعات بیشتر درباره نحوه عملکرد طرح‌های زمینه و سبک‌ها با یکدیگر، پست وبلاگ سبک‌بندی Android: طرح‌های زمینه درمقابل سبک‌ها را ببینید.

ایجاد و اعمال کردن سبک

برای ایجاد سبک جدید، فایل res/values/styles.xml پروژه‌تان را باز کنید. برای هر سبکی که می‌خواهید ایجاد کنید، این مراحل را دنبال کنید:

  1. عنصر <style> را با نامی که به‌طور منحصربه‌فرد سبک را شناسایی می‌کند اضافه کنید.
  2. برای هر مشخصه سبکی که می‌خواهید تعریف کنید، یک عنصر <item> اضافه کنید. name در هر مورد مشخصه‌ای را تعیین می‌کند که درغیراین‌صورت از آن به‌عنوان مشخصه XML در چیدمانتان استفاده می‌کنید. مقدار موجود در عنصر <item> مقدار آن مشخصه است.

برای مثال، فرض کنید سبک زیر را تعریف می‌کنید:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="GreenText" parent="TextAppearance.AppCompat">
        <item name="android:textColor">#00FF00</item>
    </style>
</resources>

می‌توانید سبک را به‌صورت زیر روی نما اعمال کنید:

<TextView
    style="@style/GreenText"
    ... />

هر مشخصه تعیین‌شده در سبک، درصورت پذیرش ازسوی نما، بر آن نما اعمال می‌شود. نمای هر مشخصه‌ای را که نمی‌پذیرد نادیده می‌گیرد.

بااین‌حال، به‌جای اعمال سبک به نماهای تکی، معمولاً سبک‌ها را به‌عنوان زمینه برای کل برنامه، فعالیت، یا مجموعه نماها اعمال می‌کنید، همان‌طور که در بخش دیگری از این راهنما شرح داده شده است.

گسترش و سفارشی‌سازی سبک

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

برای مثال، می‌توانید ظاهر نوشتار پیش‌فرض پلاتفرم Android را به ارث ببرید و آن را به‌صورت زیر اصلاح کنید:

<style name="GreenText" parent="@android:style/TextAppearance">
    <item name="android:textColor">#00FF00</item>
</style>

بااین‌حال، همیشه سبک‌های برنامه اصلی‌تان را از «کتابخانه پشتیبانی Android» به ارث ببرید. سبک‌های موجود در «کتابخانه پشتیبانی» با بهینه‌سازی هر سبک برای مشخصه‌های واسط کاربری موجود در هر نسخه، سازگاری را فراهم می‌کنند. سبک‌های «کتابخانه پشتیبانی» اغلب نامی مشابه سبک پلاتفرم دارند، اما AppCompat را هم شامل می‌شوند.

برای به‌ارث بردن سبک‌ها از کتابخانه یا پروژه خودتان، نام سبک اصلی را بدون بخش @android:style/ نشان‌داده‌شده در مثال قبلی اعلام کنید. برای مثال، نمونه زیر سبک‌های ظاهر نوشتار را از «کتابخانه پشتیبانی» به ارث می‌برد:

<style name="GreenText" parent="TextAppearance.AppCompat">
    <item name="android:textColor">#00FF00</item>
</style>

همچنین می‌توانید سبک‌ها را (به‌جز سبک‌های پلاتفرم) با گسترش دادن نام سبک با نماد نقطه به‌جای استفاده از مشخصه parent به ارث ببرید. یعنی نام سبک خود را با نام سبکی که می‌خواهید به ارث ببرید پیشوند کنید و آن‌ها را با نقطه از هم جدا کنید. معمولاً فقط زمانی این کار را انجام می‌دهید که سبک‌های خودتان را گسترش می‌دهید، نه سبک‌های کتابخانه‌های دیگر. برای مثال، سبک زیر همه سبک‌ها را از GreenText در مثال قبلی به ارث می‌برد و سپس اندازه نوشتار را افزایش می‌دهد:

<style name="GreenText.Large">
    <item name="android:textSize">22dp</item>
</style>

می‌توانید با زنجیر کردن نام‌های بیشتر، به ارث بردن سبک‌هایی مانند این را هر چند بار که بخواهید ادامه دهید.

برای اینکه ببینید کدام مشخصه‌ها را می‌توانید با برچسب <item> اعلام کنید، به جدول «مشخصه‌های XML» در مراجع کلاس‌های مختلف مراجعه کنید. همه نماها از مشخصه‌های XML از کلاس View پایه پشتیبانی می‌کنند و بسیاری از نماها مشخصه‌های ویژه خودشان را اضافه می‌کنند. برای مثال، TextView مشخصه‌های XML شامل مشخصه android:inputType است که می‌توانید آن را برای نمای نوشتاری که ورودی دریافت می‌کند، مثل ابزارک EditText، اعمال کنید.

اعمال کردن سبک به‌عنوان زمینه

می‌توانید زمینه را به همان روشی که سبک‌ها را ایجاد می‌کنید ایجاد کنید. تفاوت در نحوه اعمال آن است: به‌جای اعمال سبک با مشخصه style در نما، زمینه‌ای را با مشخصه android:theme در برچسب <application> یا برچسب <activity> در فایل AndroidManifest.xml اعمال می‌کنید.

برای مثال، در اینجا نحوه اعمال زمینه «تیره» طراحی مواد کتابخانه پشتیبانی Android به کل برنامه آورده شده است:

<manifest ... >
    <application android:theme="@style/Theme.AppCompat" ... >
    </application>
</manifest>

و نحوه اعمال زمینه «روشن» فقط برای یک فعالیت در اینجا آمده است:

<manifest ... >
    <application ... >
        <activity android:theme="@style/Theme.AppCompat.Light" ... >
        </activity>
    </application>
</manifest>

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

با شروع از Android 5.0 (سطح میانای برنامه‌سازی کاربردی ۲۱) و کتابخانه پشتیبانی Android نسخه ۲۲.۱، می‌توانید مشخصه android:theme را نیز برای نمای فایل چیدمانتان تعیین کنید. این کار زمینه را برای آن نما و هر نمای فرزند تغییر می‌دهد، که برای تغییر پالت‌های رنگ زمینه در بخش خاصی از میانای شما مفید است.

مثال‌های قبلی نشان می‌دهد که چگونه می‌توان زمینه‌ای مانند Theme.AppCompat را که توسط کتابخانه پشتیبانی Android ارائه شده است، اعمال کرد. بااین‌حال، معمولاً می‌خواهید زمینه را سفارشی‌سازی کنید تا با نمانام برنامه‌تان مطابقت داشته باشد. بهترین راه برای انجام این کار، گسترش این سبک‌ها از «کتابخانه پشتیبانی» و لغو برخی‌از مشخصه‌ها است، همان‌طور که در بخش زیر شرح داده شده است.

سلسله مراتب سبک

Android روش‌های مختلفی برای تنظیم مشخصه‌ها در سراسر برنامه Android شما ارائه می‌دهد. برای مثال، می‌توانید مشخصه‌ها را مستقیماً در یک چیدمان تنظیم کنید، سبکی را به یک نما اعمال کنید، زمینه‌ای را به یک چیدمان اعمال کنید، و حتی مشخصه‌ها را به‌صورت برنامه‌نویسی تنظیم کنید.

هنگام انتخاب نحوه سبک‌بندی برنامه‌تان، به سلسله‌مراتب سبک Android توجه داشته باشید. به‌طور کلی، برای سازگاری، تا حد امکان از زمینه‌ها و سبک‌ها استفاده کنید. اگر مشخصه‌های یکسانی را در چندین مکان مشخص کنید، فهرست زیر تعیین می‌کند که درنهایت کدام مشخصه‌ها اعمال شوند. این فهرست از بالاترین اولویت به پایین‌ترین اولویت مرتب شده است.

  1. اعمال کردن سبک‌بندی در سطح نویسه یا پاراگراف بااستفاده از گستره‌های نوشتار برای کلاس‌های مشتق‌شده از TextView.
  2. اعمال مشخصه‌ها به‌صورت برنامه‌نویسی‌شده.
  3. اعمال مشخصه‌های تکی مستقیماً در یک نما.
  4. اعمال کردن سبک به نما.
  5. سبک‌پردازی پیش‌فرض.
  6. اعمال کردن زمینه‌ای برای مجموعه‌ای از نماها، فعالیت، یا کل برنامه.
  7. اعمال کردن سبک‌بندی خاص نمای مشخص، مثل تنظیم کردن TextAppearance در TextView.

شکل ۲. سبک‌پردازی از span سبک‌پردازی از textAppearance را لغو می‌کند.

TextAppearance

یکی از محدودیت‌های سبک‌ها این است که فقط می‌توانید یک سبک را برای View اعمال کنید. اما در TextView، می‌توانید مشخصه TextAppearance را نیز مشخص کنید که عملکردی مشابه سبک دارد، همان‌طور که در مثال زیر نشان داده شده است:

<TextView
    ...
    android:textAppearance="@android:style/TextAppearance.Material.Headline"
    android:text="This text is styled via textAppearance!" />

TextAppearance به شما امکان می‌دهد سبک خاص نوشتار را تعریف کنید و درعین‌حال سبک View را برای استفاده‌های دیگر دردسترس بگذارید. اما توجه داشته باشید که اگر مشخصه‌های نوشتاری را مستقیماً در View یا در یک سبک تعریف کنید، این مقادیر بر مقادیر TextAppearance اولویت دارند.

TextAppearance از زیرمجموعه‌ای از مشخصه‌های سبک‌بندی که TextView ارائه می‌دهد پشتیبانی می‌کند. برای مشاهده فهرست کامل مشخصه‌ها، به TextAppearance مراجعه کنید.

برخی‌از مشخصه‌های رایج TextView که گنجانده نشده‌اند عبارتند از lineHeight[Multiplier|Extra]، lines، breakStrategy، و hyphenationFrequency. TextAppearance در سطح نویسه کار می‌کند و نه در سطح پاراگراف، بنابراین ویژگی‌هایی که بر کل چیدمان تأثیر می‌گذارند پشتیبانی نمی‌شوند.

سفارشی‌سازی کردن زمینه پیش‌فرض

وقتی پروژه‌ای را با Android Studio ایجاد می‌کنید، این ابزار به‌طور پیش‌فرض زمینه «طراحی مواد» را بر برنامه‌تان اعمال می‌کند، همان‌طور که در فایل styles.xml پروژه‌تان تعریف شده است. این سبک AppTheme زمینه را از «کتابخانه پشتیبانی» گسترش می‌دهد و شامل لغو کردن ویژگی‌های رنگی است که توسط عناصر کلیدی میانای کاربر استفاده می‌شود، مانند نوار برنامه و دکمه کنش شناور، درصورت استفاده. بنابراین، می‌توانید با به‌روزرسانی رنگ‌های ارائه‌شده، طراحی رنگ برنامه‌تان را به‌سرعت سفارشی‌سازی کنید.

برای مثال، فایل styles.xml شما شبیه به این است:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

مقادیر سبک درواقع ارجاعاتی به دیگر منابع رنگ هستند که در فایل res/values/colors.xml پروژه تعریف شده‌اند. این همان فایلی است که برای تغییر رنگ‌ها ویرایش می‌کنید. برای بهبود تجربه کاربری با رنگ پویا و رنگ‌های سفارشی بیشتر، نمای کلی رنگ طراحی مواد را ببینید.

وقتی رنگ‌هایتان را شناختید، مقادیر را در res/values/colors.xml به‌روز کنید:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--   Color for the app bar and other primary UI elements. -->
    <color name="colorPrimary">#3F51B5</color>

    <!--   A darker variant of the primary color, used for
           the status bar (on Android 5.0+) and contextual app bars. -->
    <color name="colorPrimaryDark">#303F9F</color>

    <!--   a secondary color for controls like checkboxes and text fields. -->
    <color name="colorAccent">#FF4081</color>
</resources>

سپس می‌توانید هر سبک دیگری را که می‌خواهید لغو کنید. برای مثال، می‌توانید رنگ پس‌زمینه فعالیت را به‌صورت زیر تغییر دهید:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    ...
    <item name="android:windowBackground">@color/activityBackground</item>
</style>

برای مشاهده فهرست مشخصه‌هایی که می‌توانید در زمینه‌تان استفاده کنید، جدول مشخصه‌ها را در R.styleable.Theme ببینید. هنگام افزودن سبک‌ها برای نماها در چیدمان، می‌توانید با نگاه کردن به جدول «مشخصه‌های XML» در مراجع کلاس نما، مشخصه‌ها را نیز پیدا کنید. برای مثال، همه نماها از مشخصه‌های XML از کلاسView پایه پشتیبانی می‌کنند.

بیشتر مشخصه‌ها برای انواع خاصی از نماها اعمال می‌شوند و برخی برای همه نماها اعمال می‌شوند. بااین‌حال، برخی‌از مشخصه‌های زمینه‌ای که در R.styleable.Theme فهرست شده‌اند برای پنجره فعالیت اعمال می‌شوند، نه نماهای موجود در چیدمان. برای مثال، windowBackground پس‌زمینه پنجره را تغییر می‌دهد و windowEnterTransition پویانمایی انتقالی را برای استفاده هنگام شروع فعالیت تعریف می‌کند. برای جزئیات بیشتر، به شروع کردن فعالیت بااستفاده از پویانمایی مراجعه کنید.

«کتابخانه پشتیبانی Android» مشخصه‌های دیگری نیز ارائه می‌دهد که می‌توانید از آن‌ها برای سفارشی‌سازی کردن زمینه‌تان که از Theme.AppCompat گسترش یافته است استفاده کنید، مثل مشخصه colorPrimary که در مثال قبلی نشان داده شده است. این موارد را بهتر است در فایل attrs.xml کتابخانه مشاهده کنید.

همچنین زمینه‌های مختلفی از «کتابخانه پشتیبانی» دردسترس است که ممکن است بخواهید به‌جای زمینه‌های نشان‌داده‌شده در مثال قبلی، آن‌ها را گسترش دهید. بهترین مکان برای دیدن زمینه‌های دردسترس، فایل themes.xml کتابخانه است.

افزودن سبک‌های مختص نسخه

اگر نسخه جدید Android ویژگی‌های زمینه‌ای را اضافه می‌کند که می‌خواهید استفاده کنید، می‌توانید آن‌ها را به زمینه‌تان اضافه کنید درحالی‌که همچنان با نسخه‌های قدیمی سازگار است. تنها چیزی که نیاز دارید یک فایل styles.xml دیگر است که در دایرکتوری values ذخیره شده باشد و شامل توصیف‌کننده نسخه منبع باشد:

res/values/styles.xml        # themes for all versions
res/values-v21/styles.xml    # themes for API level 21+ only

چون سبک‌های موجود در فایل values/styles.xml برای همه نسخه‌ها دردسترس است، زمینه‌های شما در values-v21/styles.xml می‌تواند آن‌ها را به ارث ببرد. این یعنی می‌توانید با شروع از یک زمینه «پایه» و سپس گسترش آن در سبک‌های مختص نسخه خود، از تکرار سبک‌ها جلوگیری کنید.

برای مثال، برای اعلام انتقال‌های پنجره برای Android 5.0 (سطح میانای برنامه‌سازی کاربردی ۲۱) و بالاتر، باید از مشخصه‌های جدید استفاده کنید. بنابراین، زمینه پایه شما در res/values/styles.xml می‌تواند به این شکل باشد:

<resources>
    <!-- Base set of styles that apply to all versions. -->
    <style name="BaseAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryTextColor</item>
        <item name="colorAccent">@color/secondaryColor</item>
    </style>

    <!-- Declare the theme name that's actually applied in the manifest file. -->
    <style name="AppTheme" parent="BaseAppTheme" />
</resources>

سپس، سبک‌های مختص نسخه را در res/values-v21/styles.xml به‌صورت زیر اضافه کنید:

<resources>
    <!-- extend the base theme to add styles available only with API level 21+ -->
    <style name="AppTheme" parent="BaseAppTheme">
        <item name="android:windowActivityTransitions">true</item>
        <item name="android:windowEnterTransition">@android:transition/slide_right</item>
        <item name="android:windowExitTransition">@android:transition/slide_left</item>
    </style>
</resources>

اکنون می‌توانید AppTheme را در فایل مانیفست خود اعمال کنید و سیستم سبک‌های موجود برای هر نسخه سیستم را انتخاب می‌کند.

برای اطلاعات بیشتر درباره استفاده از منابع جایگزین برای دستگاه‌های مختلف، به ارائه منابع جایگزین مراجعه کنید.

سفارشی‌سازی سبک‌های ابزاره

هر ابزاره در چارچوب و «کتابخانه پشتیبانی» سبک پیش‌فرضی دارد. برای مثال، وقتی برنامه‌تان را بااستفاده از زمینه‌ای از «کتابخانه پشتیبانی» سبک‌بندی می‌کنید، نمونه‌ای از Button بااستفاده از سبک Widget.AppCompat.Button سبک‌بندی می‌شود. اگر می‌خواهید سبک ابزاره متفاوتی را برای دکمه‌ای اعمال کنید، می‌توانید این کار را با مشخصه style در فایل چیدمانتان انجام دهید. برای مثال، کد زیر سبک دکمه بدون حاشیه کتابخانه را اعمال می‌کند:

<Button
    style="@style/Widget.AppCompat.Button.Borderless"
    ... />

اگر می‌خواهید این سبک را برای همه دکمه‌ها اعمال کنید، می‌توانید آن را در buttonStyle زمینه‌تان به‌صورت زیر اعلام کنید:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="buttonStyle">@style/Widget.AppCompat.Button.Borderless</item>
    ...
</style>

همچنین می‌توانید سبک‌های ابزاره را گسترش دهید، درست مانند گسترش هر سبک دیگری، و سپس سبک ابزاره سفارشی خود را در چیدمان یا زمینه‌تان اعمال کنید.

منابع بیشتر

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

پست‌های وبلاگ