آموزش تم Theme و استایل ها Style در اندروید

دوره آموزش برنامه نویسی اندروید

کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده می باشد و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.

آموزش سبک ها و قالب ها در اندروید

فهرست محتوا 

1. سبک بندی و استایل ها در اندروید

سبک بندی در اندروید

وراثت (inheritance)

ارجاع دادن به خصیصه ها در تم جاری

تم چیست؟

2. استفاده از تم های محیط اندروید

کی و چگونه می توان از طرح ریزی holo استفاده کرد؟

کی و چگونه می توان از طرح ریزی material استفاده کرد؟

سفرشی سازی جعبه رنگ (color palette)

سبک بندی تک view ها و viewgroup ها

بهترین روش انتخاب تم ها

3. طرح ریزی واکنش گرا (responsive design)

ملاحظاتی که در طرح ریزی واکنشی باید در نظر داشته باشید

حاشیه گذاری (پیاده سازی margin points)

1. سبک بندی و استایل ها در اندروید

سبک بندی در اندروید

سیستم اندروید به برنامه نویس این امکان را می دهد که ظاهر، برای مثال رنگ ها و فونت های مولفه های اندروید را در فایل های منبع XML تعریف کند، بدین نحو برنامه نویس خصیصه های معمول و متعارف سبک بندی و استایل ها را در یک مکان واحد تنظیم یا سِت می کند.

اگر درایه ی (entry) موجود در در فایل منبع به منظور سبک بندی یک view مورد استفاده قرار گیرد، به طور عمده از آن به عنوان style یاد می شود. حال در صورتی که همان درایه جهت سبک بندی یک activity یا اپلیکیشن بکار گرفته شود، به عنوان theme شناخته می شود.

برای تعریف سبک یا تم، کافی است یک فایلXML  در پوشه ی /res/values پروژه ی خود ایجاد کنید. گره ی اصلی (root node) فایل XML باید <resources> باشد و همچنین باید از تگ style که دربردارنده ی خصیصه ی name است استفاده کنید. تگ گفته شده خود شامل item tag های بیشتری است که مقادیر خصیصه های نام گذاری شده را تعریف می کند.

فایل styles.xml مثالی از تعریف یک استایل را زیر ارائه می دهد.

‎<?xml version="1.0" encoding="utf-8" ?>

‎

‎<resources>

    <style name="text">

        ‎ ‎ <item name="android:padding" > 4dip</item > ‎ ‎ <item name="android:textAppearance" > ?android:attr/textAppearanceLarge</item > ‎ ‎ <item name="android:textColor" > #000000</item > ‎ ‎

    </style>‎

    <style name="layout">

        ‎ ‎ <item name="android:background" > #C0C0C0</item > ‎ ‎

    </style>‎

    ‎

</resources>‎

خصیصه ی استایل مربوطه را به المان های خود، برای مثال عناصر متن، از طریق style=”@style/text تخصیص دهید.

وراثت (inheritance)

سبک ها (و تم ها) با استفاده از خصیصه ی والد (parent attribute) تگِ استایل از قابلیت وراثت پشتیبانی می کند، از این طریق استایل تمامی setting ها و تنظیمات سبک والد را به ارث برده و خصیصه های انتخابی را بازنویسی (overwrite) کند. 

ارجاع دادن به خصیصه ها در تم جاری

اندروید کلیه ی صفت مشخصه های استانداردی را که می توان سبک بندی (style بندی) کرد را در فایل R.attr فهرست می کند. ارجاع به این فایل تحت URL : R.attr قابل دسترسی می باشد.

می توانید به وسیله ی نشانه گذاری / notation ?android:attr به هر یک از صفت مشخصه های تم کنونی ارجاع کنید. نشانگذاری بالا نشان می دهد که شما به صفت مشخصه ی خاصی در تم جاری ارجاع می دهید.

