Search icon
Arrow left icon
All Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletters
Free Learning
Arrow right icon
Elevate SwiftUI Skills by Building Projects

You're reading from  Elevate SwiftUI Skills by Building Projects

Product type Book
Published in Sep 2023
Publisher Packt
ISBN-13 9781803242071
Pages 268 pages
Edition 1st Edition
Languages
Author (1):
Frahaan Hussain Frahaan Hussain
Profile icon Frahaan Hussain

Table of Contents (12) Chapters

Preface 1. Chapter 1: Swift and SwiftUI Recap 2. Chapter 2: iPhone Project – Tax Calculator Design 3. Chapter 3: iPhone Project – Tax Calculator Functionality 4. Chapter 4: iPad Project – Photo Gallery Overview 5. Chapter 5: iPad Project – Photo Gallery Enhanced View 6. Chapter 6: Mac Project – App Store Bars 7. Chapter 7: Mac Project – App Store Body 8. Chapter 8: Watch Project – Fitness Companion Design 9. Chapter 9: Watch Project – Fitness Companion UI 10. Index 11. Other Books You May Enjoy

iPhone Project – Tax Calculator Functionality

In this chapter, we will work on implementing the tax calculation and page navigation functionality in our first project, the tax calculator. In the previous chapter, we looked at the design of the calculator and broke it down into two views and all the components required. We then implemented all the components using SwiftUI. At the end of the previous chapter, we effectively only had a fancy wireframe. Now, we will implement all the functionality to provide navigation between the two views, calculating the tax breakdown and displaying the calculation.

This chapter will be split into the following sections:

  • Navigating from ContentView to ResultsView
  • Input validation
  • Calculating tax breakdown
  • Extra tasks

By the end of this chapter, you will have created a fully functional tax calculator that can be used as a foundation. I’ll provide exercises as we reach the end of the chapter to implement more...

Technical Requirements

This chapter requires you to download Xcode version 14 or above from Apple’s App Store.

To install Xcode, just search for Xcode in the App Store, and select and download the latest version. Open Xcode and follow any additional installation instructions. Once Xcode has opened and launched, you’re ready to go.

Version 14 of Xcode has the following features/requirements:

  • Includes SDKs for iOS 16, iPadOS 16, macOS 12.3, tvOS 16, and watchOS 9
  • Supports on-device debugging in iOS 11 or later, tvOS 11 or later, and watchOS 4 or later
  • Requires a Mac running macOS Monterey 12.5 or later
  • For further information regarding the technical details, please refer to Chapter 1.

The code files for this chapter and the previous chapter to use as a base can be found here: https://github.com/PacktPublishing/Elevate-SwiftUI-Skills-by-Building-Projects

Navigating from ContentView to ResultsView

In this section, we will finally implement the navigational system for moving from ContentView to ResultsView and back again.

If you recall back to the previous chapter, when viewing the UI for the ResultsView, we were forced to use the Live Preview Window instead of running the application. The reason was that there was no functionality for navigating from ContentView to ResultsView. We have already added the button for calculating the tax, but we need to implement the code for the button triggering the navigation.

First, we need to wrap our VStack in ContentView in a NavigationView. The NavigationView allows us to present a stack of views which is very useful for navigation, as it effectively has a history of all previous views, allowing an easy and extendable navigation system:

import SwiftUIstruct ContentView: View
{
    @State private var salary: String = ""
    var body: some...

Validating salary input

As of now, if you press the Calculate Tax button, it takes the user to the results page from the front page. However, it does this regardless of input, so it will go to the next page even if there is no salary. The following validation checks must be done for it to be an acceptable value:

  • Does it contain a value that is a number?
  • Is the value above 0 (this rules out negatives)?

You might be wondering why we can’t just check whether the salary is above 0 as we have chosen a decimal keypad. There are two main reasons for this:

  • The user can insert decimal points in a way that makes the input Not a Number (NaN) – for example, 4.5.6...
  • Even though the user cannot directly type text due to the keyboard being a decimal pad, they can still copy it from another application and paste it into our calculator, thus breaking the number-only TextField. You may think it’s worth just disabling pasting but it’s important...

Calculating tax breakdown

In the previous chapter, we passed through the salary variable, but we still need to calculate the tax. I will be doing it in line with the UK income tax rates of 2023/2024, but this can be adapted easily for any other tax system. In the following table, we have the tax rates for 2023/2024:

Income

Tax rate

Up to £12,570

0%

Personal allowance

£12,571 to £37,700

20%

Basic rate

£37,701 to £150,000

40%

Higher rate

over £150,000

45%

Additional rate

Table 3.1 – Tax brackets

As there are brackets and not a single fixed tax...

Extra tasks

Now that the application is complete, here is a list of tasks for you to complete to enhance your application and also to test your knowledge of the concepts learned in this chapter:

  • Show an error when submitting an invalid salary
  • Formatting salary and tax components with commas
  • Abstracting tax brackets and percentages to make the app more dynamic
  • Pie chart labeling
  • Different types of tax
  • Corporation tax
  • Inheritance tax
  • Provide more inputs for the current salary calculator such as pension contributions and student loans
  • Back button styling

Note

If at any point you require help, feel free to join my Discord group at https://discord.gg/7e78FxrgqH.

We will summarize what we have covered in this chapter. However, before that, I will provide additional code for the extra tasks for you to implement at your own leisure.

Different tax options

To add different tax options to your code, you can modify ResultsView to include...

Summary

In this chapter, we implemented all the calculator’s functionality. We linked all the UI components that we implemented in the previous chapter. First, we provided a means to navigate to and from ResultsView. Then, we checked the salary input to make sure it was above zero and didn’t contain any invalid characters. Once validated, we passed the salary from ContentView to ResultsView. Using the salary, we calculated the tax breakdown in ResultsView, fixed an annoying error, and renamed ContentView to FrontView. Finally, we also implemented a few extra tasks for our tax calculator app.

In the next chapter, we’ll start our next application, which will be a photo gallery for the iPad. We will leverage many of the skills learned already, so feel free to take a moment and go back over anything you didn’t fully understand.

lock icon The rest of the chapter is locked
You have been reading a chapter from
Elevate SwiftUI Skills by Building Projects
Published in: Sep 2023 Publisher: Packt ISBN-13: 9781803242071
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at €14.99/month. Cancel anytime}