ویرایشگر طرحبندی به شما این امکان را میدهد که به جای نوشتن XML طرحبندی، با کشیدن عناصر رابط کاربری به یک ویرایشگر طراحی بصری، به سرعت طرحبندیهای مبتنی View (View-based layouts) بسازید. ویرایشگر طراحی میتواند طرحبندی شما را در دستگاهها و نسخههای مختلف اندروید پیشنمایش کند و شما میتوانید به صورت پویا اندازه طرحبندی را تغییر دهید تا مطمئن شوید که در اندازههای مختلف صفحه نمایش به درستی کار میکند.
ویرایشگر طرحبندی (Layout Editor) به ویژه هنگام ساخت طرحبندی با ConstraintLayout قدرتمند است.
این صفحه مروری بر ویرایشگر طرحبندی ارائه میدهد. برای کسب اطلاعات بیشتر در مورد اصول طرحبندی، به طرحبندیها مراجعه کنید.
مقدمهای بر ویرایشگر طرحبندی
ویرایشگر طرحبندی (Layout Editor) هنگام باز کردن یک فایل طرحبندی XML ظاهر میشود.
- پالت : شامل نماها و گروههای نمای مختلفی است که میتوانید آنها را به طرح خود بکشید.
- درخت اجزا : سلسله مراتب اجزا را در طرح شما نشان میدهد.
- نوار ابزار : دارای دکمههایی است که ظاهر طرحبندی شما را در ویرایشگر پیکربندی میکنند و ویژگیهای طرحبندی را تغییر میدهند.
- ویرایشگر طراحی : به شما امکان میدهد طرحبندی خود را در نمای طراحی، نمای طرح اولیه یا هر دو ویرایش کنید.
- ویژگیها : کنترلهایی برای ویژگیهای نمای انتخابشده دارد.
- حالت مشاهده : به شما امکان میدهد طرح خود را در هر دو کد مشاهده کنید
، تقسیم 
یا طراحی 
حالتهای تقسیم ، پنجرههای کد و طراحی را همزمان نشان میدهد. - کنترلهای بزرگنمایی و حرکت : اندازه و موقعیت پیشنمایش را در ویرایشگر کنترل کنید.
وقتی یک فایل طرحبندی XML را باز میکنید، ویرایشگر طراحی به طور پیشفرض باز میشود، همانطور که در شکل ۱ نشان داده شده است. برای ویرایش طرحبندی XML در ویرایشگر متن، روی دکمه Code کلیک کنید. دکمه در گوشه بالا سمت راست پنجره. توجه داشته باشید که پنلهای Palette ، Component Tree و Attributes هنگام ویرایش طرحبندی شما در نمای Code در دسترس نیستند.
نکته: برای جابجایی بین ویرایشگرهای طراحی و متن، Alt ( Control در macOS) به همراه Shift و کلید جهت راست یا چپ را فشار دهید.
تغییر ظاهر پیشنمایش
دکمههای ردیف بالای ویرایشگر طراحی به شما امکان میدهند ظاهر طرحبندی خود را در ویرایشگر پیکربندی کنید.
- طراحی و طرح اولیه : نحوه نمایش طرح خود را در ویرایشگر انتخاب کنید. همچنین میتوانید
Bبرای جابجایی بین این انواع نمایش فشار دهید.- برای دیدن پیشنمایش رندر شده از طرح خود، «طراحی» را انتخاب کنید.
- برای دیدن فقط خطوط کلی هر نما، Blueprint را انتخاب کنید.
- برای دیدن هر دو نما در کنار هم ، Design + Blueprint را انتخاب کنید.
- جهتگیری صفحه و انواع طرحبندی : بین جهتگیری صفحه افقی یا عمودی یکی را انتخاب کنید یا حالتهای صفحه دیگری را که برنامه شما طرحبندیهای جایگزین برای آنها ارائه میدهد، مانند حالت شب، انتخاب کنید. این منو همچنین شامل دستوراتی برای ایجاد یک نوع طرحبندی جدید است، همانطور که در بخشی از این صفحه توضیح داده شده است. همچنین میتوانید حرف
Oرا روی صفحه کلید خود فشار دهید تا جهتگیری را تغییر دهید. حالت رابط کاربری سیستم : اگر رنگ پویا را در برنامه خود فعال کردهاید، تصاویر پسزمینه را تغییر دهید و ببینید که طرحبندیهای شما چگونه به تصاویر پسزمینه انتخابی کاربران مختلف واکنش نشان میدهند. توجه داشته باشید که ابتدا باید تم را به یک تم رنگ پویای Material تغییر دهید، سپس تصویر زمینه را تغییر دهید.
نوع و اندازه دستگاه : نوع دستگاه (تلفن/تبلت، تلویزیون اندروید یا سیستم عامل Wear OS) و پیکربندی صفحه نمایش (اندازه و تراکم) را انتخاب کنید. میتوانید از بین چندین نوع دستگاه از پیش پیکربندی شده و تعاریف AVD خودتان انتخاب کنید و میتوانید با انتخاب «افزودن تعریف دستگاه» از لیست، همانطور که در شکل ۳ نشان داده شده است، یک AVD جدید ایجاد کنید.
- برای تغییر اندازه دستگاه، گوشه پایین سمت راست طرح را بکشید.
- برای جابجایی بین لیست دستگاهها،
Dرا فشار دهید.
آزمایش طرحبندی خود در برابر دستگاههای مرجع در این منو به برنامه شما کمک میکند تا به خوبی با حالتهای طرحبندی در دستگاههای واقعی سازگار شود.
شکل ۳. فهرست دستگاهها که دستگاههای مرجع را نشان میدهد. نسخه API : نسخه اندروید را برای پیشنمایش طرحبندی خود انتخاب کنید. فهرست نسخههای اندروید موجود بستگی به نسخههای پلتفرم SDK دارد که با استفاده از SDK Manager نصب کردهاید.
تم برنامه : انتخاب کنید که کدام تم رابط کاربری برای پیشنمایش اعمال شود. این فقط برای سبکهای طرحبندی پشتیبانیشده کار میکند، بنابراین بسیاری از تمهای موجود در این لیست منجر به خطا میشوند.
زبان : زبانی را که میخواهید برای رشتههای رابط کاربری خود نمایش دهید، انتخاب کنید. این لیست فقط زبانهای موجود در منابع رشته شما را نمایش میدهد. اگر میخواهید ترجمههای خود را ویرایش کنید، از منو روی ویرایش ترجمهها کلیک کنید. برای اطلاعات بیشتر در مورد کار با ترجمهها، به بومیسازی رابط کاربری با ویرایشگر ترجمهها مراجعه کنید.
ایجاد طرحبندی جدید
هنگام افزودن یک طرحبندی جدید برای برنامه خود، ابتدا یک فایل طرحبندی پیشفرض در پوشه default layout/ پروژه خود ایجاد کنید تا برای همه پیکربندیهای دستگاه اعمال شود. هنگامی که یک طرحبندی پیشفرض دارید، میتوانید تغییرات طرحبندی را، همانطور که در بخشی از این صفحه توضیح داده شده است، برای پیکربندیهای خاص دستگاه، مانند صفحه نمایشهای بزرگ، ایجاد کنید .
شما میتوانید به یکی از روشهای زیر یک طرح جدید ایجاد کنید:
از منوی اصلی اندروید استودیو استفاده کنید
- در پنجره پروژه ، روی ماژولی که میخواهید طرحبندی به آن اضافه کنید، کلیک کنید.
- در منوی اصلی، File > New > XML > Layout XML File را انتخاب کنید.
- در کادر محاورهای که ظاهر میشود، نام فایل، تگ طرحبندی ریشه و مجموعه منبعی که طرحبندی به آن تعلق دارد را وارد کنید.
- برای ایجاد طرح، روی Finish کلیک کنید.
استفاده از نمای پروژه
- نمای پروژه را از داخل پنجره پروژه انتخاب کنید.
- روی دایرکتوری layout که میخواهید layout را به آن اضافه کنید، کلیک راست کنید.
- در منوی زمینهای که ظاهر میشود، روی New > Layout Resource File کلیک کنید.
از نمای اندروید استفاده کنید
- نمای اندروید را از داخل پنجره پروژه انتخاب کنید.
- روی پوشه
layoutکلیک راست کنید. - در منوی زمینهای که ظاهر میشود، گزینه New > Layout Resource File را انتخاب کنید.
از مدیر منابع استفاده کنید
- در مدیریت منابع ، برگه طرحبندی (Layout) را انتخاب کنید.
- روی دکمه
+کلیک کنید و سپس روی فایل منبع طرحبندی (Layout Resource File) کلیک کنید.
از انواع طرحبندی برای بهینهسازی برای صفحه نمایشهای مختلف استفاده کنید
یک نوع طرحبندی، نسخهای جایگزین از یک طرحبندی موجود است که برای اندازه یا جهتگیری خاصی از صفحه نمایش بهینه شده است.
از یک نوع طرح پیشنهادی استفاده کنید
اندروید استودیو شامل انواع طرحبندیهای رایج است که میتوانید در پروژه خود از آنها استفاده کنید. برای استفاده از یک نوع طرحبندی پیشنهادی، موارد زیر را انجام دهید:
- فایل طرحبندی پیشفرض خود را باز کنید.
- روی طرح کلیک کنید آیکون در گوشه بالا سمت راست پنجره.
- نام فایل طرحبندی در منوی کشویی «اقدام برای تغییر و ایجاد توصیفکنندهها برای فایلهای طرحبندی» ظاهر میشود. منوی کشویی را انتخاب کنید.
- در لیست کشویی، یکی از گزینههایی مانند «ایجاد واجد شرایط منظره» یا «ایجاد واجد شرایط تبلت» را انتخاب کنید.
شکل ۴. فهرست کشویی توصیفکنندههای طرحبندی.
یک دایرکتوری layout جدید ایجاد میشود.
نوع طرحبندی خودتان را ایجاد کنید
اگر میخواهید طرحبندی دلخواه خودتان را ایجاد کنید، مراحل زیر را دنبال کنید:
- فایل طرحبندی پیشفرض خود را باز کنید.
- روی طرح کلیک کنید آیکون در گوشه بالا سمت راست پنجره.
- نام فایل طرحبندی در منوی کشویی «اقدام برای تغییر و ایجاد توصیفکنندهها برای فایلهای طرحبندی» ظاهر میشود. منوی کشویی را انتخاب کنید.
در لیست کشویی، گزینه Add Resource Qualifier را انتخاب کنید. (شکل ۴ در بالا را ببینید.)
کادر محاورهای «انتخاب فهرست منابع» ظاهر میشود.
در کادر محاورهای «انتخاب فهرست منابع» ، توصیفکنندههای منبع را برای نوع مورد نظر تعریف کنید:
- یک واجد شرایط از لیست واجد شرایطهای موجود انتخاب کنید.
- روی افزودن کلیک کنید
دکمه - هر مقدار مورد نیاز را وارد کنید.
- برای اضافه کردن سایر توصیفکنندهها، این مراحل را تکرار کنید.
پس از اضافه کردن تمام گزینههای انتخابی، روی تأیید کلیک کنید.
وقتی چندین نوع طرحبندی یکسان دارید، میتوانید با انتخاب یک نوع از منوی کشویی «اقدام برای تغییر و ایجاد توصیفکنندهها برای فایلهای طرحبندی»، بین آنها جابهجا شوید.
برای اطلاعات بیشتر در مورد نحوه ایجاد طرحبندی برای نمایشگرهای مختلف، به بخش «پشتیبانی از اندازههای مختلف نمایشگر» مراجعه کنید.
تبدیل یک نما یا طرحبندی
شما میتوانید یک نما را به نوع دیگری از نما تبدیل کنید، و میتوانید یک طرحبندی را به نوع دیگری از طرحبندی تبدیل کنید:
- روی دکمه طراحی (Design) در گوشه بالا سمت راست پنجره ویرایشگر کلیک کنید.
- در درخت اجزا ، روی نما یا طرحبندی کلیک راست کنید و سپس روی تبدیل نما کلیک کنید.
- در کادر محاورهای که ظاهر میشود، نوع جدید نما یا طرحبندی را انتخاب کنید و سپس روی اعمال کلیک کنید.
تبدیل یک طرحبندی به ConstraintLayout
برای بهبود عملکرد طرحبندی، طرحبندیهای قدیمیتر را به ConstraintLayout تبدیل کنید. ConstraintLayout از یک سیستم طرحبندی مبتنی بر محدودیت استفاده میکند که به شما امکان میدهد اکثر طرحبندیها را بدون هیچ گروه نمای تو در تو بسازید.
برای تبدیل یک طرح موجود به ConstraintLayout ، موارد زیر را انجام دهید:
- یک طرحبندی موجود را در اندروید استودیو باز کنید.
- روی طرح کلیک کنید آیکون در گوشه بالا سمت راست پنجره ویرایشگر.
- در درخت کامپوننت ، روی طرحبندی کلیک راست کنید و سپس روی «تبدیل
your-layout-typeبه ConstraintLayout» کلیک کنید.
برای کسب اطلاعات بیشتر در مورد ConstraintLayout ، به بخش «ایجاد یک رابط کاربری واکنشگرا با ConstraintLayout» مراجعه کنید.
یافتن موارد در پالت
برای جستجوی یک نما یا گروه نما بر اساس نام در پالت ، روی دکمه جستجو کلیک کنید. 
دکمه در بالای پالت. به طور جایگزین، میتوانید هر زمان که پنجره پالت فوکوس دارد، نام آیتم را تایپ کنید.
در پالت ، میتوانید موارد پرکاربرد را در دستهی «معمول» پیدا کنید. برای افزودن یک مورد به این دسته، روی یک نما یا گروه نما در پالت کلیک راست کرده و سپس در منوی زمینه روی «مورد علاقه» کلیک کنید.
باز کردن مستندات از پالت
برای باز کردن مستندات مرجع توسعهدهندگان اندروید برای یک نما یا گروه نما، عنصر رابط کاربری را در پالت انتخاب کرده و Shift + F1 را فشار دهید.
برای مشاهده مستندات راهنمای مواد برای یک نما یا گروه نما، روی عنصر رابط کاربری در پالت کلیک راست کرده و از منوی زمینه، گزینه راهنمای مواد را انتخاب کنید. اگر ورودی خاصی برای آن مورد وجود نداشته باشد، دستور، صفحه اصلی مستندات راهنمای مواد را باز میکند.
نماها را به طرح خود اضافه کنید
برای شروع ساخت طرحبندی خود، نماها و گروههای نما را از پالت به ویرایشگر طراحی بکشید. هنگامی که یک نما را در طرحبندی قرار میدهید، ویرایشگر اطلاعاتی در مورد رابطه نما با بقیه طرحبندی نمایش میدهد.
اگر از ConstraintLayout استفاده میکنید، میتوانید با استفاده از ویژگیهای Infer Constraints و Autoconnect، به طور خودکار قیود ایجاد کنید .
ویرایش ویژگیهای نما
شما میتوانید ویژگیهای نما را از پنل ویژگیها در ویرایشگر طرحبندی ویرایش کنید. این پنجره فقط زمانی در دسترس است که ویرایشگر طراحی باز باشد، بنابراین برای استفاده از آن، طرح خود را در حالت طراحی یا تقسیم مشاهده کنید.
وقتی یک نما را انتخاب میکنید، چه با کلیک روی نما در درخت اجزا و چه در ویرایشگر طراحی، پنل ویژگیها موارد زیر را نشان میدهد، همانطور که در شکل 5 نشان داده شده است:
- ویژگیهای اعلامشده : ویژگیهای مشخصشده در فایل طرحبندی را فهرست میکند. برای افزودن یک ویژگی، روی دکمهی افزودن کلیک کنید.
دکمه در بالای بخش. - Layout : شامل کنترلهایی برای عرض و ارتفاع نما است. اگر نما در
ConstraintLayoutباشد، این بخش همچنین constraint bias را نشان میدهد و محدودیتهایی را که نما استفاده میکند فهرست میکند. برای اطلاعات بیشتر در مورد کنترل اندازه نماها باConstraintLayout، به Adjust the view size مراجعه کنید. - ویژگیهای مشترک : ویژگیهای مشترک نمای انتخابشده را فهرست میکند. برای مشاهدهی تمام ویژگیهای موجود، بخش «همه ویژگیها» را در پایین پنجره باز کنید.
- جستجو : به شما امکان میدهد یک ویژگی نمای خاص را جستجو کنید.
نمادهای سمت راست هر مقدار ویژگی نشان میدهند که آیا مقادیر ویژگی، ارجاع به منابع هستند یا خیر. این شاخصها ثابت هستند.
وقتی مقدار یک ارجاع به منبع و خالی است 
وقتی مقدار به صورت کدنویسی شده است تا به شما کمک کند مقادیر کدنویسی شده را با یک نگاه تشخیص دهید.روی نشانگرها در هر دو حالت کلیک کنید تا کادر محاورهای منابع باز شود، جایی که میتوانید یک مرجع منبع برای ویژگی مربوطه انتخاب کنید.
هایلایت قرمز دور مقدار یک ویژگی، نشاندهندهی خطایی در آن مقدار است. برای مثال، یک خطا ممکن است نشاندهندهی ورودی نامعتبر برای یک ویژگی تعریفکنندهی طرحبندی باشد.
هایلایت نارنجی نشاندهندهی هشدار برای مقدار است. برای مثال، ممکن است هنگام استفاده از یک مقدار ثابت که در آن ارجاع به منبع پیشبینی شده است، هشداری ظاهر شود.
دادههای نمونه را به نمای خود اضافه کنید
از آنجا که بسیاری از طرحبندیهای اندروید به دادههای زمان اجرا متکی هستند، تجسم ظاهر و حس یک طرحبندی هنگام طراحی برنامه میتواند دشوار باشد. میتوانید دادههای پیشنمایش نمونه را از درون ویرایشگر طرحبندی به یک TextView ، یک ImageView یا یک RecyclerView اضافه کنید.
برای نمایش پنجرهی ویژگیهای نمای زمان طراحی ، روی یکی از این انواع نما کلیک راست کرده و همانطور که در شکل 6 نشان داده شده است، گزینهی «تنظیم دادههای نمونه» را انتخاب کنید.
برای یک TextView ، میتوانید از بین دستههای مختلف متن نمونه انتخاب کنید. هنگام استفاده از متن نمونه، اندروید استودیو ویژگی text TextView را با دادههای نمونه انتخابی شما پر میکند. توجه داشته باشید که فقط در صورتی میتوانید متن نمونه را از طریق پنجره Design-time View Attributes انتخاب کنید که ویژگی text خالی باشد.
TextView با دادههای نمونه. برای یک ImageView ، میتوانید از بین تصاویر نمونه مختلف انتخاب کنید. وقتی یک تصویر نمونه را انتخاب میکنید، اندروید استودیو ویژگی tools:src مربوط به ImageView (یا tools:srcCompat در صورت استفاده از AndroidX) را پر میکند.
ImageView با دادههای نمونه. برای یک RecyclerView ، میتوانید از مجموعهای از قالبها که حاوی تصاویر و متون نمونه هستند، انتخاب کنید. هنگام استفاده از این قالبها، اندروید استودیو فایلی به نام recycler_view_item.xml به دایرکتوری res/layout شما اضافه میکند که شامل طرحبندی دادههای نمونه است. اندروید استودیو همچنین متادیتا را به RecyclerView اضافه میکند تا دادههای نمونه را به درستی نمایش دهد.
RecyclerView با دادههای نمونه.نمایش هشدارها و خطاهای طرحبندی
ویرایشگر طرحبندی، هرگونه مشکل طرحبندی را در کنار نمای مربوطه در درخت اجزا با استفاده از یک آیکون تعجب دایرهای قرمز به شما اطلاع میدهد. 
برای خطاها یا نماد تعجب مثلث نارنجی 
برای هشدارها. برای دیدن جزئیات بیشتر، روی نماد کلیک کنید.
برای مشاهده همه مشکلات شناخته شده در پنجرهای در زیر ویرایشگر، روی نمایش هشدارها و خطاها () کلیک کنید. یا ) در نوار ابزار.
فونتها را دانلود کنید و آنها را روی متن اعمال کنید
هنگام استفاده از اندروید ۸.۰ (سطح API ۲۶) یا کتابخانه Jetpack Core ، میتوانید با دنبال کردن این مراحل، از بین صدها فونت انتخاب کنید:
- در ویرایشگر طرحبندی، روی طرح کلیک کنید برای مشاهده طرحبندی خود در ویرایشگر طراحی، از نماد استفاده کنید.
- یک نمای متن انتخاب کنید.
- در پنل Attributes ، گزینه textAppearance و سپس کادر fontFamily را باز کنید.
- به پایین لیست بروید و روی More Fonts کلیک کنید تا کادر محاورهای Resources باز شود.
- در پنجرهی منابع (Resources) ، برای انتخاب یک فونت، فهرست را مرور کنید یا در نوار جستجو در بالا تایپ کنید. اگر فونتی را در زیر بخش «دانلودپذیر» (Downloadable) انتخاب کنید، میتوانید روی «ایجاد فونت قابل دانلود» (Create downloadable font) کلیک کنید تا فونت در زمان اجرا به عنوان یک فونت قابل دانلود بارگذاری شود یا روی « افزودن فونت به پروژه» (Add font to project) کلیک کنید تا فایل فونت TTF در APK شما بستهبندی شود. فونتهای فهرستشده در زیر بخش «اندروید» (Android) توسط سیستم اندروید ارائه میشوند، بنابراین نیازی به دانلود یا همراه شدن در APK شما ندارند.
- برای اتمام ، روی تأیید کلیک کنید.
اعتبارسنجی طرحبندی
اعتبارسنجی طرحبندی ابزاری بصری برای پیشنمایش همزمان طرحبندیها برای دستگاهها و پیکربندیهای نمایشگر مختلف است که به شما کمک میکند مشکلات طرحبندیهای خود را در مراحل اولیه پیدا کنید. برای دسترسی به این ویژگی، روی برگه اعتبارسنجی طرحبندی در گوشه بالا سمت راست پنجره IDE کلیک کنید:
شکل 10. برگه اعتبارسنجی طرحبندی.
برای جابجایی بین مجموعههای پیکربندی موجود، یکی از موارد زیر را از منوی کشویی Reference Devices در بالای پنجرهی Layout Validation انتخاب کنید:
- دستگاههای مرجع
- سفارشی
- کور رنگی
- اندازه فونتها
شکل ۱۱. منوی کشویی دستگاههای مرجع.
دستگاههای مرجع
دستگاههای مرجع مجموعهای از دستگاههایی هستند که توصیه میکنیم آنها را آزمایش کنید. این دستگاهها شامل رابطهای تلفن، تاشو، تبلت و دسکتاپ میشوند. شما باید پیشنمایشی از نحوه نمایش طرحبندی خود در این مجموعه از دستگاههای مرجع را مشاهده کنید:
شکل ۱۲. پیشنمایشهای دستگاه مرجع در ابزار اعتبارسنجی طرحبندی.
سفارشی
برای سفارشیسازی پیکربندی نمایش برای پیشنمایش، از بین تنظیمات متنوعی از جمله زبان، دستگاه یا جهت صفحه نمایش، یکی را انتخاب کنید:
شکل ۱۶. پیکربندی یک نمایش سفارشی در ابزار اعتبارسنجی طرحبندی.
کور رنگی
برای اینکه اپلیکیشن شما برای کاربرانی که کوررنگی دارند، قابل دسترستر باشد، طرحبندی خود را با شبیهسازی انواع رایج کوررنگی اعتبارسنجی کنید:
شکل ۱۳. پیشنمایشهای شبیهسازی کوررنگی در ابزار اعتبارسنجی طرحبندی.
اندازه فونتها
طرحبندیهای خود را در اندازههای مختلف فونت اعتبارسنجی کنید و با آزمایش طرحبندیهای خود با فونتهای بزرگتر، دسترسیپذیری برنامه خود را برای کاربران کمبینا بهبود بخشید:
شکل ۱۴. پیشنمایش اندازه فونت متغیر در ابزار اعتبارسنجی طرحبندی.