آموزش لایه بندی UI در برنامه نویسی اندروید و چند مثال

Layout به معنی طرح و به عنوان لایه ای برای نمایش عناصر و View ها (شامل ویجت (Widget) ، فیلدهای متنی و …) به کار می رود. (برای مشاهده انواع Layout های اندروید، یک پروژه جدید ایجاد کنید .از آنجایی که Layout ، مربوط به بخش نمایشی اپلیکیشن مربوط می شود، در فولدر res به دنبال فولدر layout  می گردیم.)

بلوک پایه ای برای رابط کاربری (interface) ، شی View است که از کلاس View ایجاد شده است و منطقه مستطیلی را روی صفحه اشغال می کند و مسئول طراحی و مدیریت رویداد است.

ViewGroup یک زیر کلاس (کلاس فرعی) از View است و یک محفظه نامرئی را ایجاد می کند که سایر View ها یا ViewGroups ها را نگه می دارد و ویژگی های layout  آنها را تعریف می کند.

در سطح سوم ما layout  های مختلفی داریم که زیر کلاس های کلاس ViewGroup هستند و یک layout  نمونه، ساختار ظاهری و بصری یک واسط کاربری اندرویدی را تعریف می کند و می تواند یا در زمان اجرا با استفاده از اشیا View/ViewGroup ایجاد شود و یا شما می توانید layout  خود را با استفاده از فایل XML، main_layout.xml که در پوشه­ ی res/layout پروژه تان قرار دارد، مشخص کنید.

این مقاله آموزشی  بیشتر بر مبنای ایجاد واسط گرافیکی کاربری تان بر اساس layout  های تعریف شده در فایل XML است. یک صفحه بندی (layout) می تواند شامل هر نوع ویجتی مانند دکمه ها، برچسب ها (label)، کادر های متنی (textbox ها) و غیره باشد. بخش زیر یک مثال ساده از فایل XML ای است که دارای LinearLayout (صفحه بندی خطی) است.

<?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:id="@+id/text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="This is a TextView" />
      
   <Button android:id="@+id/button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="This is a Button" />
      
   <!-- More GUI components go here  -->
   
</LinearLayout>

پس از تعریف layout، همان طور که در پایین نشان داده شده است، می توانید منبع layout را پس از پیاده سازی ()Activity.onCreate  در اپلیکیشن خود بارگذاری کنید.

public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);
}

انواع layout در برنامه نویسی اندروید :

تعدادی Layout به وسیله­ ی خود اندروید ایجاد شده اند که شما تقریبا از آن ها در تمام اپلیکیشن های اندرویدی برای ایجاد view های مختلف استفاده می کنید.

 LinearLayout : یک گروه view است که view های فرزند را در یک جهت واحد (افقی یا عمودی) ردیف می کند.

 RelativeLayout : یک گروه view است که view های فرزند را در مکان های مربوطه نمایش می دهد.

 Layout :  TableLayout ای است که view های فرزند را در سطر ها و ستون ها گروه بندی می کند.

 AbsoluteLayout : شما را قادر می سازد که مکان دقیق فرزندان آن را تعیین کنید.

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

List View : یک گروه view است که لیستی از آیتم های قابل اسکرول کردن را نمایش می دهد.

Grid View : یک گروه view (ViewGroup) است که آیتم ها را در یک صفحه (grid) دو بعدی قابل اسکرول کردن نمایش می دهد.

اتریبیوت های layout : 

هر Layout دارای مجموعه ای از اتریبیوت هاست که خصوصیات ظاهری آن Layout را تعریف می کنند. تعدادی اتریبیوت های مشترک در بین تمام Layout ها وجود دارد و اتریبیوت های دیگری نیز وجود دارد که مختص هر layout است. در ادامه تعدادی از اتریبیوت های مشترکی که برای تمام Layout ها به کار می روند لیست شده اند.

android:id
شناسه ای است که به صورت منحصر به فرد view را مشخص می کند.

android:layout_width
عرض Layout را مشخص می کند.

android:layout_height
ارتفاع Layout را مشخص می کند.

android:layout_marginTop
نشان دهنده­ ی فضای اضافی در قسمت بالای Layout است.

android:layout_marginBottom
نشان دهنده­ ی فضای اضافی در قسمت پایین Layout است.

android:layout_marginLeft
نشان دهنده ­ی فضای اضافی در سمت چپ Layout است.

android:layout_marginRight
نشان دهنده­ ی فضای اضافی در سمت راست Layout است.

android:layout_gravity
نحوه قرارگیری view های فرزند را تعیین می کند.

android:layout_weight
تعیین میکند که چه مقدار فضای اضافی در Layout باید به view اختصاص داده شود.

android:layout_x
مختصاتِ x مربوط به Layout را مشخص می کند.

android:layout_y
مختصات y مربوط به Layout را مشخص می کند.

android:paddingLeft
مختصاتِ نشان دهنده ­ی حاشیه داخلی سمت چپ Layout است

