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

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

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

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

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

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

• 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 ها را در یک ستون یا در یک ردیف واحد ترتیب دهد. در اینجا کد طرح خطی (عمودی) وجود دارد که شامل نمای متنی است.

<?xml version=”۱٫۰” 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=”۱۸۸dp”
      android:layout_height=”wrap_content”
      android:text=”Button”
      android:layout_x=”۱۲۶px”
      android:layout_y=”۳۶۱px” />
</AbsoluteLayout>

TableLayout

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

<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 =”۱۲۰dp”
         />
      
      <EditText
         android:id=”@+id/txtUserName”
         android:width=”۲۰۰dp” />
   </TableRow>
   
</TableLayout>

RelativeLayout

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

<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 یک حافظه نگهدارنده روی صفحه است که می توانید از آن برای نمایش یک نمای واحد استفاده کنید.

<?xml version=”۱٫۰” 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 هستید ، باید واحدهای اندازه گیری زیر را به خاطر بسپارید.

• dp

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

• sp

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

• pt

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

• px

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

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

• تراکم کم (ldpi)

۱۲۰ نقطه در اینچ

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

۱۶۰ نقطه در اینچ

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

۲۴۰ نقطه در اینچ

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

۳۲۰ نقطه در اینچ

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

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

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

منبع.

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

1. 1. نگاهی کلی به برنامه نویسی اندروید
   2. تنظیمات محیط  در برنامه نویسی اندروید
   3. معماری برنامه نویسی اندروید
   4. اجزای برنامه در برنامه نویسی اندروید
   5. Hello World در برنامه نویسی اندروید
   6. سازماندهی و دسترسی به منابع در برنامه نویسی اندروید
   7. فعالیت در برنامه نویسی اندروید
   8. سرویس در برنامه نویسی اندروید
   9. گیرنده های پخش در برنامه نویسی اندروید
   10. ارائه دهنده محتوا در برنامه نویسی اندروید
   11. قطعات در برنامه نویسی اندروید
   12. Intent و فیلتر در برنامه نویسی اندروید
   13. طرح بندی رابط کاربری در برنامه نویسی اندروید
   14. کنترل های رابط کاربری در برنامه نویسی اندروید
   15. مدیریت رویدادها در برنامه نویسی اندروید
   16. استایل و تم ها در برنامه نویسی اندروید
   17. اجزای سفارشی در برنامه نویسی اندروید
   18. کشیدن و رها کردن در برنامه نویسی اندروید
   19. نوتیفیکیشن ها در برنامه نویسی اندروید
   20. سرویس های مبتنی بر مکان در برنامه نویسی اندروید
   21. ارسال ایمیل در برنامه نویسی اندروید
   22. ارسال پیامک در برنامه نویسی اندروید
   23. تماس های تلفنی در برنامه نویسی اندروید
   24. انتشار برنامه اندروید
   25. آموزش Alert Dialog در برنامه نویسی اندروید
   26. انیمیشن در برنامه نویسی اندروید
   27. ضبط صدا در برنامه نویسی اندروید
   28. مدیریت صدا در برنامه نویسی اندروید
   29. آموزش Auto Complete در برنامه نویسی اندروید
   30. بهترین شیوه ها در برنامه نویسی اندروید
   31. بلوتوث در برنامه نویسی اندروید
   32. استفاده از دوربین در برنامه نویسی اندروید
   33. کلیپ بورد در برنامه نویسی اندروید
   34. فونت سفارشی در برنامه نویسی اندروید
   35. پشتیبان گیری از داده ها در برنامه نویسی اندروید
   36.  ابزارهای توسعه دهنده در برنامه نویسی اندروید
   37. آموزش شبیه ساز در برنامه نویسی اندروید
   38. اتصال به فیس بوک در برنامه نویسی اندروید
   39. حرکات لمسی در برنامه نویسی اندروید
   40. آموزش گوگل مپ در برنامه نویسی اندروید
   41. افکت های تصویر در برنامه نویسی اندروید
   42. Image Switcher در برنامه نویسی اندروید
   43. حافظه داخلی در برنامه نویسی اندروید
   44. آموزش کار با JetPlayer در برنامه نویسی اندروید
   45. JSON Parser در برنامه نویسی اندروید
   46. ارتباط با LinkedIn در برنامه نویسی اندروید
   47. نوار پیشرفت Spinner در برنامه نویسی اندروید
   48. بومی سازی در برنامه نویسی اندروید
   49. صفحه Login در برنامه نویسی اندروید
   50. MediaPlayer در برنامه نویسی اندروید
   51. Multitouch در برنامه نویسی اندروید
   52. Navigation در برنامه نویسی اندروید
   53. اتصال به اینترنت در برنامه نویسی اندروید
   54. NFC در برنامه نویسی اندروید
   55. PHP و MYSQL در برنامه نویسی اندروید
   56. Progress Circle دربرنامه نویسی اندروید
   57. Progress Bar در برنامه نویسی اندروید
   58. Push Notification در برنامه نویسی اندروید
   59. RenderScript در برنامه نویسی اندروید
   60. RSS Reader در برنامه نویسی اندروید
   61. Screen cast در برنامه نویسی اندروید
   62. SDK Manager در برنامه نویسی اندروید
   63. سنسورها در برنامه نویسی اندروید
   64. Session در برنامه نویسی اندروید
   65. Shared Preferences در برنامه نویسی اندروید
   66. پروتکل SIP در برنامه نویسی اندروید
   67. Spelling Checker در برنامه نویسی اندروید
   68. پایگاه داده SQLite در برنامه نویسی اندروید
   69. Support Library در برنامه نویسی اندروید
   70. تست برنامه های اندروید
   71. قابلیت متن به گفتار در برنامه نویسی اندروید
   72. TextureView در برنامه نویسی اندروید
   73. اتصال به توییتر در برنامه نویسی اندروید