برای طراحی رابط کاربری اندروید از 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 در آن به معنای طراحی شبکهای و سلولی است. مانند یک جدول که از تعدادی سطر و ستون تشکیل شده.
به عنوان پیش فرض تمام سطرها و ستون ها اندازهی یکسانی دارند.
در واقع این 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: ویجتها را در مرکز زنجیر جمع می کند.