سبک ها و تم ها

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

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

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

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

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

شکل 1. دو موضوع برای یک فعالیت اعمال شده است: Theme.AppCompat (سمت چپ) و Theme.AppCompat.Light (راست).

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

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

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

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

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

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

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

برای ایجاد یک سبک جدید، فایل 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>

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

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

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

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

گسترش و سفارشی کردن یک سبک

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

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

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

با این حال، همیشه سبک های اصلی برنامه خود را از کتابخانه پشتیبانی اندروید به ارث ببرید. سبک‌های موجود در کتابخانه پشتیبانی با بهینه‌سازی هر سبک برای ویژگی‌های UI موجود در هر نسخه، سازگاری را فراهم می‌کنند. سبک‌های کتابخانه پشتیبانی اغلب نامی شبیه به سبک پلتفرم دارند، اما 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 در یک view، یک تم با ویژگی android:theme روی تگ <application> یا تگ <activity> در فایل AndroidManifest.xml اعمال می کنید. .

به عنوان مثال، در اینجا نحوه اعمال طرح زمینه «تاریک» Material Library's Support Library در کل برنامه آمده است:

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

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

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

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

با شروع Android 5.0 (سطح API 21) و Android Support Library نسخه 22.1، می‌توانید ویژگی android:theme برای یک view در فایل طرح‌بندی خود مشخص کنید. این طرح زمینه را برای آن نما و هر نماهای فرزند تغییر می دهد، که برای تغییر پالت های رنگ تم در بخش خاصی از رابط کاربری شما مفید است.

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

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

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

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

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

شکل 2. یک ظاهر طراحی شده از یک span ، یک ظاهر طراحی شده از یک 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» در مراجع کلاس view، ویژگی‌ها را پیدا کنید. به عنوان مثال، همه نماها از ویژگی های 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 می‌توانند آنها را به ارث ببرند. این بدان معنی است که می توانید با شروع با یک موضوع "پایه" و سپس گسترش آن در سبک های خاص نسخه خود، از تکرار سبک ها جلوگیری کنید.

به عنوان مثال، برای اعلام انتقال پنجره برای اندروید 5.0 (سطح API 21) و بالاتر، باید از ویژگی های جدید استفاده کنید. بنابراین، موضوع پایه شما در 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>

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

منابع اضافی

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

پست های وبلاگ