We will learn about displaying a ui website on iOS by giving an example in Swift. We also use that example in Xcode to learn how to use the ui website display control in iOS, in Swift, to load the url or embedded websites into an app.

Display UI website on iOS

In iOS apps; The webView control is used to display embedded websites within an app, or the HTML web content associated with an app, and the Webview control on iOS acts as an HTML iFrame to display the content of a website within an app.

In the webview of iOS apps, we practically support the display of previous and next pages (back and forward commands). In cases where the user uses webview to navigate multiple pages; It is better to be able to navigate to the previous and next pages; It should be noted that by default; This feature is not available in our applications.

If we use webview for embedded websites in our applications; Its appearance will be similar to the following.

We can now use a web display in our applications by adding a UIWebView class reference.

Here is an example of how to use a website display in your iOS apps.

Create an iOS website display app in Swift

To create a new project in Xcode on iOS, open Xcode from the application folder list. After opening Xcode, the welcome window will open as shown below. In the Welcome window, click on the second option, “Create a new Xcode Project”; Click (create a new Xcode Project) or select the File New Project path.

After selecting “Create a new Xcode project”, a new window will open in which we must select our template.

The new Xcode window includes several built-in application templates to implement the usual type of iOS apps, such as page-based apps, tab-based apps, games, spreadsheet apps, and more. These templates have a preset interface and source code files. .

For example, displaying a device on iOS, we have one of the most basic pattern of the program, which is “app only display”; We will use. To select this item, go to the iOS section on the left, select the application from the select section, and in the main part of the window that opens, select “single view application” and click on the next button, as shown below. .

After clicking Next, we will see a window like the one below, in this case we have to mention the project name and other details for our program.

Product name: “iPhone Article” (split screen)

The name we enter in the Product Name section is used for the project and application.

Organization name: “Tutlane”

You can enter the name of the organization or your name in this field; Of course you can leave that section blank.

Organization Identifier): “com.developersocociety)”

If you do not have an enterprise ID, enter com.example.

Bundle Identifier: This section is automatically generated based on the terms we entered in the product name and organization ID.

Language: “Swift”

Select the language type “Swift” because we want to develop applications using swift.

Universal (devices): “Universal”

Select the Devices option as Universal This means that this app is for all Apple devices; If you need to run the app for iPad only, you can select the iPad option to restrict your app to running only on iPad devices.

Use core Data: Not selected

This option is used for database operations. Select this option if you are doing any database-related operations in your application, otherwise do not select this option.

Include Unit Test: Not selected

If you need unit tests for your application, select this option otherwise leave it unselected.

Includes UI tests: not selected

Select this option if you need UI tests for your application, otherwise do not select it.

After completing the options, click the Next button as shown below.

When we click the Next button; A new window will open in which you must use the location where you want the new project to be saved; Let’s choose. Once you have selected the new project storage location; As shown below; Click the Create button.

After clicking the Create button, Xcode opens and creates a new project. In our project, Main.storyboard and ViewController.swift are the main files used to design the user interface and maintain the source code.

Main.storyboard – which is the visual interface editor and this file is used to design the application user interface.

ViewController.swift – which contains the source code of our application and we use this file to write any code related to our application.

Now select the Main.storyboard file in the project, until Xcode opens the visual interface editor as shown below.

Now select the ViewController.swift file from your project, which looks like the following:

Add iOS UI controls to the screen in Swift

We are now adding controls to our application for that library of available objects. The object library appears at the bottom right of Xcode. If you did not find the object library, as shown below; Click the button that is the third button in the library selection bar on the left. (On the other hand, you can select the View Utilities Show Object Library path).

As we have suggested; Our interface is the Main.storyboard file, so open the Main.storyboard file. Now look for WebView in the Objects Library in the Filter box and then drag and drop WebView into the ViewController in the Main.storyboard, as you can see below.

Link UI controls in iOS to Swift language coding

We now establish the connection between the controls and the ViewController.Swift code. To do this, click on the Assistant button, which is located in the lower right corner of the Xcode toolbar (two tangled circles).

To map the controls, hold down the Ctrl key on the keyboard, then drag Web View from the interface and drop it into the DetailViewController.swift file, as shown below.

When mapping controls to the ViewConrtoller.swift file; Then we write custom code to show the content of the website display. When we wrote the required functions; Our ViewConrtoller.swift file code is as follows:

import UIKit

class WebViewController {

@IBOutlet weak var WebView: UIWebView!

Override func viewDidLoad () {

super.viewDidLoad ()

let sindexPaths = NSURL (string: “http: // tutlane.com/”);

let request0bj = NSURLRequest (URL: url!);

WebView.loadRequest (request0bj);

}

Override func didRecieveMemoryWarning () {

Super.didRecieveMemoryWarning ()

// Dispose of any resources that can be recreated.

}

}

Now run the program and check its output.

 To run the program; Select the required emulator (here we have used iPhone Six S Plus) and click the Play button, which is similar to the one in the lower left corner of the Xcode toolbar.

If the program is running, if the download is done and the page is displayed, it means that it is good and your program is working properly; Otherwise we need to add the permission settings to the info.plist file.

To make changes, you need to go to the info.plist file in your project, which has the “App Security Security Settings” feature in the last row. In this section, click the Add button and the “Allow Arbitrary Loads” feature. (Allow for custom uploads) in the text box on the left; Change to Yes.

Then select “Exception Domains” and it has the “profile” feature and you have to put the URL to the right that you want to access. We want to access www.tutlane.com here, so we entered this URL.

When we have completed all the configurations; Run the program using the Play button located in the Xcode editor.

App Output View iOS App ui website in Swift Language

Below you can see the result of running WebView in Swift.

This way we can use the UIF website display control in Swift to display websites embedded within an iOS app based on our needs.