آموزش صفر تا صد برنامه نویسی ios - جلسه دوم

آموزش صفر تا صد برنامه نویسی iOS – اپلیکیشن استاد کارتون – جلسه دوم

طراحی ظاهر اپلیکیشن استاد کارتون با Auto Layout

 

با جلسه دوم از سری آموزش صفر تا صد برنامه نویسی iOS در خدمت شما هستیم.

تو این جلسه قراره راجب نحوه ی ساخت رابط کاربری برای اپلکیشن استاد کارتون صحبت کنیم.

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

اولین چیزی که موقع طراحی رابط کاربری اپلیکیشن iOS بدونید ، سیستمی هست به نام Auto Layout.

 

Auto Layout چیه ؟

اگه بخوایم خیلی خودمونی Auto Layout  رو تعریف کنیم میشه سیستمی که به ما توسعه دهنده ها کمک می کنه تا ظاهر اپلیکیشنمو طوری طراحی کنیم که روی صفحات نمایش درست نمایش داده بشه. همین!!

حالا چه طور از Auto Layout استفاده کنیم ؟

میتونیم از Auto Layout هم توی کد و هم موقع طراحی با storyboard استفاده کنیم. تو این قسمت ما راجب نحوه ی استفاده از اون با storyboard صحبت می کنیم.

از قسمت Navigation Area فایل Main.storyboard رو انتخاب کنید. احتمالا چیزی مشابه عکس پایین رو ببینید.

 

Auto Layout چیست | Auto Layout چیه

خب حالا از قسمت Object Library (در قسمت Tool Bar) یه دکمه میگیریم و روی صفحمون قرار میدیم.

آموزش استفاده Auto Layout | سیستم Auto Layout چیه

دکمه Object Library

Object Library | سیستم Auto Layout چیه

( وقتی  رو دکمه ی Object Library  کلیک می کنید همچین پنجره ای باز میشه. کافیه عبارت ‌Button رو تایپ کنید و سپس اون رو روی صفحه بکشید )

دکمه روی وسط صفحه قرار بدید.

در حال حاضر روی این صفحه همه چی درسته.

 

Auto Layout چیست | Auto Layout چیه

(صفحه نمایش آیفون XR)

Auto Layout چیه | Auto Layout چیست

( صفحه نمایش آیفون ۸)

خب همون طور که می بینید اگه از Auto Layout استفاده نکنیم کل چیدمان صفحمون بهم میریزه.

برای اینکه از Auto Layout استفاده کنیم اِلِمان مورد نظرمون رو انتخاب می کنیم ( در اینجا Button)

و سپس مانند شکل زیر عمل می کنیم.

 

Auto Layout چیه

گزینه Horizontally in Container : این گزینه بهمون میگه اِلِمان به صورت افقی در مرکز باشه. اون عددی که کنارش می بینید یه جور مقدار انحراف از مرکزه که اگر تغییرش بدیم ، فاصلش از مرکز صفحه به صورت افقی تغییر می کنه.

گزینه Vertically in Container : این گزینه بهمون میگه که اِلِمان به صورت عمودی تو مرکز قرار بگیره. توضیحات گزینه بالا هم راجبش صدق میکنه.

 

نتیجه بعد از اعمال Auto Layout :

 

1 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *