شروع کار با ViewCode در iOS: یک راهنمای اساسی

Summarize this content to 400 words in Persian Lang
هی همه! حالش چطوره؟ ایده این مقاله ارائه یک راهنمای اساسی در مورد نحوه ایجاد یک پروژه با استفاده از رویکرد ViewCode است.

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

چه مشکلی را حل می کند؟

الگوی استوری بورد که برای ایجاد رابط در Xcode استفاده می شود، بسیار جالب و شهودی است. با این حال، هنگام کار در یک تیم، این رویکرد می تواند باعث سردردهای زیادی شود.

اساساً صفحه‌هایی که با استوری‌برد ایجاد می‌شوند یک فایل xml دارند که هر چیزی را که وارد یا ویرایش می‌کنیم ذخیره می‌کند. از آنجایی که این تغییرات به صورت برنامه ای انجام نمی شود، می تواند منجر به درگیری های زیادی در هنگام کار در یک تیم شود.

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

SwiftUI چطور؟

SwiftUI یکی از گزینه های جایگزین برای حل این مشکل است. این یک زبان اعلامی برای ایجاد صفحه‌نمایش و کامپوننت‌ها با یک پیش‌نمایش زنده بسیار جالب به ارمغان می‌آورد. اگر قبلا از Jetpack Compose یا Flutter استفاده کرده اید، متوجه شباهت هایی خواهید شد.

با این حال، SwiftUI فقط از iOS 13 در دسترس است. بسته به مخاطبان برنامه شما، این می تواند یک محدودیت باشد، زیرا دستگاه هایی مانند iPhone 6، 6 Plus و مدل های قبلی دسترسی نخواهند داشت. در اینجا می توانید حداقل و حداکثر نسخه های پشتیبانی شده برای دستگاه های اپل را بررسی کنید.

بریم سر کار

01. ایجاد پروژه

برای شروع، بیایید Xcode را باز کنیم و یک پروژه جدید ایجاد کنیم. در این مثال، گزینه iOS/App را انتخاب کردم.

نام پروژه را وارد کنید و مطمئن شوید که گزینه ها به صورت زیر پیکربندی شده اند:

استنباط کنید: استوری بردزبان: سویفت

محل ذخیره پروژه را انتخاب کنید و تمام! اکنون می توانیم کدنویسی را شروع کنیم.

در طول ایجاد این مقاله، من از Xcode نسخه 15.3 (15E204a) استفاده کردم و آخرین نسخه iOS موجود 17.4 است.

وقتی Xcode آن را باز کند، پروژه ما به این شکل خواهد بود:

اگر تیک گزینه “Include Tests” را بردارید، پوشه Tests و UITests وجود نخواهد داشت. اما نگران نباشید، ما در این مقاله از آنها استفاده نخواهیم کرد و در صورت نیاز می توان آنها را بعداً ایجاد کرد.

با باز شدن پروژه می بینیم که دو تا دارد .storyboard فایل ها: LaunchScreen.storyboard و Main.storyboard. این LaunchScreen زمانی که سیستم عامل منابعی را برای عملکرد صحیح برنامه ما بارگیری می کند، صفحه نمایش داده می شود. این Main صفحه اصلی برنامه ما است.

فایلی که در این مرحله به ما علاقه مند است این است Main.storyboard.

02. تغییرات اولیه

را حذف کنید Main.storyboard فایل

روی “انتقال به سطل زباله” کلیک کنید.

حالا بیایید به تنظیمات Target Properties اپلیکیشن خود دسترسی پیدا کنیم.

با باز شدن تنظیمات، خطوط زیر را حذف کنید:

“نام پایه فایل استوری بورد اصلی”

ه

“Application Scene Manisfest” > “Scene Configuration” > “Window Application Session Role” > “Item 0” > “Storyboard Name”

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

ما چند تغییر کوچک در این فایل ایجاد می کنیم.

برخی از نظرات را حذف کنید و ما را ایجاد کنید windowScene متغیر از آن برای پیکربندی اینکه کدام کنترلر/صفحه نمایش داده می شود استفاده می شود.

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
guard let windowScene = (scene as? UIWindowScene) else { return }
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

کنترل کننده ای را که با شروع برنامه نمایش داده می شود پیکربندی کنید:

let safeWindow = UIWindow(windowScene: windowScene)
safeWindow.frame = UIScreen.main.bounds
safeWindow.rootViewController = ViewController()
safeWindow.makeKeyAndVisible()

window = safeWindow

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مرحله پنجره خود را بر اساس صحنه ارائه شده توسط the ایجاد می کنیم guard let windowScene. سپس، صفحه را طوری پیکربندی می کنیم که کل فضای موجود را اشغال کند و کنترل کننده مورد استفاده را تعریف کنیم. در نهایت، ما خود را اختصاص می دهیم safeWindow به متغیر پنجره

