Android App Development
iOS App Development
Flutter App Development
Cross Platform App Development
Hire on-demand project developers and turn your idea into working reality.
Big thanks to Webkul and his team for helping get Opencart 3.0.3.7 release ready!
Deniel Kerr
Founder. Opencart
Top Partners
SwiftUI is an enormous step towards Apple’s goal of getting everyone coding, simplifying the basics so everyone can spend more time on custom features that delight the users. It requires Xcode 11 and macOS Catalina, for which the Betas can be downloaded at the Apple developer portal.
It is the cross-platform that works across iOS, macOS, tvOS and watchOS and lets you replace Interface Builder (IB) and storyboards. IB and Xcode were separate apps before Xcode 4, and the seams still show every time you edit the name of an IBAction or IBOutlet or delete it from your code, and your app crashes because IB doesn’t see changes to code. SwiftUI also works with UIKit — like Swift and Objective-C.
IBAction
IBOutlet
Step 1. Open Xcode and either click Create a new Xcode project in Xcode’s startup window or choose File > New > Project.
Step 2. In the template selector, select iOS as the platform, select the Single View App template and then click Next.
Step 3. Enter “SwiftUIExample” as the Product Name, select SwiftUI for the user interface, and click Next.
Step 4. In the project navigator, open the SwiftUIExample group to see what you got: the old AppDelegate.swift is now split into AppDelegate.swift and SceneDelegate.swift.
SceneDelegate isn’t specific to SwiftUI, but this line is:
SceneDelegate
window.rootViewController = UIHostingController(rootView: ContentView()) 1 window.rootViewController = UIHostingController(rootView: ContentView())
UIHostingController creates a view controller for the SwiftUI view ContentView. Now, select ContentView.swift.
UIHostingController
ContentView.swift
By default, SwiftUI view files declare two structures. The first structure (ContentView) conforms to the View protocol and describes the view’s content and layout.
View
The second structure (ContentView_Previews) declares a preview for that view.
Step 5. In the canvas, click Resume to display the preview.
Inside the body the property, change “Hey Apple”.
body
As you change the code in a view’s body the property, the preview updates to reflect your changes.
If we are using the text fields of the same layout and design. Instead of duplicating the code we just wrote for other text fields, it’s better to extract the code to create a separate view for reuse.
Let’s name the struct LabelAndTextField and move the VStack code block like this:
@State
padding()
Now going back the ContentView. Create a text field by constructing a LabelAndTextField with the specified label name and place holder like below:
Vstack is used to add the layout in a vertical arrangement. Through VStack we can’t display all the information in a single view, so we will embed the stack in List. List make the view scrollable. and allows developers to quickly build a table or present rows of information in a single column.
Let’s name the struct ImageView and move the HStack code block like this:
Spacer() automatically fill up all available space on their axis of expansion, it takes up space automatically as add horizontally or vertically in a view. Now add ImageView in ContentView like this:
The SwiftUI provides a component called Button to create a button. It will be written as:
The action parameter takes in a closure, which will be performing an action when the button is tapped or pressed. Create another struct and name it SelectableButton like this :
Now add SelectableButton in ContentView as:
Navigation is fundamental to all applications. Now embed the entire form in a navigation view like this:
So, if the form may too long for the screen and to view the entire form, hit the Run button to run the application and then you can scroll through the form. To initiate the ContentView in ContentView_Previews struct like this:
ContentView
ContentView_Previews
By this, the preview the entire form without running the app as:
. . . . . . . . . . . . . . . .
Thanks for reading, I hope this blog will help you and give a basic idea of how to use SwiftUI.
If you have any query please ask me on the comment. Stay cool and updated. 🙂
Your email address will not be published. Required fields are marked*
Name*
Email*
Save my name email and website in this browser for the next time I comment.
Be the first to comment.
We use cookies to personalize your experience. By continuing to visit this website you agree to our use of cookies. Learn more about privacy policy
Name
Email
Subject
Enquiry or Requirement
If you have more details or questions, you can reply to the received confirmation email.