menu

لایه های گرافیکی در اندروید

با لایه های گرافیکی (Layout) و ویژگی های آن ها بیشتر آشنا شوید


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

"ViewGroup" یک زیر کلاس از “View” می باشد که یک شی نامرئی است و دیگر ویوها را شامل می شود و خواص طراحی لایه ها را فراهم می کند.

در سطح سوم دارای لایه های مختلفی است که برگرفته شده از کلاس "ViewGroup" هستند. این لایه ها دارای یک ساختار ساده و معمولی هستند که زمان اجرای برنامه بارگذاری شده و به کاربر نمایش داده می شوند. لایه ها فایل هایی با پسوند “XML” هستند که درون پوشه “res/layout” قرار دارند.

ساده ترین لایه برای رابط کاربری “Linearlayout” می باشد که می تواند دارای دکمه، متن و ... باشد. به مثال زیر توجه نمایید:

          
  <?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/txt"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Matne Delkhah" />
      
   <Button android:id="@+id/btn"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="OK" />
      
   <!-- Sayer Anasore Graphici  -->
   
  </LinearLayout>
          

پس از ایجاد و طراحی یک لایه، برای بارگذاری آن در برنامه باید در متد OnCreate() لایه را بارگذاری نماییم. برای بارگذاری یک لایه به صورت زیر عمل می کنیم:

          
  public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);
  }         
          

انواع لایه های گرافیکی در اندروید

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

لایه توضیح
LinearLayout “LinearLayout” یک لایه گرافیکی هم راستا زیر شاخه ها و فرزندان خود در جهت واحد، عمودی یا افقی است.
RelativeLayout “RelativeLayout” یک لایه گرافیکی است که عناصر می توانند در موقعیت های مختلف در کنارهم یا روی هم قرار گیرند.
TableLayout “TableLayout” یک لایه گرافیکی است که از سطر و ستون همانند جداول تشکیل شده است.
FrameLayout “FrameLayout” یک لایه گرافیکی است که به وسیله آن یک فریم برروی صفحه نمایش ایجاد شده که می تواند به عنوان نمونه یک عنصر تنها درون آن قرار گیرد.

ویژگی ها و صفات لایه ها

هر لایه دارای ویژگی ها و خصوصیاتی می باشد که بسیاری از این خصوصیات در لایه ها مشترک است که در زیر در مورد هریک توضیح داده شده است:

ویژگی توضیح
android:id یک شناسه که به صورت یکتا می باشد.
android:layout_width میزان عرض لایه را مشخص می کند.
android:layout_height میزان ارتفاع لایه را مشخص می کند.
android:layout_marginTop میزان فاصله اضافی از سمت بالا لایه
android:layout_marginBottom میزان فاصله اضافی از سمت پایین لایه
android:layout_marginLeft میزان فاصله اضافی از سمت چپ لایه
android:layout_marginRight میزان فاصله اضافی از سمت راست لایه
android:layout_gravity نحوه قرارگیری و جایگاه عناصر درون لایه با استفاده از آن مشخص می شود.
android:layout_weight میزان وزن لایه
android:paddingLeft میزان پد از سمت چپ لایه
android:paddingRight میزان پد از سمت راست لایه
android:paddingTop میزان پد از سمت بالای لایه
android:paddingBottom میزان پد از پایین لایه

شناسه برای عناصر گرافیکی

هر عنصر گرافیکی باید دارای یک شناسه یکتا باشد. یک شناسه در فایل "XML" به صورت زیر تعریف می شود:

          
 android:id="@+id/txt_title"          
          

برای استفاده از آن در برنامه و دسترسی به آن باید به اشاره گر جاوا آن را معرفی نماییم که برای این کار به صورت زیر عمل می کنیم:

          
 TextView txttitle = (TextView) findViewById(R.id.txt_title);         
          

اکنون می توانیم از طریق نام دلخواه "txttitle" به آن دسترسی داشته و از متدها و توابع مورد نظر برای یک "TextView" استفاده نماییم. به مثال زیر توجه نمایید:

          
   // معرفی عنصر گرافیکی موردنظر به اشاره گر جاوا       
 TextView txttitle = (TextView) findViewById(R.id.txt_title);
  // تغییر متن از طریق کد  
  txttitle.setText("Hello World");
  // تغییر رنگ متن از طریق کد
  txttitle.setTextColor(Color.RED);