اطلاعیه

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

دوره آموزش swift - درس ۲ : آشنایی مختصری با App layout

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

  • دوره آموزش swift - درس ۲ : آشنایی مختصری با App layout

    با سلام و عرض ادب
    در درس ۲ پیرامون بخش کلیدی App layout در Xcode صحبت می کنیم, به طور عمومی App layout بخشی نیست که در اول آموزشها به آن پرداخته شود اما من تصمیم گرفتم که پیش از هر چیزی با App layout آشنا شویم که از شروع کار به درستی حرکت کنیم.

    App layout به کاربران اجازه می دهد که اپلیکیشن نوشته شده با صفحه نمایش آیفون های مختلف (3.5 , 4 . 4.7 و 5 اینچی) هماهنگ باشد و در واقع نیاز به طراحی جدا برای هر کدام از آنها نباشد.

    اجازه بدهید از همین الان بخش ها را با اسم هایشان طبقه بندی کنیم



    قدم اول باز کردن اپلیکیشن Xcode است. در صفحه خوش آمدگویی Xcode, بخشی به نام Playground دارد, بخش Playground در واقع برای تنها کد نویسی و در تست ایده ها است, بنابراین ما برای پروژه اصلی, به روی create new xcode project کلیک می کنیم, و سپس در بخش iOS > Application, گزینه Single view را انتخاب می کنیم. در صفحه بعد, زبان برنامه نویسی را از Objective-C به swift تغییر می دهید و فعلا بخش Device هم روی آیفون تنظیم می کنیم. فعلا اجازه بدید اسم پروژه هم App layout بنامیم

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




    همانطور که از در عکس های ارائه شده مشخص است, در صورت کلیک بر روی Stroyboard, محیط کار ما که Superview نام دارد مربع است, همچنین در اسلاید بار سمت راست مشخص است که ما می توانیم براحتی Superview به متناسب با هر صفحه آیفونی که بخواهیم عوض کنیم اما در این صورت, برای هر سایز باید به صورت جداگانه اپلیکیشن را متناسب کنیم, به همین دلیل, به صورت پیشفرض این بخش روی گزینه inferred تنظیم است.


    بدون هیچ اتلاف وفتی, کار را شروع می کنیم
    از بخش object library , گزینه Label را سرچ و سپس در Superview دراگ می کنیم, این عملیات را سه بار انجام می دهید که سه label در superview دیده شود, اجازه دهید آنها را اول, دومی و سومی بنامیم . label را به شکل زیر در صفحه بچینید


    خوب به نظر همه چیز سر جای خود است, حال از مسیر زیر گزینه Preview را انتخاب کرده و با زدن کلید + آیفون با سایز های مختلف را انتخاب کنید, میبنید که هیچ چیز سر جای خود نیست






    برای حل این موضوع روش های متعددی است, در کل باید گفت که تئوری app layout بسیار آسان است اما انجام آن به بودن المان زیادی در صفحه نیاز به کارکرد زیاد و کسب تجربه دارد.
    در بخش پایین view controller چهار گزینه وجود دارد که فعلا دو گزینه از آنها که pin و allign نام دارد برای ما مهم است.


    بخش pin به شما اجازه می دهد که با pin کردن المان مذکور با ثابت نگه داشتن فاصله از چهار طرف superview المان را ثابت سر جای خود نگاه داشته, همچنین می توان طول عرض و aspect ratio را نیز ثابت نگاه داشت. بخش allign نیز با فیکس کردن گوشه ها یا مرکز المان ها آن ها را فیکس می کند.

    روش های مختلفی برای فیکس کردن المان ها وجود دارد, به طور کلی المان در هر راستایی که المان دیگری نباشد فاصله اش با خطوط superview فیکس می شود و غیر اینصورت با نزدیک ترین المان به خود.
    به این نکته توجه داشته باشید که به صورت پیش فرض دو حاشیه در دو طرف superview قرار داده شده است, بنابراین گوشه ترین نقطه superview, نقطه صفر نیست و -20 است, با برداشتن تیک constrains to margins در بخش pin این حاشیه ها برداشته می شود.
    برای کیس ارائه شده در این آموزش, همانطور که می بینید سه Label وجود دارد که یکی در وسط بالا صفحه, یکی در وسط پایین صفحه و دیگری در مرکز صفحه قرار دارد.
    بنابراین منطقی ترین راه ممکن, فیکس کردن فاصله first label تا بخش فوقانی و فاصله third label تا بخش تختانی superview است. این فیکس ها در بخش pin انجام می شود. می توان برای اطمینان از بهتر شدن نتیجه, طول و عرض آنها را نیز فیکس کرد.
    سپس برای first و third label در بخش align, فیکس نگاه داری المان در راستای وسط در حالت عمودی را نیز انتخاب می کنیم (Horzintally in container) .
    برای second label, روش کار کمی ساده تر است, در بخش allign, المان را در راستای عمودی و افقی وسط فیکس کرده (vertically and Horzintally in container), با این کار المان در وسط صفحه قرار می گیرد و سپس از بخش pin, طول و عرض آنرا نیز فیکس می کنیم.


    برای اشکال پیچده تر, روش های سخت تری وجود دارد به طور مثال دو المان A و B با هم انتخاب می شود و از گزینه pin, ثابت Equal to width یا Equal to Heights انتخاب می شود, سپس در ادامه ثابت مورد نظر را ویرایش کرده و اعلام می کنیم که به طور مثال المان B باید با 20 درصد المان A برابر باشد, بنابراین هر اندازه ای که A باشد, ‌B در اندازه 20 درصد آن خواهد بود. در پروژه های آینده بیشتر پیرامون این موضوع صحبت می کنیم.

    به یاد داشته باشید که تمامی ثابت های انتخاب شده در اسلاید بار utlitiles و در بخش size inspector قرار دارد, بنابراین می توانید در صورت لزوم هر ثابت را پاک کرده و آنرا اصلاح کنید

    خوب, حال از دوستانی که این بخش را دنبال می کنند و پیش از تجربه کار با App layout را نداشته اند می خواهم در یک کار عملی بهتر با یادگیری این بخش مهم آشنا شوند.
    لطفا از پنج عکس در Superview استفاده کنید. یکی از عکس ها به صورت کامل و بدون حاشیه در سراسر پس زمینه superview باشد و چهار عکس دیگر در اندازه کوچک تر در یک راستای عمودی در وسط قرار بگیرند


    نکته: برای استقاده از عکس, نخست عکس های خود را به بخش Assests.xcassest در اسلاید بار Navigator درگ کنید. سپس از بخش object library, گزینه image را سرچ و سپس به درون superview درگ کنید. سپس UI image درگ شده را انتخاب و از اسلاید بار utilities و بخش Attributes inspector, بر روی گزینه image کلیک کرده و عکس مورد نظر رو انتخاب کنید, سپس از بخش mode, گزینه Aspect fit را انتخاب کنید.

    دوستانی که تجربه کار با App layout را ندارند, در صورت بروز مشکل, مستقیم از گروه تلگرام این دوره آموزشی با من یا دیگر دوستان برای رفع مشکل مشورت کنند.

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



    Twitter : Rouzbeh7000

  • #2
    آدرس گروه تلگرام رو لطف میکنید؟ سپاس

    نظر


    • #3
      نوشته اصلی توسط Farnood Gh نمایش پست ها
      آدرس گروه تلگرام رو لطف میکنید؟ سپاس
      بفرمایید
      https://telegram.me/joinchat/Cuu1kAdGI84DdWFQ8vo2tA
      i-phone.ir
      The Best or Nothing



      Twitter : Rouzbeh7000

      نظر

      صبر کنید ..
      X