Day 10

 

WebView

 

• Webview is used to display web pages
• iOS provides WebKit which contains WKWebView that can display both local/web content on the app
• Replacing the textview in about page to webview displaying a HTML.
• Remove the TextView and add WebView to the AboutViewController in Main.Storyboard
• Create IBOutlet in AboutViewController for WebView and link it to the WebView in the Main.Storyboard

 

How to load an HTML in WebView

 

• Bundle gives the path to the HTML file included in the app
• That path is used to create a URL
• URL is given to the URLRequest to generate a request
• That request is then given to load to load the HTML page on the WebView

 

@IBOutlet weak var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        
        if let htmlPath = Bundle.main.path(forResource: "BullsEye", ofType: "html") {
            let url = URL(fileURLWithPath: htmlPath)
            let request = URLRequest(url: url)
            webView.load(request)
        }
    }

 

 

AutoLayout

 

• Currently, the app doesn’t look well on devices with bigger screens like iPhone 7, iPhone 8.
• Using AutoLayout we can make sure the app is compatible with all the screen sizes.
• AutoLayout allows us to select any view on the screen and set up the rules for how the size, position, or location of this view can be in relation to other items.
• These rules are called constraints.
• Here are the screens after adding constraints on both the ViewControllers in Main.Storyboard as visible on iPhone 8

 

 

 

 

This completes the Bulls Eye application development and also ends the “Your First Swift 4 & iOS 12 App Online” course.