Swift UIKIT Style, iPhone App Development, Creating Page Navigation Apps

In this tutorial, we will learn how to develop a simple iPhone app using Swift and UIKIT. This app includes navigation between multiple pages. Through this course, you will gain an understanding of the Swift language, learn the basic structure of UIKIT, and have the experience of creating a functional app.

1. Project Setup

First, open Xcode and create a new project. Select the “Single View App” template and enter the following information.

  • Product Name: PageTransitionApp
  • Organization Name: YourName
  • Organization Identifier: com.yourname
  • Language: Swift
  • User Interface: Storyboard

After creating the project, click the Main.storyboard file in the left sidebar of Xcode to access the storyboard.

2. UI Configuration

The basic ViewController will be created in the storyboard. We will implement navigation to other pages (views) through this ViewController.

As the first step in UI configuration, we need to set up the first page. Follow the steps below.

2.1 Creating the First Page

  1. Add a Label and a Button to the first ViewController in the storyboard.
  2. Set the text of the Label to “First Page” and set the text of the Button to “Next Page”.

2.2 Creating the Second Page

  1. Click on the ViewController in the storyboard window, then select Embed in > Navigation Controller from the Editor menu.
  2. Select the root ViewController of the newly created Navigation Controller and add a new ViewController. This view will be the second page.
  3. Also, add a Label and a Button to the second ViewController. Set the text of the Label to “Second Page” and the text of the Button to “Go Back”.

3. Writing Code

Now it’s time to add the code for page navigation in the ViewController. Open the ViewController.swift file and add the following code.

    import UIKit

    class ViewController: UIViewController {

        override func viewDidLoad() {
            super.viewDidLoad()
        }

        @IBAction func nextPage(_ sender: UIButton) {
            let secondViewController = storyboard?.instantiateViewController(identifier: "SecondViewController") as! SecondViewController
            self.navigationController?.pushViewController(secondViewController, animated: true)
        }
    }

3.1 Writing Code for the Second Page

Next, we will add the code for the second page (i.e., SecondViewController.swift).

    import UIKit

    class SecondViewController: UIViewController {

        override func viewDidLoad() {
            super.viewDidLoad()
        }

        @IBAction func goBack(_ sender: UIButton) {
            self.navigationController?.popViewController(animated: true)
        }
    }

4. Connecting the Storyboard

Now we need to connect each button to the code. Return to the storyboard and follow these steps.

  1. Click the “Next Page” button in the first ViewController, then hold down the Ctrl key and drag to connect it to the nextPage action in ViewController.swift.
  2. Similarly, connect the “Go Back” button in the second ViewController to the goBack action.

5. Running the App

All settings are complete. Now it’s time to run the app in the simulator. Once the app is running, clicking the “Next Page” button on the first page will navigate to the second page, and clicking the “Go Back” button on the second page will return to the first page.

6. Conclusion

In this tutorial, we developed a simple iPhone app with page transition functionality using Swift and UIKIT. We learned about the connections between the storyboard and code, data transfer between ViewControllers, and page navigation. I hope this tutorial helped you better understand the basic usage of Swift and the structure of UIKIT. I encourage you to continue developing into more complex apps.

If you have any questions or feedback, please leave a comment. Thank you!