Category: SwiftUI

The SwiftUI TabView component allows the user to navigate between different child views either by selecting tab items located in a tab bar or, when using the page view tab style, by making swiping motions. This chapter will demonstrate how to implement a TabView based interface in a SwiftUI app. An Overview of SwiftUI TabView…

The previous chapter introduced LazyHGrid, LazyVGrid, and GridItem views and explored how they can be used to create scrollable multicolumn layouts. While these views can handle large numbers of rows, they lack flexibility, particularly in grid cell arrangement and positioning. In this chapter, we will work with two grid layout views (Grid and GridRow) that…

In previous chapters we have looked at using stacks, lists and outline groups to present information to the user. None of these solutions, however, are particularly useful for displaying content in a grid format. With the introduction of iOS 14, SwiftUI now includes three views for the purpose of displaying multicolumn grids within a user…

The previous chapter covered the List, OutlineGroup and DisclosureGroup views and explored how these can be used to visually present hierarchical information within an app while allowing the user to selectively hide and display sections of that information. This chapter will serve as a practical demonstration of these features in action through the creation of…

The preceding chapters explored the use of the SwiftUI List view to display information to users in an ordered manner. Lists provide a way to present large amounts of information to the user in a navigable and scrollable format. The features of the List covered so far, however, have not introduced any way to display…

The previous chapter introduced us to the SwiftUI NavigationSplitView component and described how multicolumn navigation is implemented and configured. This chapter will take what we have learned about NavigationSplitView and use it to create an example iOS app project. About the Project This tutorial will create the three-column split navigation app illustrated in the previous…

The NavigationStack and NavigationLink views outlined in the previous chapters are ideal for adding navigation when each destination view needs to fill the entire device screen. While this is generally the preferred navigation paradigm when working on most iOS devices, it doesn’t take advantage of larger display configurations available on the iPad or the iPhone…

The previous chapter introduced the List, NavigationStack, and NavigationLink views and explained how these can be used to present a navigable and editable list of items to the user. This chapter will create a project that provides a practical example of these concepts. About the ListNavDemo Project When completed, the project will consist of a…

The SwiftUI List view provides a way to present information to the user in the form of a vertical list of rows. Often the items within a list will navigate to another area of the app when tapped by the user. Behavior of this type is implemented in SwiftUI using the NavigationView and NavigationLink components.…

The chapter entitled “SwiftUI Stacks and Frames” touched on the basics of alignment in the context of stack container views. Inevitably, when it comes to designing complex user interface layouts, it will be necessary to move beyond the standard alignment options provided with SwiftUI stack views. With this in mind, this chapter will introduce more…