آموزش طراحی و لایه بندی UI Layout ها در اندروید

برای طراحی رابط کاربری اندروید از Layoutها که فایل‌های Xml هستند استفاده می‌کنیم. هر Layout  می‌تواند چندین view را در خود جای دهد. تمام المان‌هایی که کاربر در صفحه‌ی موبایل خود می‌بیند از جنس view هستند مانند دکمه‌ها، متن‌ها، لیست‌ها و …

در زیر یک نمونه فایل layout آمده است:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/content"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="horizontal">
</LinearLayout>

ViewGroup ها زیر کلاس‌هایی از View هستند که قابل دیدن نیستن و امکان نگهداری از Viewها را فراهم میکنند.

در جاوا Activity و انواع کلاس‌های Layouts  یک ViewGroup هستند. ویجت‌ها می‌توانند به این ViewGroupها اد شوند و همچنین می‌توان اندازه و محل قرارگیری و رفتارهای دیگرشان را مدیریت کرد.

انواع Layoutها در اندروید

لایهتوضیحات
Linear Layoutیک ViewGroup هست که تمامی ویجت ها و لایه هایی که داخلش هستند رو به صورت عمودی و افقی تراز می کنه
Relative Layoutیک ViewGroup هست که تمامی ویجت ها و لایه هایی که داخلش هستند رو به صورت وابسته به هم نشون میده .
Table Layoutیک View هست که ویجت ها و لایه های داخل خودش رو به صورت سطری و ستونی نشون میده
Absolute Layoutاین لایه شما رو قادر می سازه که داخلش موقعیت دقیق هر ویجت یا لایه رو مشخص کنید
Frame Layoutیک حفره روی صفحه شما هست که می تونید از اون برای نمایش یک View استفاده کنید
List Viewیک ViewGroup هست که آیتم هایی که داخلش هستند رو با قابلیت اسکرول کردن (فقط عمودی) نشون میده
Grid Viewیک ViewGroup هست که آیتم هایی که داخلش هستند رو با قابلیت اسکرول کردن (عمودی و افقی) نشون میده
Constraint Layoutلایه‌ای قدرتمند که به کمک آن شما می‌توانید محدودیت‌های ویجت مد نظر خودتان را با وابسته کردن ویجت به ویجت‌های دیگر، در صفحه قرار دهید.

Linear Layout

همانطور که گفته شد در این لایه ویجت‌ها به صورت خطی (عمودی یا افقی) تراز می‌شوند.

orientation

خطی یا عمودی چیده شدن ویجت‌ها را می‌توانید با horizontal یا vertical قرار دادن orientation مشخص کنید. برای مثال:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/content"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="horizontal">
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="button1"/>
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="button2 hooray"/>
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="button3"/>

</LinearLayout>

در مثال بالا دکمه‌ها به صورت افقی قرار گرفته‌اند.

در زیر چیدمان عمودی را مشاهده می‌کنید:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/content"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="button1"/>
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="button2 hooray"/>
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="button3"/>

</LinearLayout>

gravity

به کمک اتریبیوت gravity می‌توان موقعیت مکانی ویجت‌هایی که درون LinearLayout قرار دارند را تعیین کرد. مقادیر top، bottom، left و Right را می‌توان به gravity داد.

با کمک layout_gravity می‌توان به یک ویجت خاص موقعیت مکانی متفاوتی را اختصاص داد.

weight

اگر می‌خواهید ویجت‌ها سایز غیر ثابتی داشته باشند و اندازه‌شان درصدی از طول یا عرض صفحه‌ی موبایل را بگیرد می‌توانید از weight کمک بگیرید. به طور مثال اگر بخواهیم ویجتی یک سوم از ارتفاع صفحه نمایش را بگیرد، مقدار height را صفر می‌دهیم و layout_weight = “1” قرار می‌دهیم.

Content

هر view یا ویجتی محدوده‌ای را به وسیله‌ی height و width به خودش اختصاص می ‌دهد که به آن content می‌گویند.

Padding

به کمک padding می‌توان به view از داخل فاصله‌ای اعمال کرد.

Border

خطی که روی اضلاع ویجت بیرون از محدوده‌ی پدینگ می‌توان کشید و به کمک آن محدوده‌ی ویجت را مشخص کرد.

Margin

فاصله‌ای که از بیرون به ویجت اعمال می‌شود و به کمک آن می‌توان ویجت را از المان‌های دیگر جدا کرد.

Size