به عنوان مثال می توان ?android:attr/listPreferredItemHeight را در نظر گرفت که چنین مفهومی را می رساند :  "مقداری که توسط خصیصه ای به نامlistPreferredItemHeight  تعریف شده را در تم جاری بکار ببر".

Layout ی که زیر مشاهده می کنید دکمه ها را با استایل اندروید 4.0 سبک بندی می کند.

            ‎<?xml version="1.0" encoding="utf-8" ?>

‎

‎<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" ‎

               ‎ android:layout_width="match_parent" ‎

               ‎ android:layout_height="match_parent" ‎

               ‎ android:orientation="vertical">

    ‎

    ‎ ‎

    ‎    <linearlayout style="?android:attr/buttonBarStyle" ‎

                       ‎ android:layout_width="match_parent" ‎

                       ‎ android:layout_height="wrap_content" ‎

                       ‎ android:orientation="horizontal">

        ‎

        ‎ ‎

        ‎        <button android:id="@+id/Button01" ‎

                         ‎ style="?android:attr/buttonBarButtonStyle" ‎

                         ‎ android:layout_width="0dp" ‎

                         ‎ android:layout_height="wrap_content" ‎

                         ‎ android:layout_weight="1" ‎

                         ‎ android:text="Show" />‎

        ‎ ‎

        ‎        <button android:id="@+id/Button02" ‎

                         ‎ style="?android:attr/buttonBarButtonStyle" ‎

                         ‎ android:layout_width="0dp" ‎

                         ‎ android:layout_height="wrap_content" ‎

                         ‎ android:layout_weight="1" ‎

                         ‎ android:text="Change" />‎

        ‎

    </linearlayout>‎

    ‎ ‎

    ‎    <edittext android:id="@+id/myView" ‎

                   ‎ android:layout_width="match_parent" ‎

                   ‎ android:layout_height="wrap_content" ‎

                   ‎ android:ems="10">

        ‎

        ‎ ‎

        ‎        <requestfocus />‎

        ‎

    </edittext>‎

    ‎ ‎

    ‎

</linearlayout>‎

تم چیست ؟

تم عبارتند از استایل یا سبکی که به کُلِ یک activity یا اپلیکیشن تخصیص می یابد و نه مشابه آنچه در مثال فوق مشاهده می کنید فقط به یک view. روش تعریف یک تم درست همانند شیوه ی تعریف یک سبک (style) می باشد.

مثال

‎<?xml version="1.0" encoding="utf-8" ?>

‎

‎<resources>

    ‎

    <style name="MyTheme" parent="android:Theme.Light">

        ‎ ‎ <item name="android:windowNoTitle" > true</item > ‎ ‎ <item name="android:windowBackground" > @color/translucent_red</item > ‎ ‎ <item name="android:listViewStyle" > @style/MyListView</item > ‎ ‎

    </style>‎

    ‎ ‎

    ‎

    <style name="MyListView" parent="@android:style/Widget.ListView">

        ‎ ‎ <item name="android:listSelector" > @drawable/ic_menu_home</item > ‎ ‎

    </style>‎

‎

</resources>‎

2. استفاده از تم های محیط اندروید

کی و چگونه می توان از طرح ریزی holo استفاده کرد؟

holo design پس از رابط برنامه سازی کاربردی 14 و پیش از API 21 برای برنامه نویس قابل استفاده می باشد. 

@android:style/Theme.Holo

@android:style/Theme.Holo.Light

@android:style/Theme.Holo.Light.DarkActionBar

کی و چگونه می توان از طرح ریزی material استفاده کرد؟

از رابط برنامه سازی کاربردی 21 به بعد، Material design طرح ریزی پیش فرض سیستم خواهد بود. 

@android:style/Theme.Material (dark version)

@android:style/Theme.Material.Light (light version)

@android:style/Theme.Material.Light.DarkActionBar

کتابخانه های پشتیبانی v7 مجموعه ای تم با سبک طرح ریزی material ویژه ی برخی ابزارک (widget) ها ارائه می دهد. با استفاده از این کتابخانه می توانید از طرح ریزی مزبور در ویرایش های پیشین بهره بگیرید.                      

