Layout Editor: چیست، Android Studio و ایجاد layoutها
Layout Editor — ویرایشگر بصری XML layoutها در Android Studio است که امکان ایجاد رابطهای کاربری برنامههای Android را بدون نوشتن دستی کد فراهم میکند. بررسی میکنیم که چیست، چگونه با ConstraintLayout و LinearLayout کار کنیم، از پالت کامپوننتها استفاده کنیم و ویژگیها را از طریق Properties Panel تنظیم کنیم.
نکات اصلی
- Layout Editor — رابط بصری برای ایجاد XML layoutهای Android در Android Studio با قابلیت کشیدن و رها کردن و پیشنمایش بلادرنگ
- ConstraintLayout — layout پایهای که سلسلهمراتب تخت با اتصالات (constraints) انعطافپذیر بین عناصر ایجاد میکند
- LinearLayout — محفظهای برای چیدمان خطی ویجتها به صورت افقی یا عمودی با توزیع وزنی
- Blueprint و Design — دو حالت نمایش: نمودار با محدودیتها و پیشنمایش بصری layout
- Properties Panel — پنل تنظیم تمام ویژگیهای کامپوننت انتخاب شده بدون جابجایی به XML
Layout Editor چیست؟
Layout Editor — ابزاری است که در Android Studio تعبیه شده و برای طراحی بصری رابطهای کاربری برنامههای Android استفاده میشود. با دوبار کلیک روی فایل XML layout در پوشه res/layout/ باز میشود و از طریق پنل پایینی برای جابجایی بین برگههای Code، Design و Split قابل دسترسی است. توسعهدهنده میتواند کامپوننتها را از پالت به بوم بکشد، ویژگیهای آنها را تنظیم کند و تغییرات را در زمان واقعی مشاهده کند.
این ابزار از دو حالت نمایش پشتیبانی میکند: Design (بوم بصری با نمایش واقعی ویجتها) و Blueprint (نمایش شماتیک با محدودیتها و مرزها). حالت Split همزمان کد XML و بوم بصری را نشان میدهد. جابجایی بین آنها با دکمههای گوشه بالا سمت چپ ویرایشگر انجام میشود.
Layout Editor به طور خودکار به ازای هر اقدام کاربر کد XML تولید میکند: افزودن عنصر، تنظیم حاشیهها، ایجاد محدودیت. این به توسعهدهنده امکان میدهد دهها ویژگی XML را به خاطر نسپارد و روی نتیجه بصری تمرکز کند. کد تولید شده همیشه در برگه Code قابل ویرایش دستی است.
| حالت | توضیحات | کلید میانبر |
|---|---|---|
| Design | بوم بصری با کامپوننتهای واقعی | Shift + D |
| Blueprint | نمودار با محدودیتها و مرزها | Shift + B |
| Split | کد XML و بوم همزمان | Shift + S |
نواحی اصلی Layout Editor
رابط Layout Editor به چهار ناحیه تقسیم میشود: Palette (پالت کامپوننتها)، Component Tree (درخت کامپوننتها)، Design Surface (بوم طراحی) و Properties Panel (پنل ویژگیها). Palette شامل تمام ویجتهای موجود Android SDK است که بر اساس دستهبندی گروهبندی شدهاند: Widgets، Text، Buttons، Containers و غیره. Component Tree سلسلهمراتب layout را به صورت درخت نمایش میدهد و امکان کشیدن عناصر بین محفظهها را فراهم میکند.
Design Surface — بخش مرکزی ویرایشگر است که layout در آن نمایش داده میشود. روی بوم میتوان عناصر را انتخاب، جابجا، تغییر اندازه داد و محدودیت ایجاد کرد. در پایین بوم، سوئیچ دستگاه و جهت برای پیشنمایش layout در صفحههای مختلف در دسترس است. Layout Editor از پیشنمایش روی دستگاههای مجازی متعدد Nexus، Pixel و Samsung پشتیبانی میکند.
Properties Panel ویژگیهای عنصر انتخاب شده را نمایش میدهد: layout_width، layout_height، حاشیهها (margin)، padding، جاذبه و تمام ویژگیهای خاص مانند textSize برای TextView. هر تغییر در Properties Panel فوراً روی بوم منعکس میشود و کد XML مربوطه را تولید میکند.
در گوشه بالا سمت چپ ویرایشگر، دکمههای کنترل قرار دارند: انتخاب حالت نمایش، فعالسازی اتصال خودکار محدودیتها (Autoconnect)، نمایش محدودیتها به صورت خطوط و جابجایی بین دستگاههای مجازی. دکمه «Device for Preview» امکان انتخاب مدل گوشی، تبلت یا Android TV را برای بررسی تطبیقپذیری فراهم میکند.
ConstraintLayout: موقعیتیابی انعطافپذیر
ConstraintLayout — layout اصلی است که توسط Google برای تمام پروژههای جدید Android توصیه میشود. برخلاف LinearLayoutهای تو در تو، ConstraintLayout یک سلسلهمراتب تخت ایجاد میکند که در آن هر عنصر به والد، عناصر دیگر یا خطوط راهنما (guidelines) متصل میشود. این کار عمق تو در تویی را کاهش میدهد و عملکرد رندرینگ را بهبود میبخشد.
هر عنصر در ConstraintLayout دارای محدودیتهای جانبی است: app:layout_constraintStart_toStartOf، app:layout_constraintEnd_toEndOf، app:layout_constraintTop_toTopOf، app:layout_constraintBottom_toBottomOf. محدودیتها میتوانند به والد (parent) یا به ID عنصر دیگر متصل شوند. قالب پایه XML به این صورت است:
xml
در این مثال، TextView نسبت به هر چهار طرف والد وسطچین شده است. اندازه 0dp (match_constraint) به این معنی است که عرض از محدودیت چپ تا محدودیت راست کشیده میشود. این رویکرد امکان ایجاد layoutهای تطبیقی بدون اندازههای ثابت را فراهم میکند.
ConstraintLayout همچنین از Bias — جابجایی مرکز عنصر پشتیبانی میکند. ویژگیهای layout_constraintHorizontal_bias و layout_constraintVertical_bias مقادیر 0 تا 1 را میپذیرند، که 0.5 مرکز، 0 چسبیدن به ابتدا و 1 چسبیدن به انتها است. Bias امکان موقعیتیابی دقیق عنصر بین دو محدودیت را فراهم میکند.
قابلیتهای اضافی ConstraintLayout: Guidelines (خطوط راهنما به درصد یا dp)، Barriers (موانعی که چندین عنصر را ترکیب میکنند) و Chains (زنجیرههایی از عناصر با توزیع فضا). همه این عناصر مستقیماً در Layout Editor از طریق منوی زمینه روی بوم ایجاد میشوند.
LinearLayout: چیدمان خطی
LinearLayout — محفظهای است که عناصر فرزند را به ترتیب به صورت افقی (android:orientation="horizontal") یا عمودی (android:orientation="vertical") قرار میدهد. این سادهترین layout برای درک است، اما در layoutهای پیچیده یک سلسلهمراتب تو در تو ایجاد میکند که میتواند عملکرد را کاهش دهد.
ویژگی کلیدی LinearLayout weight (android:layout_weight) است. این ویژگی امکان توزیع فضای خالی بین عناصر را به نسبت مقادیر مشخص شده فراهم میکند. اگر به دو دکمه weight="1" داده شود، عرض مساوی خواهند داشت. عنصری با weight="2" دو برابر عنصر با weight="1" فضا دریافت میکند. نمونه XML با LinearLayout:
xml
در این مثال، EditText layout_weight="1" دریافت میکند و تمام فضای خالی بین labelName و btnSubmit را اشغال میکند. layout_width="0dp" نشان میدهد که عرض EditText کاملاً توسط weight تعیین میشود. بدون weight باید عرض ثابتی تعیین میکردیم که با صفحههای مختلف سازگار نیست.
ویژگیهای مهم LinearLayout: android:gravity ترازبندی محتوا را در داخل محفظه کنترل میکند و android:layout_gravity ترازبندی خود محفظه را در داخل والد کنترل میکند. LinearLayout با LinearLayoutهای تو در تو علت رایج عمق تو در تویی است، بنابراین Google توصیه میکند چنین ساختارهایی را با ConstraintLayout جایگزین کنید.
کد XML: ساختار داخلی layout
هر layout اندروید یک فایل XML در پوشه res/layout/ است. Layout Editor این فایل را به طور خودکار تولید میکند، اما درک ساختار آن برای بهینهسازی دستی ضروری است. عنصر ریشه نوع محفظه را تعیین میکند (ConstraintLayout، LinearLayout، FrameLayout) که ویجتهای فرزند در داخل آن قرار میگیرند.
قالب پایه XML با ConstraintLayout شامل اعلان فضای نام xmlns:android و xmlns:app است. فضای نام app برای ویژگیهای کتابخانه ConstraintLayout مانند layout_constraintStart_toStartOf استفاده میشود. به هر عنصر توصیه میشود برای ارجاع از سایر عناصر و از کد Activity یا Fragment، android:id داده شود.
نمونه بخشی از layout با چندین عنصر و محدودیت:
xml
در این layout، ImageView به بالای والد متصل و به صورت افقی وسطچین شده است. TextView به لبه پایینی ImageView متصل است (Top_toBottomOf). Button در زیر TextView قرار دارد. این زنجیره محدودیتها یک ساختار متوالی بدون LinearLayoutهای تو در تو ایجاد میکند.
Layout Editor امکان جابجایی بین نمایش بصری و متنی را از طریق برگههای Design / Code / Split فراهم میکند. در حالت Split، تغییرات در XML فوراً روی بوم منعکس میشود و بالعکس. این به ویژه برای تنظیم دقیق ویژگیهایی که کنترل بصری روی بوم ندارند، راحت است.
پالت کامپوننتها و Properties Panel
Palette — پنل سمت چپ Layout Editor است که تمام کامپوننتهای UI موجود را شامل میشود: TextView، Button، ImageView، EditText، ProgressBar، RecyclerView و غیره. کامپوننتها بر اساس دستهبندی گروهبندی شدهاند: Widgets، Text، Buttons، Containers، Transitions، Advanced. برای افزودن کامپوننت به بوم کافی است آن را از پالت به Design Surface بکشید.
Properties Panel (پنل سمت راست) تمام ویژگیهای عنصر انتخاب شده را نمایش میدهد. پنل به بخشهایی تقسیم شده است: Id (شناسه)، Layout (اندازهها و حاشیهها)، Transform (چرخش و مقیاس)، Text (محتوای TextView)، Padding and Margin. برای هر ویژگی یک منوی کشویی با گزینههای wrap_content، match_parent، match_constraint (0dp) در دسترس است.
ویژگی خاص Properties Panel — ویرایشگر بصری فاصلهها (padding و margin) با نمایش گرافیکی است. با کلیک روی عدد کنار فلش مربوطه، میتوان فاصله را با استفاده از لغزنده تغییر داد. Layout Editor به طور خودکار فاصلهها را نرمالسازی میکند: اگر هر چهار فاصله یکسان باشند، از ویژگی android:layout_margin استفاده میشود، در غیر این صورت — از android:layout_marginStart، android:layout_marginTop و غیره.
برای ویرایش ویژگیهای محدودیت در Properties Panel یک بخش ویژه Constraints وجود دارد. در اینجا تمام اتصالات عنصر نمایش داده میشود: هر لبه به کدام سمت والد یا عنصر دیگر متصل است. میتوان نوع اتصال را تغییر داد، محدودیت اضافه یا حذف کرد. حذف محدودیت همچنین با کلیک روی خط مربوطه روی بوم در حالت Blueprint امکانپذیر است.
| دستهبندی | کامپوننتها | نمونه ویژگیها |
|---|---|---|
| Widgets | TextView, ImageView, ProgressBar | textSize, src, max |
| Text | EditText, AutoCompleteTextView | hint, inputType, imeOptions |
| Buttons | Button, ImageButton, ToggleButton | text, onClick, backgroundTint |
| Containers | CardView, ScrollView, RecyclerView | cardCornerRadius, clipToPadding |
| Advanced | WebView, MapView, VideoView | loadUrl, zOrderOnTop |
ایجاد layoutهای تطبیقی
layout تطبیقی — layoutی است که به درستی در اندازههای مختلف صفحه نمایش داده میشود: از تلفنهای جمعوجور (320dp) تا تبلتهای بزرگ (600dp+) و دستگاههای تاشو. Layout Editor چندین ابزار برای بررسی و ایجاد رابطهای تطبیقی ارائه میدهد.
ابزار اول — Device for Preview در نوار ابزار. لیست کشویی شامل دستگاههای محبوب است: Pixel 6، Pixel 9، Samsung Galaxy S25، Nexus 7، Nexus 9، Pixel C و غیره. میتوان دستگاهی سفارشی با اندازههای دلخواه صفحه و تراکم پیکسل (dpi) اضافه کرد. جابجایی بین دستگاهها یک ثانیه طول میکشد و نشان میدهد layout در هر صفحه چگونه به نظر میرسد.
ابزار دوم — توصیفکنندههای اندازه (qualifiers) برای ایجاد layoutهای جایگزین. در Layout Editor میتوان چندین نسخه از یک فایل XML برای اندازههای مختلف صفحه، جهت یا تراکم ایجاد کرد. به عنوان مثال، فایل activity_main.xml برای تلفن و activity_main-sw600dp.xml برای تبلت. Layout Editor به طور خودکار پیشنمایش را برای توصیفکننده فعال نمایش میدهد.
رویکرد سوم — ConstraintLayout با Guidelines به درصد. خطوط راهنما با ویژگی app:layout_constraintGuide_percent امکان اتصال عناصر به موقعیتهای درصدی را فراهم میکنند. به عنوان مثال، guideline 50% صفحه را بدون توجه به اندازه دستگاه به دو نیم تقسیم میکند. این منعطفترین روش برای ایجاد layoutهای تطبیقی بدون تکرار فایلهای XML است.
Layout Editor همچنین هشدارهایی درباره مشکلات تطبیقپذیری نمایش میدهد: مثلثهای زرد روی عناصر با عرض ثابت، تصاویر خیلی بزرگ یا تو در تویی غیربهینه. توسعهدهنده میتواند روی هشدار کلیک کند و توصیهای برای رفع آن دریافت کند.
بهینهسازی XML layoutها
بهینهسازی layoutها مستقیماً بر سرعت رندرینگ و روانی عملکرد برنامه تأثیر میگذارد. Layout Editor به شناسایی مشکلات از طریق Layout Inspector داخلی و هشدارهای موجود در پنل Problems کمک میکند. قوانین اصلی بهینهسازی: حداقلسازی تو در تویی، استفاده از ConstraintLayout به جای LinearLayoutهای تو در تو، انتخاب صحیح ویژگیهای اندازه.
عمق تو در تویی — دشمن اصلی عملکرد است. هر محفظه تو در تو زمان اندازهگیری و ترسیم را افزایش میدهد. ابزار Hierarchy View در Android Studio درخت layoutها را نشان میدهد. اگر عمق از 5–6 سطح بیشتر شود، layout باید بازسازی شود. ConstraintLayout این مشکل را با جایگزینی 3–4 سطح تو در تویی با یک محفظه تخت حل میکند.
توصیههایی برای بهینهسازی XML layoutها در Layout Editor:
- از ConstraintLayout به عنوان محفظه ریشه به جای LinearLayoutهای تو در تو استفاده کنید — این کار عمق سلسلهمراتب را کاهش میدهد و رندرینگ را سرعت میبخشد
- در لیستهای بزرگ از layout_weight در LinearLayout خودداری کنید — weight نیاز به عبور اندازهگیری دوگانه (two-pass layout) دارد
- محدودیتهای استفاده نشده را حذف کنید از طریق منوی زمینه Clear Constraints of Selection در Layout Editor
- از ViewStub برای بلوکهای به ندرت نمایش داده شونده استفاده کنید — ViewStub تزریق را تا لحظه مشاهده به تأخیر میاندازد
- Merge برای کامپوننتهای قابل استفاده مجدد — تگ merge محفظه اضافی را هنگام گنجاندن از طریق include حذف میکند
- اندازه تصاویر را کاهش دهید و به جای PNG از VectorDrawable برای آیکونها استفاده کنید
Layout Inspector — ابزار Android Studio برای پروفایلسازی layoutها در زمان اجرای برنامه است. این ابزار سلسلهمراتب واقعی، زمان اندازهگیری و ترسیم هر کامپوننت را نشان میدهد. Layout Inspector با Layout Editor ادغام شده است: دوبار کلیک روی هشدار، مشکل مربوطه را در گزارش دقیق باز میکند.
سوالات متداول
Layout Editor در Android Studio چیست؟
Layout Editor — ویرایشگر بصری XML layoutها است که در Android Studio تعبیه شده است. این امکان را فراهم میکند تا رابط کاربری برنامههای Android را با کشیدن کامپوننتها روی بوم، تنظیم ویژگیها از طریق پنل ویژگیها و مشاهده نتیجه در زمان واقعی ایجاد کنید. حالتهای Design، Blueprint و Split تمام مراحل توسعه layout را پوشش میدهند.
از کدام layout بهتر است استفاده کنیم: ConstraintLayout یا LinearLayout؟
ConstraintLayout توسط Google برای پروژههای جدید به دلیل سلسلهمراتب تخت و محدودیتهای انعطافپذیر توصیه میشود. LinearLayout فقط برای بخشهای خطی ساده با 2–3 عنصر بدون تو در تویی موجه است. در یک layout میتوان هر دو رویکرد را با استفاده از ConstraintLayout به عنوان محفظه ریشه ترکیب کرد.
چگونه در Layout Editor محدودیت اضافه کنیم؟
در حالت Design، مکاننما را روی دایره لبه عنصر قرار دهید (برای ConstraintLayout). دکمه سمت چپ ماوس را نگه دارید و خط را به سمت والد یا عنصر دیگر بکشید تا چفت (snap) ظاهر شود. برای تنظیم عددی حاشیهها از Properties Panel، بخش Constraints استفاده کنید. محدودیتها همچنین با فعال بودن Autoconnect به طور خودکار ایجاد میشوند.
چرا Layout Editor هشدارهای زرد نشان میدهد؟
هشدارهای زرد به مشکلات بالقوه اشاره میکنند: عملکرد غیربهینه (تو در تویی عمیق، اندازههای ثابت)، عدم وجود توضیحات محتوا برای دسترسیپذیری، رشتههای سختکد شده به جای منابع strings.xml. هر هشدار شامل توصیهای برای رفع است. Layout Editor همچنین عناصر دارای مشکل را در صورت بحرانی بودن خطا با رنگ قرمز برجسته میکند.
چگونه layout را در صفحههای مختلف بررسی کنیم؟
از لیست کشویی Device for Preview در نوار ابزار Layout Editor استفاده کنید. هر دستگاهی را از لیست انتخاب کنید یا یک دستگاه سفارشی با اندازههای دلخواه اضافه کنید. برای بررسی تطبیقپذیری، layoutهای جایگزین با توصیفکنندهها (sw600dp، sw720dp) ایجاد کنید و از طریق همان لیست بین آنها جابجا شوید. Layout Inspector روی دستگاه واقعی نتیجه نهایی را نشان میدهد.
خلاصه
- Layout Editor — ویرایشگر بصری XML layoutها در Android Studio با حالتهای Design، Blueprint و Split
- ConstraintLayout — محفظه اصلی با سلسلهمراتب تخت، محدودیتها و پشتیبانی از Bias، Chains، Guidelines
- LinearLayout — چیدمان خطی عناصر با توزیع وزنی، مناسب برای بخشهای ساده
- Palette و Properties Panel — کشیدن و رها کردن کامپوننتها و تنظیم بصری تمام ویژگیهای layout
- تطبیقپذیری — پیشنمایش در دستگاههای مختلف، توصیفکنندهها و Guidelines درصدی
- بهینهسازی — حداقلسازی تو در تویی، ConstraintLayout به جای LinearLayoutهای تو در تو، Layout Inspector
- کد XML به طور خودکار تولید میشود و برای ویرایش دستی در برگه Code در دسترس است
ما یک اپلیکیشن موبایل به صورت کلید در دست توسعه خواهیم داد
IT Sectr از سال 2017 برنامههای iOS و Android را برای استارتاپها و کسبوکارها ایجاد میکند. ما به شما مشاوره میدهیم و بهترین راهحل را پیشنهاد خواهیم کرد.
همچنین بخوانید