آموزش سوئیفت Swift قسمت دهم

مقدمه و معرفی : 

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

 

آموزش autolayout مرحله اول
 تصویر ۱


طبق تصویر گزینه  universal انتخاب کنید.

 

آموزش autolayout مرحله دوم
تصویر ۲


روی main storyboard  کلیک کرده

آموزش autolayout مرحله سوم


 تصویر ۳


روی  assistant editor طبق گزینه ۱ کلیک کنید
سپس طبق تصویر روی automatic کلیک کنید

آموزش autolayout مرحله چهارم

تصویر ۴

 

آموزش autolayout مرحله پنجم
 تصویر ۵


زیر منویی ظاهر می شود طبق شکل روی قسمتی که کادر کشیده شده کلیک کنید
طبق عکس ۵ روی این گزینه که تنها گزینه موجود هست کلیک کنید

آموزش autolayout مرحله ششم


 تصویر ۶


طبق تصویر ۶ با همچین فضایی روبرو می شوید
اگر روی گزینه ۱ کلیک کنید می تونید  سایز اسکرین های بیشتری رو در اختیار داشته باشید

آموزش autolayout مرحله هفتم


 تصویر ۷


روی تکسباکس کلیک کنید و مثل تصویر روی گزینه ۲ کلیک کنید با پنجره ای که مشاهده می کنید روبرو میشید این قسمت align نام دارد و می تونید المان ها رو در صفحه وطی قرار بدید.
طبق گزینه ۳ روی  horizontally in container کلیک کنید  که به صورت افقی المان رو وسط چین خواهد کرد.

آموزش autolayout مرحله  هشتم


تصویر ۸

devider

طبق تصویر روی گزینه ۰ کلیک کنید و این منو ظاهر میشه شماره های ۱ به این معنا هست که در نظر داریم این المان رو از بالا و چپ و راست فاصله معینی در همه اسکرین ها داشته باشه  برای هر کدوم از جهت ها مثل شماره ۲ روی قسمت نقطه چین قرمز  کلیک کنید تا قرمز تیره و solid بشه. طول و عرض رو هم تیک هاش رو بزنید تا طول و عرض ثابتی در هر سایز داشته باشه  در اخر هم روی دکمه add 5 containers کلیک کنید تا تغییرات اعمال بشه

آموزش autolayout مرحله نهم

تصویر ۹


در تصویر می بینید که تکس باک در وسط اسکرین قرار گرفت
حالا المان دیگه ای اضافه می کنیم دنبال switch میگردیم و به داخل story boardدرگ می کنیم
در  preview می بینید که switch به پایین اسکرین رفته پس تغییرات مرحله قبل رو باید روی این المان هم اعمال کنیم

آموزش autolayout مرحله دهم

تصویر ۱۰


روی switch کلیک می کنید و طق گزینه ۲ روی pin کلیک می کنید برای این المان فقط کافی هست فاصله مد نظر طبق تصویر از پایین اعمال بشه
در اخر هم روی  add 1 container کلیک می کنید

آموزش autolayout مرحله یازدهم

تصویر ۱۱


برای اینکه  switchوسط چین بشه روی align ( گزینه ۱) کلیک کنید و بعد هم hotizontally in containerرو تیکش رو بزنید و روی  add 1 container کلیک کنید

آموزش autolayout مرحله دوازدهم

تصویر ۱۲


در این تصویر می بینید که دو تا المانی که قرار دادیم  هر دو وسط اسکرین  و با فاصله مناسب از بالا و پایین اسکرین قرار دارند.

آموزش autolayout مرحله سیزدهم

تصویر ۱۳

آموزش autolayout مرحله  چهاردهم

 

تصویر ۱۴

 


المان دیگری به صفحه اضافه می کنیم  طبق شکل  طبق تصویر ۱۳
طبق تصویر ۱۴ برای این لیبل یک widthو height ثابت در نظر می گیریم و روی add 2 containers کلیک می کنید

آموزش autolayout مرحله پانزدهم
تصویر ۱۵


 

Devider

به شکل زیر  خواهد بود و توجه کنید که در preview متن لیبل رو مشاهده نمی کنیم چون هنوز در وسط صفحه قرار ندادیمش طبق تصویر ۱۵
در نظر داریم لیبل از بالا فاصله ای داشته باشه پس نسبت به تکسباکس از بالا بهش فاصله ای اختصاص میدیم برای این کار تکسباکس کلیک کنید کلید commandروی کیبورد نگه دارین و لیبل رو بعدش انتخاب کنید

آموزش autolayout مرحله شانزدهم

تصویر ۱۶


طبق این تصویر ۱۶ روی pin کلیک کرده فاصله از بالا رو روی  قسمت نقطه چین قرمز کلیک می کنید طبق شکل به قرمز پررنگ تبدیل میشه

آموزش autolayout مرحله هفدهم

تصویر ۱۷


خب این فاصله ایجاد میشه  بین دو المان در story board هم میبینید که یک خط ابی رنگ بین دو المان ایجاد میشه

آموزش autolayout مرحله هجدهم

تصویر ۱۸


خب برای اینکه لیبل وسط صفحه قرار بگیره  مثل مراحل قبل عمل می کنیم  با این تفاوت که می خوایم لیبل رو نسبت به تکس باکس  وسط قرار  بدیم پس هردو طبق شکل باید سلکت باشند رویalign کلیک کنید و
horizontal centers رو انتخاب کنید در اخر هم روی دکمه add 1 containerکلیک کنید

آموزش autolayout مرحله نوزدهم

 تصویر ۱۹


خب می بینید که لیبل هم وسط صفحه قرار گرفت

آموزش autolayout مرحله بیستم

 تصویر ۲۰


روی علامت +طبق عکس کلیک کنید تا روی سایز اسکرین های مختلف بتونید خروجی رو ببینید

آموزش autolayout مرحله بیست و یکم

تصویر ۲۱


میتونید روی هر کدوم از سایز های مربوط به
iphone یاipadخواستید کلیک کنید

آموزش autolayout مرحله بیست ودوم

تصویر ۲۲


از منوی بالا ایفون با سایز 4.7اینچ رو انتخاب کردم
میبینید که در هر دو سایز اسکرین به درستی نمایش داده میشه
برای تمیرن می تونید المان های بیشتری اضافه کنید و نسبت به هم در اسکرین مکان دهی کنید
همونطور که دیدید auto layout مربوط به طراحی ui برنامه برای سایز های مختلف دیوایس ها هست
تو این جلسه مقدمه ای ازش رو گفتیم امیدوارم این جلسه براتون مفید واقع شده باشه

 

 

برای درج نظر و یا طرح سوالات خود لطفا در سایت ثبت نام کنید و یا وارد سایت شوید

نظرات کاربران

برای این مطلب تاکنون نظری ارسال نشده است. شما اولین نفر باشید