android:paddingRight
مختصاتِ نشان دهنده­ ی حاشیه داخلی سمت راست Layout است

android:paddingTop
نشان دهنده­ ی حاشیه داخلی بالای Layout است.

android:paddingBottom
نشان دهنده­ ی حاشیه داخلی پایین Layout است.

در اینجا عرض و ارتفاع ، ابعاد layout/view هستند که می توانند بر حسب dp (پیکسل های مستقل از تراکم)، sp (پیکسل های مستقل از مقیاس)، pt (نقاطی که به اندازه 1/72 ام، از یک اینچ هستند)، px (پیکسل ها)، mm(میلیمتر) و نهایتا بر حسب (اینچ) بیان شوند.

شما می توانید عرض و ارتفاع را با اندازه گیری دقیق مشخص کنید، ولی اغلب از یکی از این ثوابت برای تنظیم عرض یا ارتفاع استفاده می شود.

• android:layout_width=wrap_content : به view شما می گوید که سایز خودش را با ابعاد مورد نیاز به وسیله­ ی محتوای آن تطبیق دهد.
• android:layout_width=fill_parent: به view شما می گوید که به بزرگی view والد خود شود.

ویژگی Gravity نقش مهمی را در تعیین مکان شی view بازی می کند و می تواند یک یا تعداد بیشتری از ثابت های زیر را (که به وسیله­ ی "|" از هم جدا می شوند) بگیرد.

ثابت Top : مقدار 0x30 : شی را بدون تغییر سایز به بالای محفظه [1] آن می برد.

ثابت bottom : مقدار 0x50 : شی را بدون تغییر سایز به پایین محفظه آن می برد.

ثابت left : مقدار 0x03 : شی را بدون تغییر سایز به سمت چپ محفظه آن می برد.

ثابت right : مقدار 0x05 : شی را بدون تغییر سایز به سمت راست محفظه آن می برد.

ثابت center_vertical : مقدار 0x10 : شی را در مرکز عمودی محفظه آن قرار می دهد.

ثابت fill_vertical : مقدار 0x70 : در صورت نیاز ، سایز عمودی شی را افزایش می دهد طوری که شی کاملا محفظه اش را پر کند.

ثابت center_horizontal : مقدار 0x01 : شی را بدون تغییر سایز در مرکز عمودی محفظه آن قرار می دهد.

ثابت fill_horizontal : مقدار 0x07 : در صورت نیاز ، سایز افقی شی را افزایش میدهد طوریکه شی کاملا محفظه اش را پر کند.

ثابت center : مقدار 0x11 : شی را بدون تغییر سایز در هر دو جهت محورهای عمودی و افقی در مرکز محفظه قرار می دهد.

ثابت fill : مقدار 0x77 : در صورت نیاز سایز افقی و عمودی شی را طوری افزایش می دهد که شی کاملا محفظه اش را بپوشاند.

ثابت clip_vertical : مقدار 0x80 : یک گزینه اضافی که می تواند برای داشتن لبه بالایی و / یا لبه پایینی شی فرزند که با توجه به مرز های محفظه برش می خورد، به کار برود. برش لبه ها بر مبنای مرکز ثقل عمودی خواهد بود. یک مرکز ثقل بالا لبه­ ی پایینی را قطع می کند. و یک مرکز ثقل پایین، لبه­ بالایی را قطع می کند و هیچ یک از این دو، هر دو لبه را با هم قطع نمی کنند.

ثابت clip_horizontal : مقدار 0x08 : یک گزینه اضافی که می تواند برای داشتن لبه بالایی و / یا لبه پایینی شی فرزند که با توجه به مرزهای محفظه برش می خورد، به کار برود. برش لبه ها بر مبنای مرکز ثقل افقی خواهد بود. یک مرکز ثقل سمت چپ لبه­ ی سمت راست را قطع می کند. و یک مرکز ثقل سمت راست، لبه ­ی سمت چپ را قطع می کند و هیچ یک از این دو، هر دو لبه را با هم قطع نمی کنند.

ثابت start : مقدار 0x00800003 : شی را بدون تغییر سایز به ابتدای محفظه آن می برد.

ثابت end : مقدار 0x00800005 : شی را بدون تغییر سایز به انتهای محفظه آن می برد.

در ادامه توصیف مختصری از علامت های @ و + ارائه شده است :

android:id="@+id/my_button"

نماد (at) @ در آغاز یک رشته نشان دهنده­ ی این است که تجزیه کننده ­ی XML باید باقی مانده­ ی رشته ID را بسط داده و تجزیه کند و آن را به عنوان یک شناسه­ ی منبع (ID) استفاده کند.

نماد جمع (+) به این معناست که این رشته یک نام منبع جدید است که باید ایجاد شده و به منابع ما اضافه شود. برای ایجاد نمونه ای از شی view و گرفتن آن layout از دستور زیر استفاده کنید.

Button myButton = (Button) findViewById(R.id.my_button);