Matthew Ogtong

Posted on Mar 31, 2023 • Edited on Apr 2, 2023 • Originally published at ogtongm.Medium

An Intro into UIKit & SwiftUI: Building a Simple Login Screen with Both Frameworks

#swift #ios #mobile #beginners

User interfaces are the gateway between users and your app, making it essential to create visually appealing and user-friendly experiences. In this article, we'll explore UIKit and SwiftUI, two powerful UI frameworks used in iOS development. We'll discuss the pros and cons of each framework and look into their future in the ever-evolving landscape of iOS development. With UIKit, you have the option to build UI using Interface Builder (including Storyboards) or programmatically. In this article, we'll focus on creating a simple login screen using UIKit (programmatically) and SwiftUI. Let's dive in and learn more about these UI frameworks and how essential they are in iOS Development.

UIKit: A Versatile Framework for iOS Apps

UIKit has been the go-to framework for building user interfaces on iOS devices since its inception. It provides a wide array of UI components and a comprehensive event-handling system to support fluid user interactions. UIKit provides developers with two primary methods for crafting UIs: employing Interface Builder in conjunction with Storyboards or XIB files, or constructing the UI through code.

Interface Builder, an integral visual tool within Xcode, allows developers to devise their app's interface using a convenient drag-and-drop system. This option is particularly appealing to those who favor a visual approach to UI design. The layout information is stored in two file types: Storyboards and XIB files. Storyboards excel at outlining an app's entire flow, while XIB files are more appropriate for individual screens or reusable views.

Nonetheless, in real-life projects, especially when collaborating with a team, utilizing Interface Builder alongside Storyboards can prove to be unwieldy and difficult to manage. As a result, numerous developers and companies choose to create their UIs programmatically. This approach offers more control and flexibility, leading to more maintainable and scalable code in the long run.

Now that we have a basic understanding of UIKit and its two primary methods for creating UIs, let's dive into building a simple login screen using this framework programmatically.

Building a Simple Login Screen Programmatically with UIKit

We'll be focusing on the essential components: username/email, password, and a login button.

Here's a detailed breakdown with code snippets:

Step 1.

Open Xcode and create a new project
Choose "App" as the template, and click "Next"
Fill in the required information and depending on your Xcode version make sure either "UIKit" or "Storyboard" is selected as the interface
Click "Create" to generate your project

In ViewController.swift, make sure you have UIKit imported:

import UIKit

This line imports the UIKit framework, which provides the core functionality required to build user interfaces for iOS apps.

Step 2.

Inside the ViewController class, let's create our UI components as properties:

In this step, we put together three UI elements: an input field for email or username, another input field for the password, and a login button. We use closures to initialize these elements and adjust their individual attributes to fit our design.

Step 3.

Set up the UI components in the viewDidLoad() method:

In this step, we set up the UI components inside the viewDidLoad() method. We add the subviews to the main view and set up Auto Layout constraints to position and size them appropriately.

Step 4.

Build and run the project. You should now see a simple login screen with an email or username input field, a password input field, and a login button:

Before moving on to building the same screen with SwiftUI, let's take a moment to evaluate some of UIKit's pros and cons. This will give you a better understanding of the trade-offs and benefits of using UIKit for your iOS projects.

Pros:

Mature and stable: UIKit has a long history, making it a well-tested and reliable framework.
Extensive resources: Comprehensive documentation and a wealth of resources make it easier to find solutions and support.
Broad compatibility: UIKit is supported on all iOS versions and devices, ensuring maximum reach for your app.

Cons:

More boilerplate code: UIKit typically requires more boilerplate code compared to SwiftUI.
Verbosity: The code can be harder to understand and maintain due to its verbosity.
Shift in focus: As Apple prioritizes SwiftUI, UIKit may see fewer updates related to modern UI paradigms.

SwiftUI: A Modern Approach to UI Building

SwiftUI is Apple's newest UI framework, introduced in 2019. Unlike UIKit, SwiftUI is a declarative framework built on the Swift language, allowing for a more modern and streamlined approach to UI development. With SwiftUI, developers write less code, and the code is more readable, making the development process more efficient.

As you work with SwiftUI, you'll notice a significant difference in the way UI is constructed compared to UIKit. Rather than relying on Interface Builder or crafting code programmatically, SwiftUI enables you to outline the UI's organization and actions with clear, expressive syntax. This method is more comprehensible and approachable for developers at any skill level.

SwiftUI also incorporates numerous integrated features that enhance the UI development process, including real time previews, automatic compatibility with accessibility features, and innate support for Dark Mode and localization.

Next, we'll construct an identical login screen utilizing SwiftUI. After that, we'll examine the differences in working with SwiftUI as opposed to UIKit.

Building a Simple Login Screen with SwiftUI

When setting up the project, follow the same steps as we did for the UIKit project, but ensure that you choose the "SwiftUI" interface during project creation. After the project is established, we can directly proceed to the ContentView file. SwiftUI greatly simplifies the process of designing user interfaces, and you'll soon discover how effortless it is to build this login screen using SwiftUI's declarative syntax.

In this code snippet, we initiate a VStack, setting a 20-point spacing between each component. Within the VStack, we include three different types of views: two text fields and a login button. Both TextField and SecureField employ the RoundedBorderTextFieldStyle() view modifier, defining a frame size of 200x40 points. View modifiers allow us to apply styling or add behavior to a view in a concise and reusable manner.
The Button view features a blue background, white text, and a 5-point corner radius, achieved by applying corresponding view modifiers. Lastly, we incorporate a Spacer() at the end of the VStack, which pushes the elements toward the top of the screen. To position these elements, we add a 100-point padding from the top.

After seeing the SwiftUI code in action, you might have noticed the live preview provided by the SwiftUI Previews feature. SwiftUI Previews have come a long way since their introduction, and they've become an incredibly convenient and efficient tool for developers. As you write your SwiftUI code, the preview updates in real-time, allowing you to see the changes without having to build and run the entire app. This drastically reduces the time spent on iterating UI designs and provides a smoother development experience, enabling you to focus on crafting the perfect interface for your users.

And there you have it! We've constructed the same login screen using SwiftUI, achieving a concise and comprehensible result.

SwiftUI, though a fairly recent addition, has already made a considerable impression in the realm of iOS development. Let's take a moment to consider some advantages and drawbacks of this framework.

Pros:

Unified codebase across platforms: SwiftUI enables developers to produce a single codebase that works on various Apple platforms, including iOS, macOS, watchOS, and tvOS, streamlining the development process.
Declarative syntax: SwiftUI's declarative syntax simplifies UI code, enhancing readability and maintainability, which proves advantageous in team-based settings.
Built-in modern features: SwiftUI offers innate support for contemporary features like dark mode, accessibility, and localization, saving time and effort when incorporating these aspects into real projects.

Cons:

Rate of adoption: While SwiftUI is gaining popularity, numerous companies still rely on UIKit for their UI construction, which implies developers may need to familiarize themselves with both frameworks.
Limited compatibility: SwiftUI is available only for iOS 13 and later, which can be a drawback for projects that need to support older iOS versions.
Growing pains: As a newer framework, SwiftUI's API coverage and resources are still evolving, and developers may encounter occasional limitations or need to find workarounds.

Conclusion

As someone who has worked with both UIKit and SwiftUI, I've found that each framework comes with its own set of strengths and weaknesses. In my personal experience, I have grown to love working with SwiftUI for its modern, cross-platform, and declarative approach to UI development. However, I still believe that learning UIKit first was a valuable step in my journey as an iOS developer.

In today's job market, it's essential to have a solid understanding of both frameworks. UIKit remains widely used in existing projects, while SwiftUI is quickly gaining popularity for newer projects. As a junior iOS developer, mastering both frameworks will not only make you more versatile but also increase your value to potential employers.

As you continue on your iOS development journey, I encourage you to experiment with both UIKit and SwiftUI to find your preferences and strengths. Embrace the challenges that each framework brings, and grow through those experiences. Good luck, and happy coding!