اندازه‌ی ویجت را می‌توان با کمک height و width تعیین کرد:

  • Wrap_content : طول یا عرض ویجت به اندازه‌ی محتوای داخل آن کشیده می‌شود.
  • Match_parent : طول یا عرض ویجت به اندازه‌ی کل صفحه کشیده می‌شود.
  • طول یا عرض ویجت را می‌توان با مقدار عددی ثابت مشخص کرد. مثلا 64dp

Grid Layout

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

به عنوان پیش فرض تمام سطرها و ستون ها اندازه‌ی یکسانی دارند.

GridLayout با ۳ سطر و ۴ ستون

در واقع این view جایگزینی است برای TableLayout است. در TableLayout صرفا امکان مدیریت View ها (به عبارتی، سلول‌ها)ی موجود در یک سطر را داشتیم و می‌توانستیم چند سطر یا ردیف زیر یکدیگر ایجاد کنیم. اما در GridLayout مدیریت ستون‌ها نیز امکان‌پذیر است.

به عنوان مثال می‌توان ستون‌های دو سطر را با یکدیگر ادغام کرد. یک View مانند Button می‌تواند یک یا چند سلول را در جهت افقی یا عمودی اشغال کند. همچنین می‌توان یک سلول را از یک سطر به سطر دیگر (و از یک ستون به ستون دیگر) منتقل کرد. به عنوان مثال می‌توان مکان Cell 2  و Cell 5 را تغییر داد بطوری که هرکدام در جای دیگری قرار گیرد. این کار توسط دو خاصیت    layout_row ‌ و layout_column انجام می‌شود.

Nested Layout

در طراحی یک صفحه، بیشتر اوقات تعداد و نحوه‌ی قرارگیری ویجت‌ها به گونه‌ای است که امکان طراحی تنها به کمک یه layout امکان پذیر نمی‌باشد. در این شرایط می‌توان با کمک چند layout تو در تو طراحی را انجام داد.

در گام اول باید تعداد layout هایی که نیاز داریم را محاسبه کنیم و در گام بعدی تصمیم بگیریم کدام ویجت در کدام layout  قرار بگیرد.

به مثال زیر توجه کنید:

Relative Layout

 RelativeLayout این امکان رو برای شما فراهم می کند که مشخص کنید هر ویجت با کدام یک از ویجت‌های داخل صفحه در ارتباط باشد. موقعیت هر View می تواند از رابطه با والد خودش  (که RelativeLayout باشد) یا View های دیگری که حکم خواهر یا برادرش رو دارند شکل بگیره .

با استفاده از RelativeLayout می توانید دو المان را از مرز سمت راستشون تراز کنید، یا یک المان را زیر یک المان دیگه قرار دهید ، آن را به وسط صفحه منتقل کنید و… به صورت پیش فرض تمامی المان ها (ویجت ها) موقع انتقال به RelativeLayout  در سمت بالا-چپ صفحه طراحی قرار می گیرند . پس باید با استفاده از تنظیمات متنوع و مخصوصی که برای RelativeLayout تعریف شده موقعیت المان ها (ویجت ها) را مدیریت کنید.

Frame Layout

به طور کلی باید از FrameLayout برای نشان دادن یک شی استفاده کرد؛ زیرا هنگام استفاده از FrameLayout سازماند هی کردن viewها در صفحه نمایش هایی با اندازه های مختلف کار بسیار مشکلی است.

هر چند می توانید چندین View را به FrameLayout اضافه کنید و موقعیت هر کدام از آن ها را با استفاده کردن از android:layout_gravity تعیین کنید.

Constraint Layout

در Constraint Layout شما می توانید محدودیت های ویجت مد نظر را به راحتی با وابسته کردن به دیگر ایتم های موجود در صفحه قرار بدهید.. محدویت ها در ایتم ها در چهار جهت هر ایتم مشخص شده است.

قرار دادن چندین ویجت در یک زنجیر، این امکان را به شما می دهد تا بتوانید جای گیری ویجت‌ها را تنطیم کنید و مشخص کنید که به طور گروهی چه فضایی را اشغال کنند.

برای خصوصیت زنجیر، سه مقدار وجود دارد:

  • spread: آیتم‌ها را با فضا های مساوی، در زنجیر تقسیم می کند.
  •  spread_inside: آخرین و اولین ویجت را به لبه ها می چسباند و فضای باقی مانده را به طور مساوی بین بقیه عناصر تقسیم می کند.
  • packed: ویجت‌ها را در مرکز زنجیر جمع می کند.

Was this article helpful?
Dislike 0
قبلی: آشنایی با مفهوم اینتنت (Intent) در اندروید
بعدی: آموزش کار با ListView در اندروید