How To Work With SwiftUI Framework
In this article, we are going to learn about swiftUI framework and how to use in project. This article will gives us a overview of how SwiftUI works in swift.
If you want to learn about the basics of SwiftUI, I request you to read this article for reference.
In this project, we are going to implement a List,VStack,State and much more which helps user to learn about SwiftUI Topics.
Steps To finish the project:
— Write Model class(Topic) which contains id,name,image and link to display topics.
— Using SwiftUI’s ContentView, use toggle to show SwiftUI’s tutorial links with video Tutorial or without video Tutorial.
— Each tableView Row contains image,name arranged in VStack and also make them navigate to next screen.
— Whenever tableViewCell is clicked, it will navigate to new contentView named(TopicDetail) which shows tutorial name and its link for reference.
1). Creating Model class (Topic.Swift)
- id — To make each record or each item unique, we have to use identifiable to make sure every record is unique.
- thumbnail — thumbnail is used to store a imagename for each record.
- externalLink —externalLink is used to store link of each topic’s tutorials
- description —short description about each topics
- Assign static values using Topic model class.
- Create a tutorialTopics which consists of array of Topic.
To work with Preview Screen:
- As you work in the design canvas, everything you edit is completely in sync with the code in the adjoining editor. Code is instantly visible as a preview as you type, and any change you make to that preview immediately appears in your code.
- To see changes live in preview screen, we also have to give static values to test screens.
- Assign static values using Topic model class.
- Create a testTopics which consists of array of Topic for preview screens.
2) Add necessary images in Assets.xcassets
- Add necessary images which we have used for thumbnail value in our Topic.swift File
- Make sure thumbnail string value and image name is same, or else project will crash.
3) Working in ContentView.swift File to perform logic to show data
State:
- A persistent value of a given type, through which a view reads and monitors the value.
- SwiftUI manages the storage of any property you declare as a state. When the state value changes, the view invalidates its appearance and recomputes the
body. Use the state as the single source of truth for a given view. - A
Stateinstance isn’t the value itself; it’s a means of reading and mutating the value. To access a state’s underlying value, use itsvalueproperty. - You can get a binding from a state with the `binding` property, or by using the `$` prefix operator.
- We have declared State property to change value based on toggle status.
Body:
- Inside body we have used an NavigationView, and given navigation title as “SwiftUI Topics”
- We have used
toggleinstance to make toggle appear in UITableView and whenever toggle is On it will change state value showVideoTopics to true. - We have created a list based on toggle status, if toggle is on it makes the list show all topics(Both videoTopics and tutorialTopics).
- We have used
ForEachto make list updating till numbers of elements in both videoTopics and tutorialTopics . - We have implemented each cell’s view in seperate swift file TopicRow.Swift
- Send with Topic values to custom defined View(TopicRow)
- To show previews we have used the testTopics Array values which we created in Topic Model class file.
4) Working in TopicRow.Swift File to implement customizes UI for Cells in TableView
- We have received Topic values of respective cell from ContentView.swift
Body:
- In TopicRow’s file, we have implemented NavigationButton which helps to navigate to seperate view which implemented in TopicDetail.swift File.
- We also have to send respective Topic details to page which is navigated Page after pressing each cell in TableView list.
- We have used
VStackwhich is aligned in center , it also contains both Image and Text. - Image is customized by using
resizablewhich will make image resizable for all screens.framewhich used to give width and height of Image and we have setaspectRatio(contentMode: .fit)which makes image have aspectRatio having image contentMode as Fit.cornerRadiuswhich makes image corner reduced based on given value. - Text is customized by using
Font and Colorwhich makes increase font size and color as black.lineLimiteris property which is used to give how many lines text should be displayed. - For preview, we have only used one value from array of testTopics in debug.
5) Navigation to next page and UI implementation
- We have received Topic value from the respective cell in TableView List
Body:
- We have used
VStackwhich is in leading alignment, it also contains Text(topic.description) and Text(topic.externalLink). - For Text(topic.description), we have customized with
lineLimiterproperty which is used to give how many lines text should be displayed. lineLimiteris property again applied to the Text(topic.externalLink) to show links in two lines if it exceeds one line.- By using the external link, we access the SwiftUI tutorial topics in Apple developer page.
5) Conclusion:
Now, Build and run project where you try to on the toggle, it will automatically update the SwiftUI Topics.By clicking on each cell will show detailed description of links and description about the particular topic.
This project is updated for Xcode 11 and Swift 5.0 . You can find this project in my github link.
I hope you found this article helpful. If you did, please don’t hesitate to clap or share this post on Twitter or your social media of choice, every share helps me to write more. If you have any queries, feel free to comment below and I’ll see what I can do.Thanks.
