menu

استایل ها (Styles) در اندروید

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


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

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

          
  <?xml version="1.0" encoding="utf-8"?>
  <resources>
    <style name="mytext">
        <item name="android:typeface">monospace</item>
        <item name="android:textSize">14sp</item>
        <item name="android:textColor">#000</item>
    </style>
  </resources>        
          

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

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

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

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

MainActivity.java

          
 package com.izarebin.styles;

 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.styles_layout);

    }
 }
          

styles_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">
        <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">
        <item name="android:typeface">monospace</item>
        <item name="android:textSize">18sp</item>
        <item name="android:textColor">#000</item>
    </style>
    
  </resources>        
          

شکل پروژه پس از اجرا به صورت زیر خواهد بود:

styles
برای تمرین و یادگیری بیشتر کار با Style های اندروید پیشنهاد می کنیم سایر خصوصیاتی را که قبلا یاد گرفته اید استفاده نمایید و تغییرات اعمال شده را مشاهده کنید.