What You Need to Know
When learning SwiftUI, there are certain components that are essential to know when building an iOS application.
These components are the building blocks for creating a polished and functional app that is easy to navigate and use. In this article, we will go over some of the key components that you should be familiar with when working with SwiftUI.
1. TabBar
Tab bars are a common feature in iOS apps and are used to navigate between different sections of the app. In SwiftUI, you can use the TabView to create a tab bar. The example above shows how to create a tab bar with four tabs, each tab representing a different view. You can customize the appearance of the tab bar by changing the preferredColorScheme and accentColor properties.
TabView {
HomeView()
.tabItem {
Image.newspaper
Text(SC.tabHeadline.value)
}
SearchView()
.tabItem {
Image.magnifyingglass
Text(SC.tabSearch.value)
}
SaveNewsView()
.tabItem {
Image.bookmark
Text(SC.tabSave.value)
}
SettingView()
.tabItem {
Image.gear
Text(SC.tabSetting.value)
}
}
.preferredColorScheme(isDarkMode ? .dark : .light)
.accentColor(.coral)2. Title
The title of a view is used to label the view and provide context to the user. In SwiftUI, you can set the title of a view by using the navigationTitle modifier. The example above shows how to set the title of a view to "Home".
.navigationTitle("Home")3. TableView & CollectionView Change to List
SwiftUI replaces UITableView and UICollectionView with List, which is a more powerful and flexible container for displaying data. The example above shows how to create a List view by using the List view and passing in an array of data. You can also customize the appearance of the List view by using different listStyle modifiers.
List(viewModel.topHeadline, id: \.title) { article in
// this will be loop your data array
}Components you need to know, like style, for list row background you can set in view row.
//: Normal (or without this it will be same)
.listStyle(.automatic)
or
.listStyle(DefaultListStyle())
//: Group with padding left and right
.listStyle(.insetGrouped)
or
.listStyle(InsetGroupedListStyle())
//: Group without padding
.listStyle(.grouped)
or
.listStyle(GroupedListStyle())
//:
.listStyle(.inset)
or
.listStyle(InsetListStyle())
//: with arrow hidden
.listStyle(SidebarListStyle())
or
.listStyle(.sidebar)
//: full side like a tabbleView
.listStyle(PlainListStyle())
or
.listStyle(.plain)If you want to hide the line separator
.listRowSeparator(.hidden)4. viewWillAppear to onAppear
In UIKit, viewWillAppear is used to perform tasks before a view appears on the screen. In SwiftUI, the equivalent method is onAppear. The example above shows how to use onAppear to perform tasks when a view appears on the screen.
.onAppear { //: Get Data on this page
...
} //: On Appear5. UILabel Change to Text
In UIKit, UILabel is used to display text. In SwiftUI, the equivalent component is Text. The example above shows how to create a Text view and set its content to "New Text String".
Text("New Text String")6. UITextField Change to Texfield
In UIKit, UITextField is used to create a text field for user input. In SwiftUI, the equivalent component is TextField. The example above shows how to create a TextField view and customize its appearance by using different modifiers, such as padding, background, and disableAutocorrection.
TextField("placeholder", text: $valueBinding)
.padding()
.background(Color.coral.opacity(0.5))
.disableAutocorrection(true)7. UIButton To Button
In UIKit, UIButton is used to create buttons. In SwiftUI, the equivalent component is Button. The example above shows how to create a basic Button view and set an action to be performed when the button is tapped. You can also customize the appearance of the button by applying different modifiers.
Button(action: {
// Code to be executed when button is tapped
}) {
Text("Button Label")
}In conclusion, SwiftUI offers a lot of powerful and flexible components that can be used to create a polished and functional iOS app. By becoming familiar with these components and understanding how to use them, you will be able to build a high-quality app that is easy to navigate and use.
8. Save Local Data
In SwiftUI, to save local data, you can use the UserDefaults class, just like you would in UIKit. The UserDefaults class provides a convenient way to store small amounts of user data. It uses a key-value store to save data, which makes it easy to save and retrieve data.
Alternatively, you can use AppStorage as a property wrapper on top of UserDefaults that provides a more SwiftUI-friendly API for storing and retrieving user data. AppStorage automatically saves and retrieves data in the background, so you don't need to manually call save() or load() on the data.
Here’s an example of how you can use AppStorage to store and retrieve a user's name:
@AppStorage("username") var username: String = ""Additionally, there is another option to save local data, by using CoreData or Realm which are also popular alternatives to saving data locally in a mobile app.
It’s important to note that the choice of which method to use depends on the specific use-case and the complexity of the data, UserDefaults is good for small amount of simple data, while CoreData or Realm is more suitable for more complex data with relationships.
9. Navigation
In the navigation of Swift, you should know that it is used like “navigationController?.pushViewController(…” or “navigationController?.present(…”, but in SwiftUI it is “navigationLink””
// Normal Navigation
NavigationLink {
// Navigation To ...
DetailNewsView(news: article)
} label: {
// Where the action
CustomView()
}
///------------------------------------------///
// Navigation overlay view, If you do not need right arrow and then use this
.overlay {
NavigationLink(destination: DetailNewsView(news: article)) { EmptyView()}.opacity(0)
}
In SwiftUI, navigation is done using the “NavigationView” and “NavigationLink” components. The NavigationView acts as a container for all the views in the navigation stack, while the NavigationLink is used to push new views onto the stack or present them modally. When a NavigationLink is tapped, it triggers a transition to the destination view, which can be defined inline or as a separate view. Additionally, SwiftUI also provides the “NavigationButton” for programmatically triggering navigation and “Sheet” to present a view modally. Navigation in SwiftUI also allows for passing data between views using the “environmentObject” property and handling navigation actions using the “onTapGesture” or “onAppear” method.
My Swift UI news app template has been sold on the CodeCanyon website.
https://codecanyon.net/item/news-feed-app-using-swiftui/43068768 😄
