آموزش برنامه نویسی اندروید ( قسمت دوم ظاهر و ساختار رابط کاربری)

android2

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

  • Linear Layout
  • Relative Layout
  • Table Layout
  • Grid View
  • Tab Layout
  • List View

اندروی به دلیل ساختار منحصر بفردش به شما اجازه می دهد تا بتواند رابط کاربری اپلیکیشن مورد نظرتان را با استفاده از فایل های ساده‌ی XML بسازید. همچنین امکان ساخت رابط کاربری از طریق کد جاوا و به صورت مستقیم نیز وجود دارد.

همانطور که در تصویر زیر میبینید تمامی فایل های مربوط به شکل ظاهری اپلیکیشن اندروید در پوشه‌ی

new7

قرار می گیرند.

new8

در ادامه می خواییم تک تک ساختار های مربوط به نما و ظاهر اندروید را که در بالا به آنها اشاره کردیم مورد بررسی قرار دهیم.

Linear Layout

این ساختار همانطور که از نامش پیداس، المان های مختلف رابط کاربری در آن، به صورت پشت سر هم قرار میگیرند. linear layout دو حالت مختلف را برای قرار گرفتن اجزای ظاهر اپلیکیشن در نظر می گیرد. یکی حالت افقی و دیگری حالت عمومی. در حالت افقی، هر المانی را که بخواهید در صفحه قرار دهید در کنار المان قبلی قرار می گیرد. اما در حالت عمومی هر المان در زیر دیگری قرار می گیرد. افقی یا عمومی بودن linear layout را می توان با استفاده از خاصیت android:orientation در دو حالت Horizontally  یا Vertically  قرار داد.

مثال برای حالت افقی:

۱
<LinearLayout android:orientation="vertical"> .... </LinearLayout>

مثال برای حالت عمودی:

۱
<LinearLayout android:orientation="horizontal"> .... </LinearLayout>

 

new9

 

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

۱- از منوی File گزینه New و سپس Android Project را انتخاب کنید.

۲- در Package Explorer بر روی res/layout راست کلیک کرده و سپس یک فایل جدید از نوع XML بسازید و نام آن را به دلخواه خود وارد کنید. ما در اینجا نام فایلمان را linear_layout.xml تعیین کرده ایم.

۳- حالا فایل XML جدیدی که ساخته اید را باز کرده و در آن کد زیر را قرار دهید.

 

new10

 

برای تنظیم استفاده از نمایه تازه ساخته شده در اپلیکیشن خود، ابتدا فایل MainActivity.java را باز کنید. شما خطوط مختلفی از کدهای از پیش تعیین شده را در آن مشاهده خواهید کرد. فعلا اگر برای شما این کدها نامفهوم است کاری به آنها نداشته باشید زیرا بعدا مفصل در مورد این کدها بحث می کنیم. در کد این فایل پس از عبارت onCreate یک تابع با نام setContentView(R.layout.main) وجود دارد. این تابع را به R.layout.main to R.layout.yourlinearviewname تغییر دهید. دقت کنید yourlinearviewname در واقع نام فایل XML ساخته شده در مراحل قبل است. در اینجا برای فایل ما اینگونه می شود R.layout.linear_layout

 

new11

 

حالا برای اجرای پروژه خود بر روی نام آن کلیک کرده و ابتدا Run As و سپس Android Application را انتخاب کنید. در این لحظه شما باید پس از مدت کوتاهی، Linear layout ود را در شبیه ساز مشاهده کنید.

 

674754

 

 

2 دیدگاه

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *