اطلاعیه

Collapse
هیچ اطلاعیه ای هنوز ایجاد نشده است .

دوره آموزش swift - درس ۸: آشنایی با stack view

Collapse
X
 
  • فیلتر
  • زمان
  • نمایش
پاک کردن همه
new posts

  • دوره آموزش swift - درس ۸: آشنایی با stack view

    با سلام و عرض ادب خدمت کاربران
    در درس دوم در موضوع App layout با constraint ها آشنا شدیم و همینطور که احتمالا با من مواقع خواهید بود وقتی صحبت از یک اپلیکیشن با المان های زیادی باشد استفاده از constraint ها به تنهایی بسیار سخت خواهد بود. اپل برای حل مشکل stack view را در wwdc 15 معرفی کرد.
    ویدیو معرفی stack view

    قبل از هر چیز, صفحه ای در سایت pinterest رو به شما معرفی می کنم به نام Beautiful App / UI design . در این صفحه ایده های زیادی پیرامون طراحی اپلیکیشن های مختلف به دست خواهید آورد.

    Stack view به طور کلی به کاربران اجازه میده که المان ها رو به صورت افقی یا عموی در صفحه ثابت نگه دارند.

    پس از چیدن المان های مورد نظرمان بر روی صفحه, نخست می بایست تصمیم بگیریم که المان ها بهتر است در حالت افقی ثابت نگه داشته شوند یا در حالت عمودی. تصمیم مورد نظر با افزایش تجربه راحت تر خواهد شد.
    به صورت مثال اگر افقی را انتخاب کنید, باید در هر stack view المان های افقی در یک راستا را انتخاب کنیم, سپس به ردیف بعدی رویم برای آن ها نیز stack view تعریف کنیم.

    به طور مثال اپلیکیشنی از سایت pinterest انتخاب می کنیم و سعی می کنیم که طرحی مشابه آن را بسازیم. در این کیس, یک اپلیکیشن فروشگاه را انتخاب می کنیم. در عکس زیر می بینید که اگر قرار باشد stack view ها به صورت افقی انتخاب شوند چگونه می بایست دسته بندی شوند.


    بدین ترتیب المان های هر ردیف را انتخاب کرده و بر روی آیکون stack view در کنار آیکون align در پایین story board کیک می کنیم. امکان دارید در زمان دسته بندی ها, اندازه یا نظم المان ها بهم بخورد. در این مورد مشکلی وجود ندارد و در ادامه کار اصلاح خواهند شد.
    احتمالا با چنین تصویر وحشتناکی مواجه خواهید شد که المان ها درون یکدیگر وارد شده اند.


    قدم اول برای حل این مشکل, تمامی stack view ساخته شده در view controller را انتخاب کرده و دوباره بر روی ساخت stack view می زنیم که همگی stack view ها در یک stack view مادر و تحت شرایط آن قرار بگیرند. stack view کلی را اینبار به صورت عمودی تنظیم می کنیم که به صورت عمودی مکان المان ها تنظیم شود.
    در قدم بعدی وقتی stack view انتخاب شده است کل مجموعه ها دوباره به لبه superview بر میگردانیم. اگر مراحل را درست انجام بدید باید شکلی مشابه شکل زیر داشته باشید


    سپس با pin کردن گوشه های صفحه با توجه به نوار بالا, همه المان ها را دوباره در یک صفحه جا می کنیم.




    خوب حال زمان چینش نهایی است. در حال حاضر می بایست ما چهار stack view درون یک stack view کلی داشته باشیم.
    با کلیک بر روی هر stack view تنظیمات آن در اسلاید بار Utlitiles مشخص می شود.


    برای اینکه بدانیم گزینه های این تنظیمات دقیقا به چه شکل در چینش کمک ما می کنند به عکس های منتشر شده توسط اپل در WWDC 15 رجوع می کنیم.







    و در نهایت بخش spacing هم به ایجاد اندازه بین المان می پردازد.
    من در این کیس, در stack view مادر که چهار stack view را در درون خود دارم در هر دو بخش از گزینه fill استفاده کردم
    اما در stack view مربوط به پنج عکس کفش , به نظر من بهترین گزینه برای این stack view, گزینه Fill equally با داشتن spacing بین 10 تا 15 است ( عکس ها نیز می بایست روی حالت Aspect to fit تنظیم شده باشند )
    از گزینه Fill equally برای کلید ها هم می توان استفاده کرد, به طور مثال با spacing حدود 20 یا بیشتر

    اگر در نهایت اندازه کلید ها یا عکس برایتان رضایت بخش نبود, می توانید از constrain ها برای تغییر ابعاد یا ثابت نگه داشتن آنها استفاده کنید. حال که با آپشن های stack view تا حدودی آشنا شدید باید وقت زیادی بر روی آن بگذارید تا در آن با تجربه شود.


    موفق باشید
    i-phone.ir
    The Best or Nothing



    Twitter : Rouzbeh7000
صبر کنید ..
X