این ViewController آن چیزی است که در طول راه اندازی اولیه پروژه ایجاد شده است

در حال اجرای برنامه

حال با انتخاب یکی از شبیه سازها و اجرای برنامه (چه با کلیک بر روی دکمه پخش در بالا یا با استفاده از دستور CMD + R) باید رفتار زیر را مشاهده کنیم:

اتفاقی که می افتد این است:

این LaunchScreen.storyboard فایل نمایش داده می شود.
نمای کنترل کننده ما ارائه شده است. و از آنجایی که چیزی در آن وجود ندارد، صفحه خالی به نظر می رسد.

اگر به ما دسترسی داشته باشیم ViewController و یک رنگ پس‌زمینه برای نما تنظیم کنید، ما قبلاً تغییر را هنگام اجرای مجدد پروژه مشاهده خواهیم کرد:

override func viewDidLoad() {
super.viewDidLoad()

view.backgroundColor = .red
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اکنون همه ما آماده ایم که ساخت اپلیکیشن خود را به صورت برنامه ای آغاز کنیم.

ایجاد عناصر با ViewCode

ایجاد عناصر صفحه نمایش به طور کامل به صورت برنامه نویسی انجام می شود. اما چگونه این کار را انجام دهیم؟

مثال:

private lazy var label: UILabel = {
let label = UILabel()

label.text = “Hello World”
label.translatesAutoresizingMaskIntoConstraints = false

return label
}()

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

می توانیم موارد زیر را مشاهده کنیم:

ما استفاده می کنیم private کلمه کلیدی برای اطمینان از اینکه هیچ کس خارج از کلاس ما نمی تواند به این اطلاعات دسترسی داشته باشد.

lazy استفاده می شود بنابراین متغیر فقط زمانی وارد حافظه می شود که از آن استفاده شود.
این {}() رویکرد تابعی است که عنصر نوع متغیر را خود اجرا و برمی گرداند.

translatesAutoresizingMaskIntoConstraints = false برای جلوگیری از تضاد پیکربندی‌های محدودیت تولید شده به صورت خودکار با پیکربندی‌هایی که به صورت دستی پیکربندی می‌کنیم.

توجه به این نکته مهم است که هر عنصری که به صورت برنامه‌نویسی ایجاد می‌شود، به آن نیاز دارد translatesAutoresizingMaskIntoConstraints = false پیکربندی در غیر این صورت، ممکن است درگیری رخ دهد و عناصر ممکن است آنطور که انتظار می رود رفتار نکنند.

حال باید این عنصر را به صفحه اضافه کنیم.

override func viewDidLoad() {
super.viewDidLoad()

view.backgroundColor = .white

view.addSubview(label)
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پس زمینه نمای متصل به کنترلر خود را به رنگ سفید تغییر می دهیم و برچسب خود را داخل آن اضافه می کنیم.

برای قرار دادن عنصر خود:

NSLayoutConstraint.activate([
label.centerXAnchor.constraint(equalTo: view.centerXAnchor),
label.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

سپس برنامه را اجرا کنید و voilà:

نتیجه گیری

همانطور که در ابتدا ذکر شد، این یک راهنمای اساسی برای ایجاد پروژه با استفاده از ViewCode است. چندین پیشرفت وجود دارد که می‌توانیم انجام دهیم، مانند ایجاد فایل‌های مشاهده مجزا – در نهایت، ایجاد این عناصر به طور مستقیم در کنترل‌کننده‌مان ایده‌آل نیست. اما من می خواستم این مقاله را مختصر و دقیق نگه دارم. در قسمت بعدی، ایجاد عنصر روی صفحه را با عمق بیشتری بررسی خواهیم کرد.

این برای امروز است، مردم. ممنون و دفعه بعد می بینمت!

در صورت نیاز به تنظیمات بیشتر به من اطلاع دهید!

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
    guard let windowScene = (scene as? UIWindowScene) else { return }
}

let safeWindow = UIWindow(windowScene: windowScene)
safeWindow.frame = UIScreen.main.bounds
safeWindow.rootViewController = ViewController()
safeWindow.makeKeyAndVisible()

window = safeWindow

override func viewDidLoad() {
    super.viewDidLoad()

    view.backgroundColor = .red
}

private lazy var label: UILabel = {
    let label = UILabel()

    label.text = "Hello World"
    label.translatesAutoresizingMaskIntoConstraints = false

    return label
}()

override func viewDidLoad() {
    super.viewDidLoad()

    view.backgroundColor = .white

    view.addSubview(label)
}

NSLayoutConstraint.activate([
    label.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    label.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])