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

1396/1/4 خانم عقیلی 2983

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

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

آموزش سوییفت


 تصویر ۱


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

آموزش سوییفت


تصویر ۲


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

آموزش سوییفت


 تصویر ۳


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

آموزش سوییفت

تصویر ۴

آموزش سوییفت


 تصویر ۵


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

آموزش سوییفت


 تصویر ۶


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

آموزش سوییفت


 تصویر ۷


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

آموزش سوییفت


تصویر ۸

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

آموزش سوییفت

تصویر ۹


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

آموزش سوییفت

تصویر ۱۰


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

آموزش سوییفت

تصویر ۱۱


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

آموزش سوییفت

تصویر ۱۲


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

آموزش سوییفت

تصویر ۱۳

 

آموزش سوییفت

تصویر ۱۴

 


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

آموزش سوییفت
تصویر ۱۵


 

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

آموزش سوییفت

تصویر ۱۶


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

آموزش سوییفت

تصویر ۱۷


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

آموزش سوییفت

تصویر ۱۸


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

آموزش سوییفت

 تصویر ۱۹


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

آموزش سوییفت

 تصویر ۲۰


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

آموزش سوییفت

تصویر ۲۱


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

آموزش سوییفت

تصویر ۲۲


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