سبک بندی جعبه رنگ (color palette)

از طرح ریزی material به بعد این امکان برای برنامه نویس فراهم شده که رنگ های پایه ی تم را بر اساس نیاز خود سفارش سازی و تنظیم کند. می توانید در تصویر زیر بسیاری از این رنگ ها را مشاهده کنید.

لیستینگ زیر مثالی از سبک بندی color palette را با رنگ های مختلف ارائه می دهد (تعریف شده در پوشه ی /res/values)

‎<resources>

        ‎

    <style name="AppTheme" parent="android:Theme.Material">

        ‎ ‎<item name="android:colorPrimary" > @color/primaryitem > ‎ ‎<item name="android:colorPrimaryDark" > @color/primary_darkitem > ‎ ‎<item name="android:colorAccent" > @color/accentitem > ‎ style > ‎ resources > ‎

همچنین می توان نوار وضعیت (status bar) را با استفاده از خصیصه ی android:statusBarColor سبک بندی کرد. به صورت پیش فرض، android:statusBarColor مقدار android:colorPrimaryDark را به ارث می برد.

 سبک بندی تک view ها و viewgroup ها

از نسخه ی 5.0 (رابط برنامه سازی کاربردی 21) برنامه نویس اجازه دارد android:theme را به یک view تخصیص دهد. با این کار برنامه نویس می تواند تِم این المان و همچنین عناصر فرزندش را تغییر دهد.

بهترین روش انتخاب تم ها

بهترین رویه این است که برنامه نویس سبک بندی پیش فرض خود محیط را به ارث برده، سپس آن را مطابق با نیاز خود تنظیم کند. به این نوع سبک بندی، استایل طبیعی (natural style) نیز گفته می شود زیرا که این سبک بندی برای کاربر بسیار مناسب و طبیعی جلوه می کند. کاربرهایی که به برنامه های ویرایش 2.x اندروید عادت دارند، در صورتی که شما برنامه ی کاربردی خود را در سبک بندی کاملاً متفاوت مانند holo عرضه کنید، به طورطبیعی راضی نخواهند بود.

برای اینکه برنامه نویس بتواند انتخاب کند که کدام تِم محیط / platform با ارث گرفته شود، کافی است از تعریف کننده ی منبع (resource-qualifier) برای این منظور بهره بگیرد.

از v14 به بعد استایل android:Theme.Holo.Light.DarkActionBar و از v11 به بعد android:Theme.Holo.Light و همچنین از android:Theme.Light برای ورژن های قدیمی تر کمک بگیرید.

نکته

البته شما می توانید در صورت تمایل از طرح ریزی material در نسخه های پیشین اندروید نیز استفاده کنید. شرکت گوگل در حال حاظر بیشتر برنامه های کاربردی خود را به این نوع طرح ریزی انتقال می دهد، از این رو ممکن است این نوع سبک بندی به زودی به natural style برای بیشتر کاربران تبدیل شود.

3. طرح ریزی واکنش گرا (responsive design)

ملاحظاتی که در طرح ریزی واکنشی باید در نظر داشته باشید

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

حاشیه گذاری (پیاده سازی margin points)

توصیه می شود از پهنای صفحه نمایش برای متن استفاده نکنید زیرا که در صورت بزرگتر بودن متن از پهنای موجود صفحه نمایش، این امر برای چشمان کاربر چندان مناسب نمی باشد (این مقیاس چیزی حدود w1000dp می باشد).

یکی از روش های حاشیه گذاری (پیاده سازی margin points) استفاده از فایل res/values/dimens.xml و تعریف ابعاد مناسب برای حاشیه ها در آن است. پس از انتخاب فایل بالا و تعریف ابعاد می توانید از resource qualifier ها برای همان فایل استفاده کرده و از این طریق حاشیه های متفاوت ویژه ی دستگاه های مختلف تعریف کنید.