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

خانم عقیلی 1395/1/12 2150

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

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

دراین جلسه در نظر دارم در مورد 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 برنامه برای سایز های مختلف دیوایس ها هست
تو این جلسه مقدمه ای ازش رو گفتیم امیدوارم این جلسه براتون مفید واقع شده باشه

آموزش سوییفت دانلود PDF قسمت دهم آموزش Swift

قسمت بعدی قسمت یازدهم در حال بارگزاری ست

قسمت قبلی