آموزش طراحی UI اندروید

در این قسمت به مولفه های مختلف UI در صفحه ی اندروید نگاهی خواهیم کرد. این فصل نکاتی را در مورد طراحی بهتر UI پوشش می دهد و هچنین چگونگی طراحی یک UI را توضیح می دهد.

مولفه های صفحه ی UI

یک UI معمولی از یک برنامه ی اندروید شامل نوار فعالیت (action bar) و منطقه ی محتویات برنامه می شود.

1) نوار فعالیت اصلی

2) کنترل ویو

3) content area

4) نوار فعالیت split

درک مولفه های صفحه

واحد اصلی برنامه های اندروید فعالیت می باشد. UI در یک فایل xml تعریف می شود. طی گردآوری، هر عنصر در XML، در گروه Android GUI هم تراز با ویژگی های ارائه شده توسط روش ها، کامپایل می شود.

View و ViewGroup ها

یک اکتیویتی شامل ویوهای مختلف می شود. یک ویو در واقع یک ویجت است که روی صفحه ظاهر می شود که می تواند دکمه و یا هرچیز دیگری باشد. یک یا چند ویو می توانند با هم در یک GroupView قرار بگیرند. به عنوان مثال یک ViewGroup شامل لایه ها است.

انواع Layout ها

انواع مختلفی ازLayout وجود دارند که برخی از آنها در زیر ارائه شده اند.

LinearLayout
AbsoluteLayout
TableLayout
FrameLayout
RelateveLayout

LinearLayout

LinearLayout به دو گروه افقی و عمودی تقسیم می شود، بدین معنا که می تواند ویوها را در یک ردیف یا یک ستون منظم کند. در اینجا کد LinearLayout را می بینید که شامل یک text view می باشد.

<?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:layout_width=”fill_parent”
      android:layout_height=”wrap_content”
      android:text=”@string/hello” />
</LinearLayout>

AbsoluteLayout

AbsoluteLayout شما را قادر می سازد تا موقعیت دقیق زیر مجموعه های آن را مشخص کنید، که می تواند مانند این اعلام شود.

<AbsoluteLayout
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >
   
   <Button
      android:layout_width=”188dp”
      android:layout_height=”wrap_content”
      android:text=”Button”
      android:layout_x=”126px”
      android:layout_y=”361px” />
</AbsoluteLayout>

TableLayout

این نوع Layout ویوها را در ردیف ها و ستون هایی گروه بندی می کند و مانند زیر بیان می شود.

<TableLayout
   xmlns:android=”http://schemas.android.com/apk/res/android”
   android:layout_height=”fill_parent”
   android:layout_width=”fill_parent” >
   
   <TableRow>
      <TextView
      android:text=”User Name:”
      android:width =”120dp”
      />
      
      <EditText
      android:id=”@+id/txtUserName”
      android:width=”200dp” />
   </TableRow>
   
</TableLayout>

FrameLayout

این نوع Layout شما را قادر می کند تا مشخص کنید چگونه ویوهای زیرمجموعه به یکدیگر وابسته هستند. ترکیب آن نیز مانند زیر می باشد.

<?xml version=”1.0” encoding=”utf-8”?>
<FrameLayout
   android:layout_width=”wrap_content”
   android:layout_height=”wrap_content”
   android:layout_alignLeft=”@+id/lblComments”
   android:layout_below=”@+id/lblComments”
   android:layout_centerHorizontal=”true” >
   
   <ImageView
      android:src = “@drawable/droid”
      android:layout_width=”wrap_content”
      android:layout_height=”wrap_content” />
</FrameLayout>

RelateveLayout

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

<RelativeLayout
   android:id=”@+id/RLayout”
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >
</RelativeLayout>

علاوه بر این ویژگی ها، ویژگی های دیگری هم وجود دارند که بین همه ی ویو ها و گروه های ویو مشترک هستند. این ویژگی ها در جدول زیر ارائه شده اند.

layout_width

عرض یک ویو یا ViewGrou را مشخص می کند.
layout_height

طول یک ویو یا ViewGrou را مشخص می کند.
layout_marginTop

فضاهای اضافه را در قسمت بالای ویو یا ViewGroup مشخص می کند.
layout_marginBottom

فضاهای اضافه را در قسمت پایین ویو یا ViewGroup مشخص می کند.
layout_marginLeft

فضاهای اضافه را در قسمت چپ ویو یا ViewGroup مشخص می کند.
layout_marginRight

فضاهای اضافه را در قسمت راست ویو یا ViewGroup مشخص می کند.
layout_gravity

مشخص می کند که ویوهای زیرمجموعه چگونه قرار گرفته اند.
layout_weight

مشخص می کند که چه مقدار از فضای اضافه درLayout باید به ویو اختصاص داده شود.

واحدهای اندازه گیری

وقتی که شما در حال مشخص کردن اندازه ی یک مولفه روی Android UI هستید، باید واحدهای اندازه گیری زیر را به خاطر داشته باشید.

dp

تراکم پیکسل مستقل. یک dp معادل یک پیکسل در یک صفحه 160 dpi می باشد.
sp

مقیاس مستقل پیکسل. شبیه dp می باشد و برای مشخص کردن سایز فونت پیشنهاد می شود.
pt

point. یک پونت بر اساس سایز فیزیکی صفحه، 72/1 از یک اینچ تعریف شده است.
px
Pixel. Corresponds to actual pixels on the screen

پیکسل. با پیکسل های واقعی روی صفحه همخوانی دارد.