آموزش طرح بندی خودکار در توسعه  iOS با Swift 2 

آموزش طرح بندی خودکار در توسعه  iOS با Swift 2 

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش طرح بندی خودکار در توسعه  iOS با Swift 2 خواهیم پرداخت.

وقتی برنامه های iOS می سازیم و UI Elements را در آن برنامه اضافه می کنیم ، ممکن است در یک دستگاه عالی به نظر برسند. با این وجود ، اکنون ما باید همین برنامه را در برخی از دستگاه های دیگر امتحان کنیم. مطمئناً شاهد تغییرات شدیدی در UI خواهیم بود و ممکن است برخی از عناصر نیز ظاهر نشوند.

طرح بندی خودکار روشی است که ما برای حل این مشکل استفاده خواهیم کرد. در این درس ما می فهمیم که چگونه می توان طرح بندی خودکار ، اعمال محدودیت ها و نمای پشته را انجام داد تا برنامه شما در هر دستگاهی عالی و بهتر باشد.

ما با ساخت یک برنامه جدید مشاهده تک شروع می کنیم.

افزودن عناصر

همانطور که در زیر نشان داده شده است ، یک برچسب در مرکز نمای بالا و یک برچسب در پایین سمت راست نمایش اضافه کنید.

اکنون، سعی کنید جهت را تغییر دهید و خواهیم دید که پایین سمت راست ظاهر نمی شود ، در حالی که مرکز در مرکز نیست.

(نکته – برای دیدن طرح بندی نیازی به شبیه ساز ندارید ، فقط همانطور که در تصویر زیر نشان داده شده است، در پایین صفحه روی View as – iPhone x کلیک کنید.)

نسخه آیفون و جهت را انتخاب کنید. خواهیم دید که عناصر UI به درستی مرتب نشده اند. بنابراین ، وقتی جهت ، دستگاه یا هر دو خود را تغییر دهیم ، برچسب پایین سمت راست از بین می رود و مرکز در مرکز نخواهد بود.

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

اعمال محدودیت ها در عناصر UI

بر روی برچسب مرکز کلیک کنید ، کنترل را فشار داده و به هر نقطه داخل نمای بکشید ، رها کنید.

مرکز را به صورت افقی در کانتینر انتخاب کنید. مجدداً مرحله فوق را تکرار کرده و Vertical Spacing to Top Layout Guide (راهنمای طرح بندی برتر) را انتخاب کنید.

اکنون، بر روی دکمه افزودن محدودیت جدید کلیک کنید و ارتفاع و عرض را انتخاب کنید ، و روی  Add 2 Constraints کلیک کنید.

بر روی برچسب پایین سمت راست کلیک کنید ، کشیدن را از برچسب به هر نقطه داخل نمای کنترل کنید و “Trailing space to container Margin” را انتخاب کنید. به همین ترتیب ، فاصله عمودی را به راهنمای طرح پایین تغییر دهید.

(نکته – برای انتخاب همزمان چند گزینه ، Shift را فشار دهید و گزینه ها را انتخاب کنید. اطمینان حاصل کنید که Shift را آزاد نمی کنید تا زمانی که همه موارد را انتخاب کنید.)

نمای پشته

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

اکنون، دو دکمه بالا را انتخاب کنید – یک دکمه را انتخاب کنید ، دستور را فشار دهید و سپس دکمه دوم را انتخاب کنید. برای جاسازی آنها در editor → embed In → stack view بروید.

یا

در گوشه پایین سمت راست، گزینه ای وجود دارد گزینه این گزینه را انتخاب کنید و این نمایش ها را در نمای پشته جاسازی می کند.

در حالی که این نمای پشته انتخاب شده است ، به ویژگی inspector بروید. توزیع را برای پر کردن برابر و فاصله را به ۱۰ تغییر دهید.

اکنون این نمای پشته و دکمه پایین را انتخاب کرده و دوباره در نمای پشته جاسازی کنید. این بار محور نمای پشته عمودی خواهد بود، در حالی که در نمای پشته قبلی، افقی بود.

منبع.

لیست جلسات قبل آموزش توسعه iOS با Swift 2

1. آموزش توسعه iOS با Swift 2
2. آموزش Xcode IDE در توسعه iOS با Swift 2 
3.  اولین برنامه در توسعه iOS با Swift 2 
4. آموزش ساخت برنامه تعاملی در توسعه iOS با Swift 2
5. آموزش ساخت برنامه ها با Swift
6. آموزش iOS پیشرفته در توسعه iOS با Swift 2
7. آموزش یکپارچه سازی نقشه ها در توسعه iOS با Swift 2
8. آموزش طرح بندی خودکار در توسعه  iOS با Swift 2 
9. آموزش انیمیشن ها در توسعه  iOS با Swift 2
10.  آموزش دسترسی به خدمات وب در توسعه  iOS با Swift 2