Developing iPhone Apps with Swift and UIKit: Creating a Simple Web Browser using Web View

iPhone app development has become an essential skill for many developers. In particular, using the Swift language and UIKit framework to develop iOS applications is very common. In this post, we will explore the basic methods for developing iPhone apps using UIKit, and how to create a simple web browser using UIWebView or WKWebView.

1. Setting Up the iOS Development Environment

To start iOS app development, you need to install the following tools:

  • Xcode installation: A free app that can only be used on macOS, it is essential for developing iPhone and iPad apps.
  • Swift Language: A programming language created by Apple, effective for developing iOS, macOS, watchOS, and tvOS applications.
  • An iPhone or iPad for development: You can test apps on a real device. Virtual devices are also possible, but real testing is important.

2. Understanding the Basic UIKit Structure

UIKit provides various components necessary to construct the user interface of the application. You can design an app to interact with users using various components like UIViewController, UIView, UILabel, UIButton, etc.

2.1. UIViewController

Most iOS apps are built on top of UIViewController. UIViewController is a class that represents a screen. Each view controller manages a view and its data and handles user input.


class MyViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        // Method called when the view is loaded
    }
}

2.2. UIView

UIView represents a rectangular area on the screen and is the fundamental unit that makes up each element. UI components such as buttons, labels, and images are created by inheriting from UIView.

3. Creating a Web Browser Using WKWebView

Now let’s create a simple web browser using a web view. WKWebView is a class used to display web content provided by Apple. It performs better than UIWebView.

3.1. Creating a Project

Open Xcode and create a new project. Select the “App” template, set the language to Swift, and choose UIKit. Name your project and proceed.

3.2. Adding WKWebView

Let’s create a simple UI in the storyboard. Add a WKWebView to the screen and adjust its position using NSLayoutConstraints.


// Import UIKit and WebKit
import UIKit
import WebKit

class MyWebViewController: UIViewController {
    var webView: WKWebView!

    override func loadView() {
        webView = WKWebView()
        view = webView
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        // Load the desired URL
        let url = URL(string: "https://www.apple.com")!
        webView.load(URLRequest(url: url))
    }
}

4. Receiving User Input

In the web browser, you can implement functionality that allows users to directly enter a URL. For this, we will add a UITextField to load the URL entered by the user.


class MyWebViewController: UIViewController {
    var webView: WKWebView!
    var textField: UITextField!

    override func loadView() {
        let containerView = UIView()
        webView = WKWebView()
        textField = UITextField()
        textField.borderStyle = .roundedRect

        containerView.addSubview(textField)
        containerView.addSubview(webView)

        textField.translatesAutoresizingMaskIntoConstraints = false
        webView.translatesAutoresizingMaskIntoConstraints = false

        NSLayoutConstraint.activate([
            textField.topAnchor.constraint(equalTo: containerView.topAnchor, constant: 20),
            textField.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 20),
            textField.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -20),
            webView.topAnchor.constraint(equalTo: textField.bottomAnchor, constant: 20),
            webView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor),
            webView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
            webView.trailingAnchor.constraint(equalTo: containerView.trailingAnchor)
        ])

        view = containerView
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        // Load the default URL
        let url = URL(string: "https://www.apple.com")!
        webView.load(URLRequest(url: url))
        setupTextFieldAction()
    }

    private func setupTextFieldAction() {
        textField.addTarget(self, action: #selector(loadWebPage), for: .editingDidEndOnExit)
    }

    @objc func loadWebPage() {
        guard let urlString = textField.text, let url = URL(string: urlString) else { return }
        webView.load(URLRequest(url: url))
    }
}

5. Designing Additional Features for the App

Let’s implement additional features in the web browser. It’s good to add functionality for the user to refresh the page and navigate back and forward. To do this, we will add three UIButton.


override func loadView() {
    let containerView = UIView()
    webView = WKWebView()
    textField = UITextField()
    textField.borderStyle = .roundedRect

    let refreshButton = UIButton(type: .system)
    let backButton = UIButton(type: .system)
    let forwardButton = UIButton(type: .system)

    refreshButton.setTitle("Refresh", for: .normal)
    backButton.setTitle("Back", for: .normal)
    forwardButton.setTitle("Forward", for: .normal)

    containerView.addSubview(textField)
    containerView.addSubview(webView)
    containerView.addSubview(refreshButton)
    containerView.addSubview(backButton)
    containerView.addSubview(forwardButton)

    // Auto Layout setting omitted...

    refreshButton.addTarget(self, action: #selector(refreshPage), for: .touchUpInside)
    backButton.addTarget(self, action: #selector(goBack), for: .touchUpInside)
    forwardButton.addTarget(self, action: #selector(goForward), for: .touchUpInside)
}

@objc func refreshPage() {
    webView.reload()
}

@objc func goBack() {
    if webView.canGoBack {
        webView.goBack()
    }
}

@objc func goForward() {
    if webView.canGoForward {
        webView.goForward()
    }
}

Conclusion

In this article, we explored how to create a simple web browser using Swift and UIKit. Based on an understanding of basic UIKit components, we learned how to handle WKWebView and user input. I hope this example serves as a good foundation for grasping the fundamental concepts of iOS app development and that you can expand your app through additional features.

Continue to enhance your use of Swift and UIKit through a variety of projects. Happy Coding!