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

style ها فرمت و ظاهر رابط کاربری را تعریف می کنند.

یک style را می توان به یک view خاص (از یک فایل layout ) ، یا به کل اکتیویتی یا اپلیکیشن (از داخل فایل مانیفست) اعمال کرد.

یک style در یک منبع XML تعریف می شود که جدا از فایل xml ایست که layout را مشخص می کند.
این فایل XML در دایرکتوری res/values/ از پروژه شما قرار دارد و دارای تگ <resources> به عنوان نود (گره) ریشه است که وجود آن برای فایل style الزامی است. نام این فایل XML اختیاری است ولی باید دارای پسوند xml. باشد.

شما می توانید با استفاده از تگ <style>  چندین style را تعریف کنید، اما لازم است به منظور شناسایی style ها برای هر کدام یک نام منحصر بفرد تعیین کنیم. در اندروید ویژگی های هر style با استفاده از تگ <item>  مانند آنچه در زیر آورده شده است تعریف می شود:

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <style name="CustomFontStyle">
      <item name="android:layout_width">fill_parent</item>
      <item name="android:layout_height">wrap_content</item>
      <item name="android:capitalize">characters</item>
      <item name="android:typeface">monospace</item>
      <item name="android:textSize">12pt</item>
      <item name="android:textColor">#00FF00</item>/> 
   </style>
</resources>

توجه : مقدار تگ <‎ <item می تواند یک رشته کلیدی (keyword string) ، یک رنگ ( hex color) ، یک ارجاع به نوعی منبع دیگر و یا مقدار دیگری بسته به ویژگی Style باشد.

استفاده از Style ها :

بعد از تعریف Style ، می توانید مانند بخش زیر با استفاده از ویژگی style، آن را در فایل XML Layout خود به کار ببرید:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical" >

   <TextView
      android:id="@+id/text_id"
      style="@style/CustomFontStyle"
      android:text="@string/hello_world" />

</LinearLayout>

ارث بری style ها (Style Inheritance) :

اندروید از ارث بری Style ، به طریقی بسیار مشابه با CSS در طراحی وب ، پشتیبانی می کند. شما می توانید از این قابلیت برای ارث بری ویژگی ها از یک Style موجود ، استفاده کنید و پس از آن ، فقط ویژگی هایی را تعریف کنید که شما می خواهید آنها را تغییر داده یا اضافه کنید.

برای پیاده سازی یک تم اختصاصی ، MyAndroidApp/res/values/themes.xml را ویرایش یا ایجاد کنید و اعمال زیر را انجام دهید :

<resources>
   ...
   <style name="MyCustomTheme" parent="android:style/Theme">
   <item name="android:textColorPrimary">#ffff0000</item>
   </style>
   ...
</resources>

در AndroidManifest.xml تم (theme ) را بر اکتیویتی ای که میخواهید Style دهید ، اعمال کنید :

<activity
   android:name="com.myapp.MyActivity"
   ...
   android:theme="@style/MyCustomTheme"
   />

به وسیله ی قطعه کد بالا ، تم (theme ) جدید شما ، بر اکتیویتی مورد نظر اعمال خواهد شد و در امولاتور شاهد تغییر رنگ متن به رنگ قرمز خواهید بود .

اعمال رنگ ها بر اتربیوت های تم (theme) :

بعد از اضافه کردن تگ <item>  به تم ، می توانید از رنگ ها برای برخی از اتریبیوت های تم ، مانند پس زمینه و رنگ متن اصلی استفاده کنید. این ویژگی ها در فایل styles.xml تعریف شده است. برای مثال، برای اعمال رنگ سفارشی (custom color) به پس زمینه ، دو عنصر <item> زیر را به تم سفارشی (custom theme) خود اضافه کنید، فایل MyAndroidApp/res/values/styles.xml تعریف کنید :

<resources>
   ...
   <style name="MyCustomTheme" ...>
      <item name="android:windowBackground">@color/my_custom_color</item>
      <item name="android:colorBackgroundCacheHint">@color/my_custom_color</item>
   </style>
   ...
</resources>

استفاده از دکمه های Nine-Patch در طراحی:

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

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

• تصویر بیت مپ را در مسیر /res/drawable/my_nine_patch.9.png ذخیره کنید

• یک سبک جدید تعریف کنید.
• سبک جدید را برای دکمه ها تعیین کنید.

تعریف یک استایل جدید :

<resources>
   ...
      <style name="MyCustomButton" parent="android:Widget.Button">
      <item name="android:background">@drawable/my_nine_patch</item>
      </style>
   ...
</resources>

اعمال تم :

<resources>
   ...
      <style name="MyCustomTheme" parent=...>
         ...
         <item name="android:buttonStyle">@style/MyCustomButton</item>
      </style>
   ...
</resources>

تم های اندروید :

با امید اینکه شما درک درستی از موضوع استایل پیدا کرده باشید، در این گام به توضیح تم خواهیم پرداخت. یک تم چیزی غیر از یک استایل اندرویدی اعمال شده به کل اکتیویتی و یا اپلیکیشن نیست ؛ در واقع استایل بجای اجرا روی یک Viwe خاص ، به کل اکتیویتی و یا اپلیکیشن اعمال می شود.

برای مثال شما می توانید یک استایل CustomFontStyle را به عنوان یک تم برای یک اکتیویتی اعمال کرده و تمام متن های داخل آن اکتیویتی یک فونت سبز monospace داشته باشند.

برای تنظیم یک تم برای همه اکتیویتی های اپلیکیشن خود فایل AndroidManifest.xml را ویرایش کرده و یک تگ <application> با صفت android:theme که همنام استایل باشد به آن بدهید.

<application android:theme="@style/CustomFontStyle">

اما اگر بخواهیم تم فقط روی یک اکتیویتی اعمال شود، باید مانند زیر ویژگی android:theme را تنها به تگ <activity>  مورد نظر اضافه کنیم.

<activity android:theme="@style/CustomFontStyle">

تعدادی تم پیش فرض نیز توسط اندروید تعریف شده است که شما می توانید به طور مستقیم یا با ارث بریِ ویژگی های والد مانند زیر، از آن ها استفاده کنید :

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

رنگ بندی در قالب اصلی

دیزاین layout ها را می توان با رنگ ها انجام داد.

طرح بالا بر اساس فایل style.xml در res/values/ طراحی شده.

<resource>
   <style name="AppTheme" parent="android:Theme.Material">	
      <item name ="android:color/primary">@color/primary</item>
      <item name ="android:color/primaryDark">@color/primary_dark</item>
      <item name ="android:colorAccent/primary">@color/accent</item>
   </style>
<resource>

استایل ها و تم های پیش فرض :

پلت فرم اندروید یک مجموعه بزرگ از استایل ها و تم ها را فراهم می کند که می توانید در برنامه های خود استفاده کنید. همچنین یک مرجع از تمام استایل های موجود در کلاس R.style وجود دارد.  به عنوان مثال می توانیم استایل Theme_NoTitleBar را با استفاده از قطعه کد ” @android:style/Theme.NoTitleBar ” برای تم برنامه تعیین کنیم. همچنین می توانید در لینک های زیر استایل ها و تم های اندروید را ببینید:

• Android Styles (styles.xml)

• (Android Themes (themes.xml