menu

تم ها (Themes) در اندروید

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


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

فایل استایل با پسوند "XML" درون پوشه "res/values" قرار می گیرد و همانطور که گفته شد تم ها جز منابع گرافیکی به حساب می آیند در نتیجه تم ها نیز همانند استایل ها با تگ "<resources>" آغاز شده و پس از تعریف استایل ها و تم های موردنظر با همین تگ بسته خواهد شد. توجه داشته باشید می توانیم به استایل ها یک تم اختصاص دهیم و همانند استایل عمل کنیم. برای تعریف هر استایل نیز با تگ "<style>" شروع و با همین تگ بسته می شود. در اینجا باید تم موردنظر خود را نیز مشخص نماییم که پس از نوشتن نام استایل مورد نظر با استفاده از “parent” تم موردنظر را برای آن استایل مشخص می کنیم. درون تگ استایل نیز آیتم های موردنیاز برای استایل را تعریف می نماییم که با تگ "<item>" مشخص می شوند. برای فهم بهتر مطالب گفته شده به مثال زیر توجه فرمایید:

          
  <?xml version="1.0" encoding="utf-8"?>
  <resources>
     // استفاده از یکی از تم های پیش فرض اندروید
    <style name="mytext" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="android:typeface">monospace</item>
        <item name="android:textSize">14sp</item>
        <item name="android:textColor">#000</item>
    </style>
  </resources>        
          

آموزش استفاده از Theme ها

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

مراحل انجام کار

  • 1 - ابتدا مطابق با آموزش ساخت اولین پروژه اندرویدی یک پروژه جدید بسازید و و یک نام دلخواه برای آن قرار دهید.
  • 2 - فایل MainActivity.java را باز کرده و کدهای جدید نوشته شده موجود در آموزش را در آن اضافه نمایید.
  • 3 - کدهای مربوط به لایه طراحی شده در آموزش را جایگزین کدهای لایه پروژه خود کنید.
  • 3 - پروژه را اجرا نموده و برروی شبیه ساز آن را تست کنید.

MainActivity.java

          
 package com.izarebin.themes;

 import android.os.Bundle;
 import android.support.v7.app.AppCompatActivity;

 public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.themes_layout);

    }
 }
          

themes_layout.xml

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

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="100dp"
        android:gravity="center"
        android:id="@+id/txt1"
        // استفاده از استایل نوشته شده برای متن ها
        style="@style/mytext"
        android:text="Text 1" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="80dp"
        android:text="Button 1"
        android:id="@+id/btn1"
        // استفاده از استایل نوشته شده برای دکمه ها
        style="@style/mybutton"
        android:layout_marginTop="20dp" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="100dp"
        android:id="@+id/txt2"
        android:layout_marginTop="20dp"
        android:gravity="center"
        style="@style/mytext"
        android:text="Text2" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="80dp"
        android:text="Button 2"
        android:id="@+id/btn2"
        style="@style/mybutton"
        android:layout_marginTop="20dp" />

  </LinearLayout>
   
          

styles.xml

اکنون در فایل "styles.xml" پروژه خود که درون پوشه "res/values" قرار دارد استایل های اختصاصی برای متن ها و دکمه های خود می نویسیم و تم های هرکدام را نیز مشخص می کنیم:

          
  <?xml version="1.0" encoding="utf-8"?>
  <resources>
    <style name="mytext" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="android:typeface">monospace</item>
        <item name="android:textSize">20sp</item>
        <item name="android:textColor">#000</item>
        <item name="android:background">#e7e7e7</item>
    </style>
    
    <style name="mybutton" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="android:typeface">monospace</item>
        <item name="android:textSize">18sp</item>
        <item name="android:textColor">#000</item>
    </style>
    
  </resources>        
          

روش دوم : استفاده از فایل themes.xml

در صورتی که پروژه ما دارای تم های متفاوت و بسیاری باشد می توانیم تم ها را درون فایل "themes.xml" تعریف نماییم. برای استفاده از آن ها نیز باید در منیفست پروژه برای برنامه یا اکتیویتی موردنظر تعریف کنیم. برای نوشتن یک تم همانند استایل عمل می کنیم با این تفاوت که تم آن را نیز مشخص می کنیم:

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

برای انتخاب تم نوشته شده برای کل برنامه در فایل "androidmanifest.xml" به صورت زیر عمل می کنیم:

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

برای انتخاب تم نوشته شده برای یک اکتیویتی در فایل "androidmanifest.xml" به صورت زیر عمل می کنیم:

          
  <activity android:theme="@style/CustomTheme">
          
برای تمرین و یادگیری بیشتر کار با Theme های اندروید پیشنهاد می کنیم سایر خصوصیاتی را که قبلا یاد گرفته اید استفاده نمایید و تغییرات اعمال شده را مشاهده کنید.