SwiftUI - Advanced Components Part 2

Welcome back to the ongoing series on SwiftUI. Previously, we have looked at some basic as well as some advanced components in SwiftUI. In this article, we will continue discussing some more advanced components in SwiftUI that will help you build your awesome iOS apps.

Reusable Custom Views

Creating reusable components in SwiftUI is a super easy task. A struct can be used directly in another component as a View. Components can also accept parameters that make them customizable according to requirements.


struct MyAwesomeComponent: View {
    var body: some View {
            CustomView(text: "Hello World!")
        }
    }
}


struct CustomView: View{
    var body: some View{
        ZStack{
            Color(uiColor: .systemBlue)

            VStack{
                Text("This is a custom view")
                Image(systemName: "clock")
            }

        }
    }
}


TabView

A view that allows the user to switch between multiple child views and access different forms of data without being navigated out of the screen in focus.

Different child components, also known as tabs,  can contain entire reusable views which can be done with the help of reusable components. The buttons that help in navigating between different tabs are highly customizable, meaning, they can have custom views and badges that make information delivery faster and clearer for the user.

TabView {
    Text("This is first tab")
        .font(.title)
        .tabItem({
            Image(systemName: "calendar")
            Text("Calendar")
        })
        .tag(0)
    CustomView(text:"I am the second tab!")
        .badge(5)
        .tabItem({
            Image(systemName: "clock")
            Text("Timer")
        })
        .tag(1)
}


Lazy Components

A set of special components provided by SwiftUI -

  • LazyHStack
  • LazyVStack
  • LazyHGrid
  • LazyVGrid

In these components, the child components are loaded lazily. This means that the view does not create items until it needs to render them onscreen.

ScrollView {
    LazyVStack(alignment: .center) {
        ForEach(1...100, id: \.self) {
            Text("Item number \($0)")
        }
    }
}

A few things can be inferred from the above example-

  • VStack has all 100 text views attached to it. This means that there is no optimization.
  • LazyVstack has only 31 text views attached. This means that the views are getting recycled just like in a table view.

In conclusion, Lazy stacks and grids can be used to render large sets of data that may include pagination as it is a significantly more optimized method of implementing lists in SwiftUI.


Conclusion

In this article, we have discussed some more advanced components used in SwfitUI that will help you design your next app's user interface more efficiently. Reusable components prevent code repetition and simplify your overall code. Tab views allow you to display separate forms of data without navigating the user to another screen. Lastly, lazy components allow a very efficient implementation of rendering of large sets of data.

We will continue discussing more components offered by SwiftUI in the upcoming parts of this series. So, stay tuned!

Harsh Siriah

Harsh Siriah

Hi, I'm Harsh! A geek with a love for dogs & mobiles.
Pune, India