مشخصات مقاله
-
2396
-
0.0
-
11373
-
0
-
0
آموزش طراحی UI اندروید
دوره آموزش برنامه نویسی اندروید
کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده می باشد و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.
آموزش طراحی UI ، اندروید
در این فصل به مولفه های مختلف UI در صفحه ی اندروید نگاهی خواهیم کرد. این فصل نکاتی را در مورد طراحی بهتر UI پوشش می دهد و هچنین چگونگی طراحی یک UI را توضیح می دهد.
مولفه های صفحه ی UI
یک یوزر اینترفیس معمولی از یک برنامه ی اندروید شامل نوار فعالیت (action bar) و منطقه ی محتویات برنامه می شود.
1) نوار فعالیت اصلی
2) کنترل ویو
3) محدوده محتوا (content area)
4) نوار فعالیت split
این مولفه ها در تصویر زیر هم نشان داده شده اند.
درک مولفه های صفحه
واحد اصلی برنامه های اندروید فعالیت می باشد. UI در یک فایل xml تعریف می شود. طی گردآوری، هر عنصر در XML، در گروه Android GUI هم تراز با ویژگی های ارائه شده توسط روش ها، کامپایل می شود.
ویو و گروه های ویو
یک فعالیت شامل ویوهای مختلف می شود. یک ویو در واقع یک ویجت است که روی صفحه ظاهر می شود که می تواند دکمه و یا هرچیز دیگری باشد. یک یا چند ویو می توانند با هم در یک GroupView قرار بگیرند. به عنوان مثال یک گروه شامل لی اوت ها.
انواع لی اوت
انواع مختلفی از لی اوت وجود دارند که برخی از آنها در زیر ارائه شده اند.
1) لی اوت خطی
2) لی اوت کامل
3) لی اوت جدول
4) لی اوت چارچوب
5) لی اوت وابسته
لی اوت خطی
لی اوت خطی به دو گروه افقی و عمودی تقسیم می شود، بدبن معنا که می تواند ویوها را در یک ردیف یا یک ستون منظم کند. در اینجا کد لی اوت خطی را می بینید که شامل یک 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 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 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>
لی اوت وابسته
این نوع لی اوت شما را قادر می کند تا مشخص کنید چگونه ویوهای زیرمجموعه به یکدیگر وابسته هستند. ترکیب آن نیز مانند زیر می باشد.
<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>
لی اوت چارچوب
این لی اوت یک دارنده ی مکان روی صفحه می باشد که می توانید برای نمایش یک ویو از آن استفاده کنید. ترکیب آن نیز مانند زیر می باشد.
<?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>
علاوه بر این ویژگی ها، ویژگی های دیگری هم وجود دارند که بین همه ی ویو ها و گروه های ویو مشترک هستند. این ویژگی ها در جدول زیر ارائه شده اند.
|
ردیف |
View & description |
|
1 |
layout_width عرض یک ویو یا ViewGrou را مشخص می کند. |
|
2 |
layout_height طول یک ویو یا ViewGrou را مشخص می کند. |
|
3 |
layout_marginTop فضاهای اضافه را در قسمت بالای ویو یا ViewGroup مشخص می کند. |
|
4 |
layout_marginBottom فضاهای اضافه را در قسمت پایین ویو یا ViewGroup مشخص می کند. |
|
5 |
layout_marginLeft فضاهای اضافه را در قسمت چپ ویو یا ViewGroup مشخص می کند. |
|
6 |
layout_marginRight فضاهای اضافه را در قسمت راست ویو یا ViewGroup مشخص می کند. |
|
7 |
layout_gravity مشخص می کند که ویوهای زیرمجموعه چگونه قرار گرفته اند. |
|
8 |
layout_weight مشخص می کند که چه مقدار از فضای اضافه در لی اوت باید به ویو اختصاص داده شود. |
واحدهای اندازه گیری
وقتی که شما در حال مشخص کردن اندازه ی یک مولفه روی Android UI هستید، باید واحدهای اندازه گیری زیر را به خاطر داشته باشید.
|
ردیف |
Unit & description |
|
1 |
dp تراکم پیکسل مستقل. یک dp معادل یک پیکسل در یک صفحه 160 dpi می باشد. |
|
2 |
sp مقیاس مستقل پیکسل. شبیه dp می باشد و برای مشخص کردن سایز فونت پیشنهاد می شود. |
|
3 |
pt point. یک پونت بر اساس سایز فیزیکی صفحه، 72/1 از یک اینچ تعریف شده است. |
|
4 |
px پیکسل. با پیکسل های واقعی روی صفحه همخوانی دارد. |
تراکم های صفحه
|
ردیف |
Density & DPI |
|
1 |
تراکم پایین (ldpi) |
|
2 |
تراکم متوسط (mdpi) |
|
3 |
تراکم بالا (hdpi) |
|
4 |
تراکم فوق العاده بالا (xhdpi) |
بهینه کردن لی اوت ها
در اینجا خط مشی هایی برای ایجاد لی اوت های موثر ارائه شده است.
1) از تو در تو کردن غیرضروری اجتناب کنید.
2) از استفاده کردن از ویوهای زیاد اجتناب کنید.
3) از تو در تو کردن پیچیده اجتناب کنید.