What is SwiftUI — Does it worth to learn it?

CodingRasi

Follow

6 min readMar 12, 2023

--

Hi everybody! 🙋‍♂️

In this article, we are going to look at SwiftUI.

You are going to get answers to your following questions:

What is SwiftUI?
Does it worth to learn it?
What are key features of SwiftUI?
How to start coding with SwiftUI?
Also some coding examples!

If you are ready, let’s start, oh no! 😱 First I must ask you my standard question:

Did you read my previous articles? 🤔 If not, then here they are: 👀

Ok, now let’s start with our main topic. 🧐

What is SwiftUI?

SwiftUI is a framework for building user interfaces in Swift, Apple’s programming language for developing apps for their platforms. It provides a set of tools and components that allow developers to create user interfaces for their apps with less code and in a more intuitive way.

One of the key features of SwiftUI is its declarative syntax. Rather than writing code that describes how to create a user interface step-by-step, developers can define the desired state of the user interface and let SwiftUI handle the details of how it should be displayed.

For example, instead of writing code to position and style a button, a developer can define the text, font, and color of the button and let SwiftUI handle the layout and appearance. This can make it easier to build and maintain complex user interfaces, especially when working with dynamic data or responsive layouts.

Key features of SwiftUI

We will see four key features of SwiftUI:

Declarative syntax

As mentioned before, SwiftUI’s declarative syntax makes it easier to build and maintain user interfaces. Developers can define the desired state of the UI using simple, readable code, and SwiftUI handles the details of how it should be displayed.

Live preview

SwiftUI includes a live preview feature that allows developers to see their user interface changes in real-time as they make them. This can speed up the development process and make it easier to iterate on designs.

Cross-platform support

With SwiftUI, developers can build user interfaces for all of Apple’s platforms using a single codebase. This can save time and reduce the complexity of building and maintaining apps for multiple platforms.

Integration with Swift

SwiftUI is built on top of Swift, Apple’s powerful and intuitive programming language. This makes it easy to integrate with existing Swift code and take advantage of the many benefits of the language.

Getting started with SwiftUI

If you’re new to SwiftUI and want to start building your own user interfaces, there are a few things you’ll need to know:

Xcode

To build SwiftUI apps, you’ll need to use Xcode, Apple’s integrated development environment for building apps for their platforms. Xcode includes everything you need to get started with SwiftUI, including templates, debugging tools, and a live preview feature.

Swift programming language

SwiftUI is built on top of Swift, so you’ll need to have a basic understanding of the language to get started. If you’re new to Swift, there are many resources available online, including Apple’s official Swift documentation and tutorials. Also you can find in my articles resources to learn Swift. The good news is that most of them are for free!

SwiftUI documentation and tutorials

Apple provides extensive documentation and tutorials for SwiftUI, including a Getting Started guide and a series of sample projects that demonstrate various aspects of the framework. These resources can be found on Apple’s developer website.

Coding Examples

In this section, you are gonna see basic examples.

Creating a text label

To create a text label in SwiftUI, you can use the Text view:

Text("Hello, world!")

This code will create a text label that displays the most famous string among programmers — “Hello, world!”.

Creating a button

To create a button in SwiftUI, you can use the Button view:

Button("Tap me!") {
     
     print("Button tapped!") 

}

This code will create a button that displays the string “Tap me!”. When the button is tapped, the code inside the closure will be executed, which in this case will print the message “Button tapped!” to the console.

Creating a list

To create a list in SwiftUI, you can use the List view:

struct ContentView: View { 
     
      var items = ["Item 1", "Item 2", "Item 3"] 
      var body: some View { 
          
          List(items, id: \.self) { 
               item in Text(item) 
      } 
   } 
}

This code will create a list that displays three items, with the text “Item 1”, “Item 2”, and “Item 3”. The id parameter specifies how to uniquely identify each item in the list, in this case by using the self property of each string. The closure inside the List view specifies how to display each item in the list, in this case as a text label.

These examples are just the tip of the iceberg when it comes to what you can do with SwiftUI. There are many more views, modifiers, and techniques to learn, but do not forget that it is just beginning. Don’t underestimate yourself! :)

Creating a custom view

To create a custom view in SwiftUI, you can define a new struct that conforms to the View protocol.

struct CustomView: View { 
       
     var text: String 
     var body: some View { 
         
         VStack { 
              
              Text(text)Image(systemName: "star.fill") 
    } 
  } 
}

This code defines a new view called CustomView that displays a text label and an image of a star. The text parameter is used to specify the text label to display.

The VStack view is used to stack the Text and Image views vertically. The systemName parameter of the Image view specifies the name of the system image to use, in this case "star.fill".

To use this custom view in another view, you can simply instantiate it and pass in the desired text:

struct ContentView: View { 

     var body: some View { 

         CustomView(text: "Hello, world!") 
   
   } 
}

This code creates an instance of CustomView with the text label "Hello, world!".

Using a `NavigationView`

To create a navigation interface in SwiftUI, you can use the NavigationView view.

struct ContentView: View { 

  var body: some View { 

     NavigationView { 

       List { 

         Text("Item 1")Text("Item 2") Text("Item 3") } .navigationTitle("My List") 

    } 
  } 
}

This code creates a NavigationView that contains a list of three items. The navigationTitle modifier is used to set the title of the navigation view to "My List".

Further example:

If you want to see how to create a 3D Slider using SwiftUI, you can check following URL:

https://github.com/RasulMammadov/3DSliderUI

Conclusion

As you can see, there are a lot of things to do using SwiftUI. It will make you strong iOS Developer if you know how to play with all of those three (ObjC, Swift and SwiftUI) languages.

Basically that is all from my side. I hope that this article helped you a bit. If you like my articles, if you think that they are useful, you can click on “Follow” button and share articles to reach more people. :)

Would you like to support me? You have couple of options: clap, comment, share, follow or buy me a coffee. 🙂

Don’t forget to follow us on twitter. 🥳

What is SwiftUI — Does it worth to learn it?

What is SwiftUI?

Key features of SwiftUI

Declarative syntax

Live preview

Cross-platform support

Integration with Swift

Getting started with SwiftUI

Xcode

Swift programming language

SwiftUI documentation and tutorials

Coding Examples

Creating a text label

Creating a button

Creating a list

Creating a custom view

Using a `NavigationView`

Further example:

Conclusion

Written by CodingRasi

No responses yet

What is SwiftUI — Does it worth to learn it?

What is SwiftUI?

Key features of SwiftUI

Declarative syntax

Live preview

Cross-platform support

Integration with Swift

Getting started with SwiftUI

Xcode

Swift programming language

SwiftUI documentation and tutorials

Coding Examples

Creating a text label

Creating a button

Creating a list

Creating a custom view

Using a NavigationView

Further example:

Conclusion

Written by CodingRasi

No responses yet

Using a `NavigationView`