طراحی رابط کاربری در برنامه نویسی اندروید

4 سال پیش

امتیاز دهید post

طراحی رابط کاربری در برنامه نویسی اندروید

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، در مورد طراحی رابط کاربری در برنامه نویسی اندروید صحبت خواهیم کرد.

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

اجزای طراحی رابط کاربری در برنامه نویسی اندروید

رابط کاربری معمولی یک برنامه اندروید شامل اجزای زیر می باشد:

Main Action Bar
View Control
Content Area
Split Action Bar

این مولفه ها در تصویر زیر نیز نشان داده شده اند:

درک اجزای صفحه

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

View and ViewGroups

یک activity متشکل از View است. View فقط یک ابزارک است که در صفحه نمایش ظاهر می شود. می تواند دکمه یا چیزهای دیگری باشد یک یا چند View را می توان با هم در یک GroupView گروه بندی کرد. نمونه ViewGroup شامل طرح بندی است.

انواع طرح بندی

طرح بندی انواع مختلفی دارد. برخی از آنها در زیر ذکر شده است –

Linear Layout
Absolute Layout
Table Layout
Frame Layout
Relative Layout

Linear Layout

Linear Layout یا طرح خطی بیشتر به طرح افقی و عمودی تقسیم می شود. این بدان معناست که می تواند View ها را در یک ستون یا در یک ردیف واحد ترتیب دهد. در اینجا کد طرح خطی (عمودی) وجود دارد که شامل نمای متنی است.

&lt;?xml version=”1.0” encoding=”utf-8”?&gt;
&lt;LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   android:orientation=”vertical” &gt;
   
   &lt;TextView
      android:layout_width=”fill_parent”
      android:layout_height=”wrap_content”
      android:text=”@string/hello” /&gt;
&lt;/LinearLayout&gt;

<?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 به شما امکان می دهد مکان دقیق فرزندان آن را مشخص کنید.

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

<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

طرح بندی جدول TableLayout نماها را به سطرها و ستونها گروه بندی می کند.

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

<TableLayout

xmlns:android=”http://schemas.android.com/apk/res/android”

android:layout_height=”fill_parent”

android:layout_width=”fill_parent” >

<TextView

android:text=”User Name:”

android:width =”120dp”

<EditText

android:id=”@+id/txtUserName”

android:width=”200dp” />

</TableRow>

</TableLayout>

RelativeLayout

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

&lt;RelativeLayout
   android:id=”@+id/RLayout”
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” &gt;
&lt;/RelativeLayout&gt;

<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>

FrameLayout

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

&lt;?xml version=”1.0” encoding=”utf-8”?&gt;
&lt;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” &gt;
   
   &lt;ImageView
      android:src = “@drawable/droid”
      android:layout_width=”wrap_content”
      android:layout_height=”wrap_content” /&gt;
&lt;/FrameLayout&gt;

<?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 ها و ViewGroups مشترک است. آنها در زیر ذکر شده اند:

layout_width

عرض View یا ViewGroup را مشخص می کند

layout_height

ارتفاع View یا ViewGroup را مشخص می کند

layout_marginTop

فضای اضافی را در سمت بالای View یا ViewGroup مشخص می کند

layout_marginBottom

فضای اضافی را در قسمت پایین View یا ViewGroup مشخص می کند

layout_height

فضای اضافی را در سمت چپ View یا ViewGroup مشخص می کند

layout_marginRight

فضای اضافی را در سمت راست View یا ViewGroup مشخص می کند

layout_marginLeft

نحوه قرارگیری نماهای فرزند را مشخص می کند

layout_weight

مشخص می کند که چه مقدار از فضای اضافی در طرح باید به View اختصاص یابد

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

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

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

پیکسل مستقل از مقیاس همان dp است و برای تعیین اندازه قلم توصیه می شود

نقطه. یک نقطه بر اساس اندازه صفحه نمایش فیزیکی ، 1/72 اینچ تعریف شده است.

پیکسل مربوط به پیکسل های واقعی صفحه است

تراکم صفحه نمایش

تراکم کم (ldpi)

120 نقطه در اینچ

تراکم متوسط (mdpi)

160 نقطه در اینچ

تراکم بالا (hdpi)

240 نقطه در اینچ

تراکم فوق العاده بالا (xhdpi)

320 نقطه در اینچ

بهینه سازی طرح بندی ها

در اینجا برخی از دستورالعمل ها برای ایجاد طرح بندی کارآمد آورده شده است.

از تو در تو سازی های غیر ضروری خودداری کنید
از استفاده بیش از حد از Viewsها خودداری کنید
ازتو در تو سازی های عمیق خودداری کنید

منبع.

لیست جلسات قبل آموزش برنامه نویسی اندروید

امتیاز دهید post

نویسنده مطلب saber

طراحی رابط کاربری در برنامه نویسی اندروید

طراحی رابط کاربری در برنامه نویسی اندروید

اجزای طراحی رابط کاربری در برنامه نویسی اندروید

درک اجزای صفحه

View and ViewGroups

انواع طرح بندی

Linear Layout

AbsoluteLayout

TableLayout

RelativeLayout

FrameLayout

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

تراکم صفحه نمایش

بهینه سازی طرح بندی ها

لیست جلسات قبل آموزش برنامه نویسی اندروید

دیدگاه شما

بدون دیدگاه

طراحی رابط کاربری در برنامه نویسی اندروید

اجزای طراحی رابط کاربری در برنامه نویسی اندروید

درک اجزای صفحه

View and ViewGroups

انواع طرح بندی

Linear Layout

AbsoluteLayout

TableLayout

RelativeLayout

FrameLayout

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

تراکم صفحه نمایش

بهینه سازی طرح بندی ها

لیست جلسات قبل آموزش برنامه نویسی اندروید

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه