ایجاد یک Scroll View با Swift: 9 مرحله

2024 نویسنده: John Day | [email protected]. آخرین اصلاح شده: 2024-01-30 08:55

چند ماه پیش ، من از وجود swift و Xcode اطلاع نداشتم. امروز ، من توانستم بخش کوچکی از برنامه ای را که می خواهم ایجاد کنم توسعه دهم. من توانستم چیزی جالب ایجاد کنم ، که دوست دارم آن را با شما به اشتراک بگذارم.

در این آموزش من شما را با مراحل ایجاد یک صحنه نمایش اسکرول آشنا می کنم ، که در آن کاربران هنگامی که می خواهند یک حساب جدید ثبت کنند ، هدایت می شوند. در طول راه ، من اطمینان حاصل می کنم که توضیحاتی نظری در مورد کارهایی که انجام می دهیم به شما ارائه می دهم تا بتوانید در واقع بفهمید که ما در حال انجام چه کاری هستیم.

قبل از انجام این کار ، بیایید در مورد Swift و Xcode صحبت کنیم:

1. Swift یک زبان برنامه نویسی قدرتمند و بصری برای macOS ، iOS ، watchOS و tvOS است. نوشتن کد Swift تعاملی و سرگرم کننده است ، نحو مختصر و در عین حال گویا است و Swift شامل ویژگی های مدرن است که توسعه دهندگان دوست دارند. کد سوئیفت از نظر طراحی ایمن است ، در عین حال نرم افزاری را تولید می کند که سریع اجرا می شود. این برنامه برای کار با چارچوب های Cocoa و Cocoa Touch اپل و قسمت بزرگی از کد Objective-C موجود برای محصولات اپل طراحی شده است. این با چارچوب کامپایلر منبع باز LLVM ساخته شده است و از نسخه 6 که در سال 2014 منتشر شد در Xcode گنجانده شده است. در سیستم عامل های Apple ، از کتابخانه زمان اجرا Objective-C استفاده می کند که اجازه می دهد کد C ، Objective-C ، C ++ و Swift اجرا شود در یک برنامه

2. Xcode یک محیط توسعه یکپارچه (IDE) برای macOS است که شامل مجموعه ای از ابزارهای توسعه نرم افزاری است که توسط اپل برای توسعه نرم افزار برای macOS ، iOS ، watchOS و tvOS توسعه یافته است.

مرحله 1: Xcode را بارگیری کنید

Xcode 10 شامل همه چیزهایی است که برای ایجاد برنامه های شگفت انگیز برای همه سیستم عامل های Apple نیاز دارید. اکنون Xcode و Instruments در حالت تاریک جدید در macOS Mojave عالی به نظر می رسند. ویرایشگر کد منبع به شما امکان می دهد کد را راحت تر تغییر دهید یا تغییر دهید ، تغییرات کنترل منبع را در کنار خط مربوطه مشاهده کرده و به سرعت جزئیات تفاوتهای کد بالادستی را دریافت کنید. شما می توانید ابزار خود را با تجسم سفارشی و تجزیه و تحلیل داده ها بسازید. Swift نرم افزار را سریعتر کامپایل می کند ، به شما کمک می کند برنامه های سریع تری ارائه دهید و حتی فایلهای باینری کوچکتر ایجاد می کند. مجموعه های آزمایشی بارها سریعتر تکمیل می شوند ، کار با تیم ساده تر و ایمن تر است و خیلی بیشتر.

Xcode 10 شامل Swift 4.2 است که نرم افزار شما را سریعتر کامپایل می کند ، به شما در ارائه سریعتر برنامه ها کمک می کند و حتی فایلهای باینری کوچکتر تولید می کند. در مقایسه با Swift 4.0 ، آخرین کامپایلر Swift می تواند برنامه های بزرگ را بیش از دو برابر سریعتر بسازد. Xcode و Swift که برای جدیدترین سخت افزار Mac چند هسته ای بهینه شده اند ، یک پلت فرم توسعه سریع را ایجاد می کنند.

مرحله 2: بیایید شروع کنیم

بنابراین آنچه ما انجام خواهیم داد این است که به Xcode برویم و یک پروژه جدید ایجاد کنیم. هنگامی که روی یک پروژه جدید کلیک می کنیم ، برنامه ما یک برنامه تک نمایه خواهد بود. برای کسانی که نمی دانند ، یک برنامه نمای واحد به این معنی است که شما باید همه چیز را از ابتدا شروع کنید و یک نمای واحد وجود دارد که می توانیم برنامه ریزی کنیم.

نام محصول خود را TutorialApp بگذارید. اگر توسعه دهنده باتجربه ای هستید که برنامه ها را در App Store منتشر می کند ، احتمالاً یک تیم خواهید داشت ، اما اگر تازه کار هستید و هیچ برنامه ای منتشر نشده است ، می توانید از این قسمت بگذرید. در نام سازمان ، می توانید نام شرکت را در صورت داشتن یکی بنویسید ، در مورد من من فقط MacBook Pro را نگه می دارم. سپس ، شناسه سازمان به عنوان یک شناسه منحصر به فرد پروژه شما در نظر گرفته می شود ، بنابراین ، می توانید هر آنچه را که می خواهید بنویسید. قطعاً زبان سریع خواهد بود.

بنابراین ، next را فشار دهید و اجازه دهید پروژه را روی دسکتاپ ذخیره کنیم تا دسترسی به آن آسان شود.

پروژه جدید از سه فایل AppDelegate.swift ، ViewController.swift و ستاره این آموزش تشکیل شده است: Main.storyboard. زیر اطلاعات استقرار> Device Orientation در تنظیمات پروژه عمومی ، Devices را روی iPhone تنظیم کنید. از آنجا که این برنامه فقط به صورت عمودی است ، گزینه های Landscape Leftand Landscape Right را بردارید. Main.storyboard را در ناوبر پروژه باز کنید تا در Interface Buildereditor مشاهده شود:

ما هیچ تغییری در پیکربندی ایجاد نمی کنیم و مستقیماً به صفحه اصلی داستان می رویم. از آنجا که ما یک برنامه نمای واحد ایجاد کردیم ، یک نمای ساده ساده ، خالی ایجاد کردیم. این چیزی است که ما باید روی آن کار کنیم.

مرحله 3: کار در UI

اصطلاحات رسمی استوری بورد برای یک کنترل کننده نمای "صحنه" است ، اما می توانید از اصطلاحات به جای یکدیگر استفاده کنید. یک صحنه نمایانگر یک کنترل کننده دید در استوری بورد است.

در اینجا یک کنترل کننده نمای واحد را مشاهده می کنید که دارای نمای خالی است. پیکان که از سمت چپ به کنترل کننده نما اشاره می کند نشان می دهد که این کنترل کننده نمای اولیه است که باید برای این استوری بورد نمایش داده شود. طراحی یک طرح بندی در ویرایشگر استوری بورد با کشیدن کنترل ها از کتابخانه شی (به گوشه بالا سمت راست مراجعه کنید) به کنترلر نمای شما انجام می شود.

برای درک نحوه عملکرد ویرایشگر استوری بورد ، برخی از کنترل ها را از کتابخانه شیء به کنترلر نمای خالی مانند آنچه در ویدیو مشاهده می کنید بکشید.

همانطور که کنترل ها را به داخل می کشید ، آنها باید در سند سند در سمت چپ نشان داده شوند.

می توانید رابط کاربری مورد نظر خود را ایجاد کنید. در مورد من ، از موردی که در تصویر می بینید استفاده کردم.

مرحله 4: یک کنترل کننده نمای دوم ایجاد کرده و Segues (انتقال) را آغاز کنید

بنابراین ، در برنامه من ، هنگامی که کاربر دکمه "ثبت نام حساب جدید" را فشار می دهد ، می خواهم او را به صفحه حساب ثبت نام هدایت کنم. بنابراین برای این منظور ، هر صفحه یک صحنه جدید ، یک نمایش جدید است. به همین دلیل ، ما باید یک کنترل کننده نمای دوم ایجاد کنیم ، که می توانید آن را در کتابخانه شی پیدا کنید.

عبارت view controller را تایپ کرده و در کنار کنترل کننده نمای اولیه خود قرار دهید. این صحنه مسئول کنترل نمای ثبت خواهد بود. تغییر مسیر به آن صفحه می تواند به دو صورت انجام شود:

1. وقتی از دکمه به کنترل نمای دیگر متصل می شویم ، می توانیم آن را به صورت دستی انجام دهیم
2. ما می توانیم آن را به صورت برنامه ای انجام دهیم

آنچه من انتخاب کردم این است که آن را به صورت دستی بسازم. به همین راحتی است:

1. روی دکمه خود یک کلیک چپ کنید (در مورد من ، ثبت نام حساب جدید)
2. فرمان را نگه دارید و کلیک چپ ماوس را بکشید تا به صحنه کنترل ثبات بکشید.
3. آن را در آنجا رها کنید و "Present Modally" را انتخاب کنید

مرحله 5: ایجاد کلاس برنامه نویسی برای مراحل ثبت نام

بنابراین ، اکنون ما می خواهیم یک کلاس رمزگذاری اختصاصی برای صحنه جدید ایجاد کنیم.

برای این کار باید مراحل زیر را انجام دهید:

• روی پوشه پروژه خود راست کلیک کنید
• روی فایل جدیدی به نام cocoa touch class کلیک کنید
• در کلاس بنویسید: RegisterVC
• خیلی مهم! مطمئن شوید که زیر کلاس باید از نوع UIViewController باشد
• زبان باید سریع باشد
• بعدی را کلیک کنید و کلاس کاکائوی خود را در ریشه اصلی پروژه خود ذخیره کنید.
• بر روی استوری بورد اصلی کلیک کرده و به کنترل کننده نمایش جدید بروید
• روی دکمه زرد رنگی که در بالای آن قرار دارد کلیک کنید
• در سمت راست به بازرس کلاس بروید و به Register VC مرجع کنید (کلاس لباس ، کلاس = RegisterVC

مرحله 6: کش رفتن افقی صفحه را بسازید

در iOS ، از اسکرول نماها برای مشاهده محتوایی استفاده می شود که کاملاً روی صفحه قرار نمی گیرد. نماهای پیمایش دو هدف اصلی دارند:

برای اینکه کاربران بتوانند ناحیه محتوایی را که می خواهند نمایش دهند بکشید ، به کاربران اجازه دهید تا با استفاده از حرکات تنگ کننده روی محتوای نمایش داده شده بزرگنمایی یا بزرگنمایی کنند. یک کنترل رایج که در برنامه های iOS استفاده می شود - UITableView - یک زیر کلاس از UIScrollView است و راهی عالی برای مشاهده محتواهای بزرگتر از صفحه ارائه می دهد.

استفاده از صفحات فرعی در کشیدن افقی چیست؟

خوب ، اگر بخواهم 6 صفحه مختلف ایجاد کنم ، به این معنی است که باید برای هر یک از آنها یک کلاس اختصاصی ایجاد کنم و انتقال اطلاعات از یک کلاس به کلاس دیگر چندان راحت نیست. وقتی به عنوان مثال ایمیل خود را تایپ می کنم و سپس روی next کلیک می کنم ، اگر کنترل کننده View دیگری داشته باشم ، صفحه اول View Controller را ترک می کنم و سپس صفحه دوم نمایش داده می شود. در این حالت ، اطلاعات اولین کنترل کننده ، باید به کنترل بعدی و سپس دوباره به کنترل کننده نمای سوم و غیره منتقل شود. وقتی همه کنترلرهای مورد نیاز را داشته باشم ، باید تمام داده ها را از همه جمع آوری کنم صفحات و ارسال آنها به سرور. بنابراین ، این واقعا پیچیده خواهد بود.

بنابراین ، در مورد ایجاد این کنترل کننده نمای ، در مورد من ، 5 صفحه داشتم که می خواستم ایجاد کنم:

1. پست الکترونیک
2. نام و نام خانوادگی
3. کلمه عبور
4. تاریخ تولد
5. جنسیت

این بدان معناست که View controller که ما ایجاد می کنیم باید 5 برابر بزرگتر از آنچه قبلاً ساخته بودیم باشد.

نمای کنترل خود را انتخاب کرده و به بالا ، گوشه راست بروید و روی نماد خط کش کلیک کرده و اندازه شبیه سازی شده را ویرایش کنید. به منظور تنظیم عرض و ارتفاع ، Freeform را انتخاب می کنید. عرض پیش فرض صفحه که برای آیفون 8 مناسب است 375 است ، بنابراین اگر 375*5 = 1875 را ضرب کنم. در اینجا شما یک کنترل کننده نمای گسترده دارید.

به طور مشابه ، شما برای همه گوشی ها و اندازه های مختلف صفحه از یک روند مشابه پیروی می کنید.

برای اینکه نمای اسکرول کار کند ، به یک شیء نمای اسکرول نیاز داریم. Scroll View مکانیزمی برای نمایش محتوای بزرگتر از اندازه پنجره برنامه ارائه می دهد. روی این شی کلیک کنید ، آن را بکشید و در گوشه سمت چپ بالای کنترلر View قرار دهید و مطمئن شوید که X و Y در موقعیت های صفر قرار دارند و بر این اساس کشش به کنترل کننده نمای شما می رسد.

Scroll View فقط به ما امکان اسکرول می دهد ، هیچ چیز دیگری. سپس باید نمای محتوا را اضافه کنیم ، که نمایهای دیگر را ذخیره می کند. شما می توانید UIView - که نشان دهنده یک منطقه مستطیلی است که در آن رویدادها را ترسیم و دریافت می کند - در کتابخانه شی پیدا کنید. به سادگی ، روی آن کلیک کرده و آن را به نمای پیمایش بکشید و یکبار دیگر ، مطابق آن کشش دهید.

نمای پیمایش را از پنل سمت چپ انتخاب کنید و ما تراز 0 ، 0 ، 0 ، 0 را فراخوانی کرده و محدودیت ها را اضافه می کنیم. همین کار را برای نمای محتوا انجام دهید.

مرحله 7: ایجاد رابط کاربری برای صفحات فرعی کشیدن افقی

در این مرحله ، باید UI صفحات فرعی خود را ایجاد کنید. آنچه من انجام دادم این است که یک نمونه اولیه در Sketch بسازم و سپس آن را در Xcode بسازم.

مرحله 8: طراحی را در Xcode پیاده سازی کنید

مرحله بعدی پیاده سازی این طرح در Xcode است. برای انجام این کار ، باید اتصالات خروجی را برای همه صفحات فرعی ایجاد کرده و یک اتصال دیگر برای "نمای مادر" ایجاد کنید ، یعنی یک اتصال خروجی برای کنترل کننده کل نمای.

عناصر موجود در یک استوری بورد به کد منبع پیوند داده می شوند. درک رابطه یک استوری بورد با کدی که می نویسید بسیار مهم است.

در یک استوری بورد ، یک صحنه یک صفحه محتوا و معمولاً یک کنترل کننده نمایش را نشان می دهد. کنترلرهای مشاهده رفتار برنامه شما را پیاده سازی می کنند و یک نمای محتوا را با سلسله مراتب زیرنمایش های آن مدیریت می کند. آنها جریان اطلاعات را بین مدل داده برنامه ، که داده های برنامه را در بر می گیرد ، و نماهایی که این داده ها را نمایش می دهند ، هماهنگ می کنند ، چرخه زندگی نمای محتوا را مدیریت می کنند ، هنگام چرخش دستگاه تغییرات جهت گیری را کنترل می کنند ، ناوبری را در برنامه شما تعریف می کنند. ، و رفتار را برای پاسخ به ورودی کاربر پیاده سازی کنید. همه اشیاء View View Controller در iOS از نوع UIViewController یا یکی از زیر کلاس های آن هستند.

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

Xcode قبلاً یک کلاس را ایجاد کرده بود که قبلاً آن را مشاهده کرده بودید ، ViewController.swift ، و آن را به صحنه ای که در استوری بورد خود کار می کردید متصل کرد. با افزودن صحنه های بیشتر ، این ارتباط را خودتان در بازرس هویت ایجاد خواهید کرد. بازرس هویت به شما امکان می دهد ویژگی های یک شی در استوری بورد خود را که مربوط به هویت آن شی است ویرایش کنید ، مانند این که شیء به چه طبقه ای تعلق دارد.

ایجاد خروجی برای UI ElementsOutlets راهی برای ارجاع اشیاء رابط-اشیایی که به استوری بورد خود اضافه کرده اید-از فایل های کد منبع ارائه می دهد. برای ایجاد خروجی ، Control-drag را از یک شیء خاص در storyboard خود به یک فایل view controller بکشید. این عملیات یک ویژگی برای شی در فایل view controller شما ایجاد می کند که به شما امکان می دهد در زمان اجرا به آن شی از کد دسترسی داشته و آن را دستکاری کنید.

1. صفحه داستان خود را باز کنید ، Main.storyboard.
2. روی دکمه Assistant در نوار ابزار Xcode در گوشه سمت راست بالای Xcode کلیک کنید تا ویرایشگر دستیار باز شود. اگر می خواهید فضای بیشتری برای کار کردن وجود داشته باشد ، با کلیک بر روی دکمه های Navigator و Utilities در نوار ابزار Xcode ، ناوبر پروژه و منطقه ابزار را جمع کنید.
3. همچنین می توانید نمای کلی را جمع کنید.

در نوار انتخاب ویرایشگر ، که در بالای دستیار ویرایشگر ظاهر می شود ، ویرایشگر دستیار را از Preview به Automatic> ViewController.swift تغییر دهید.

روی صفحه فرعی کلیک کرده و در کلاس مربوطه در کد بکشید.

مرحله نهم: ترکیب حرکات سفارشی

SWIPE GESTURE

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

پیاده سازی حرکت کش رفتن

مرحله 1: اضافه کردن حرکت کش رفتن (ها) به روش viewDidLoad ()

نادیده گرفتن func viewDidLoad () {super.viewDidLoad ()

اجازه دهید swipeLeft = UISwipeGestureRecognizer (target: self، action: #selector (handleGesture)) swipeLeft.direction =.left self.view.addGestureRecognizer (swipeLeft)

let swipeRight = UISwipeGestureRecognizer (target: self، action: #selector (handleGesture)) swipeRight.direction =.right self.view.addGestureRecognizer (swipeRight)

let swipeUp = UISwipeGestureRecognizer (target: self، action: #selector (handleGesture)) swipeUp.direction =.up self.view.addGestureRecognizer (swipeUp)

اجازه دهید swipeDown = UISwipeGestureRecognizer (target: self، action: #selector (handleGesture)) swipeDown.direction =.down self.view.addGestureRecognizer (swipeDown)}

مرحله 2: تشخیص ژست را در روش handleGesture () بررسی کنید func handleGesture (ژست: UISwipeGestureRecognizer) -> Void {if gesture.direction == UISwipeGestureRecognizerDirection.right {print ("Swipe Right")} در صورت دیگر gesture.direction == UISwipeGesture left {print ("Swipe Left")} else if gesture.direction == UISwipeGestureRecognizerDirection.up {print ("Swipe Up")} else if gesture.direction == UISwipeGestureRecognizerDirection.down {print ("Swipe Down")}}

در برنامه خود ، می خواستم از swipeRight استفاده کنم ، اما مجبور نشدم از برنامه ای که برای برنامه شما مناسب تر است استفاده کنم.

اکنون ، اجازه دهید این را در کد خود پیاده سازی کنیم.

ما به RegisterVC.swift که قبلاً ایجاد کرده بودیم می رویم و کد را همانطور که در تصاویر مشاهده می کنید می نویسیم.

توضیح کد

اجازه دهید current_x موقعیت فعلی ScrollView (موقعیت افقی) را بدست آورد اجازه دهید عرض صفحه عرض صفحه را بدست آورد ، با کسر این اندازه اجازه دهید new_x از موقعیت فعلی scrollview بازگردد ، در صورتی که current_x> 0 تا عرض صفحه بازگردد ، مگر اینکه بیشتر از 0 باشد - 0 صفحه 1 است.

و کارمان تمام شد!

بچه ها کار خوبیه!