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. 

 

Day 9

 

Styling the Buttons and Slider

 

• Buttons can be styled by changing the values in attribute inspector and size inspector.
• But for Slider, we need to write custom code in ViewController’s viewDidLoad Method.

 

 

        let thumImageNormal = #imageLiteral(resourceName: "SliderThumb-Normal")
        slider.setThumbImage(thumImageNormal, for: .normal)
        let thumbImageHighlighted = #imageLiteral(resourceName: "SliderThumb-Highlighted")
        slider.setThumbImage(thumbImageHighlighted, for: .highlighted)
        
        let insets = UIEdgeInsetsMake(0, 14, 0, 14)
        
        let trackLeftImage = #imageLiteral(resourceName: "SliderTrackLeft")
        let trackLeftResizable = trackLeftImage.resizableImage(withCapInsets: insets)
        slider.setMinimumTrackImage(trackLeftResizable, for: .normal)
        
        let trackRightImage = #imageLiteral(resourceName: "SliderTrackRight")
        let trackRightResizable = trackRightImage.resizableImage(withCapInsets: insets)
        slider.setMaximumTrackImage(trackRightResizable, for: .normal)

 

 

Styling the about screen

 

• Adding the background image to about screen.
• Making the textview’s background transparent and changing the font, font size, and color of the text
• Styling the button

 

 

 

Day 8

 

Closures

 

• Currently the score and round increase as soon as we click on “Hit Me” button. But we would like them to increase when we click on “Ok” in the action box.
• This can be handled using closures.

 

        let alert = UIAlertController(title: title, message: message, preferredStyle: .alert)

        let action = UIAlertAction(title: "Ok", style: .default, handler: {
            action in
            self.startNewRound()
        })

        alert.addAction(action)

        present(alert, animated: true, completion: nil)

 

• For each button we have to specify a UIAlertAction object which has three parameters: the title of the alert message, sets the style of the alert message and the handler which tells the alert what should happen when a button is pressed. Before it was nil and so nothing was happening.
• Now it starts the new round using a closure. The closure is a lot like an inline method with a parameter action.

 

 

 

 

Adding Extra Screens

 

• Adding another screen to show the rules of the game when we click on the info button.
• First, we create a new ViewController file. Click on File -> New -> File. Add the name AboutViewController and make it a subclass of UIViewController. Click on next and make sure BullsEye is selected. Then click on finish.
• Next, add ViewContoller in main.storyboard. Add a button “close” and a TextView containing the instructions to this ViewController. Make sure the to uncheck the “editable” attribute of the TextView.
• Next, we add the transition from first ViewController to the new ViewController using a Segue. Click on the info button + control and link it to the new ViewController. Select present modally.
• Next, we need to link close to a method to dismiss the ViewController using an IBAction method close. In the method, we call another method to dismiss to dismiss the ViewController. Then go to main.storyboard file -> click on the new ViewController -> Go to the identity inspector (third tab) and set the class to AboutViewController. And link the button close to the method close.

 

@IBAction func close(){
        dismiss(animated: true, completion: nil)
    }

 

 

 

 

 

Styling the app

 

• Adding images to Assets.xcassets.
• 1x – old retina devices – 50×50 pixels
• 2x – high resolution retina displays – 100×100 pixels
• 3x – super high resolution retina HD screen – 150×150 pixels
• To add a background image to the app, we add an ImageView in the first ViewController in the main.storyboard. And make the ImageView full screen. Then we set the image “Background” to this ImageView. Arrange the ImageView to go in the background.

 

Day 7

 

Adding Polish

 

• Instead of “Hello World!” we will print different messages in the alert box based on how close we get to the random number.
• If the difference is 0, we will print “Perfect!”. Else if the difference is less than 5, we will print “You almost had it!”. Else if the difference is less than 10, we will print “Pretty good!”. Else we will print “Not even close”.
• Also, we will award an extra hundred points if the difference is 0 and an extra 50 points if the difference is 1.

The showAlert method looks like this –

 

let difference = abs(currentValue - targetValue)
        var points = 100 - difference
        let title: String
        if difference == 0{
            title = "Perfect!"
            points += 100
        }else if difference < 5 {
            title = "You almost had it!"
            if difference == 1{
                points += 50
            }
        }else if difference < 10 {
            title = "Pretty good..!"
        }else {
            title = "Not even close..."
        }
        
        score += points
        
        let message: String = "You scored: \(points)"
        
        let alert = UIAlertController(title: title, message: message, preferredStyle: .alert)

 

Day 6

 

Calculating points at end of each round

 

let difference = abs(currentValue - targetValue)
        let points = 100 - difference

 

 

Calculating score at end of each round

 

• Initialize score as a global variable

 

var score = 0

 

• Update score as the sum of the previous score and current round’s points.

 

score += points

 

Displaying score at correct label

 

• First creating an IBOutlet for the label to display the score.

 

@IBOutlet weak var scoreLabel: UILabel!

 

• Connecting this outlet to the label displaying 999999 currently.
• Updating the value of scoreLabel by converting score to string in updateLabels method.

 

scoreLabel.text = String(score)

 

 

 

Tracking rounds

 

• Initialize a global variable currentRound to 0.

 

var currentRound = 0

 

• Creating an IBOutlet for the label to display the round.

 

@IBOutlet weak var roundLabel: UILabel!

 

• Connecting this outlet to the label displaying 999 currently.
• Updating the value of roundLabel by converting currentRound to string in updateLabels method.
• Incrementing currentRound by 1 every time new round starts in startNewRound method

 

 

func startNewRound(){
        targetValue = Int(arc4random_uniform(101))
        currentValue = 50
        currentRound += 1
        slider.value = Float(currentValue)
        updateLabels()
    }

    func updateLabels(){
        targetLabel.text = String(targetValue)
        scoreLabel.text = String(score)
        roundLabel.text = String(currentRound)
    }

 

 

Day 5

 

Printing the value of the random number in the correct label

 

• First creating an IBOutlet for the label to display the target random number and a global targetValue to hold the target random number.

 

@IBOutlet weak var targetLabel: UILabel!
var targetValue: Int = 0

• Connecting this outlet to the label displaying 100 currently.
• Since we need to update the targetValue for every round, we create a method startNewRound in which we generate a random value and assign it to targetValue. For swift 4.2+, we can generate random values using “Int.random(in: range)”. I have swift 4.1, therefore I used arc4random_uniform method.
• In the updateLabels method, we convert the targetValue to String and assign it to the targetLabel.

 

func startNewRound(){
        targetValue = Int(arc4random_uniform(101))
        currentValue = 50
        slider.value = Float(currentValue)
        updateLabels()
    }

func updateLabels(){
        targetLabel.text = String(targetValue)
    }

 

 

 

Calculating the difference between targetValue and sliderValue and displaying the difference in Alert box

 

• To make sure the difference between currentValue and targetValue stays positive, we multiply the difference by -1.
• Then we add the message to display the difference in the Alert box.

 

        var difference: Int
        
        difference = currentValue - targetValue
        if difference < 0{
            difference = difference * -1
        }

        let message: String = "The value of the slider is: \(currentValue)" + "\nThe value of the target is: \(targetValue)" + "\nThe value of the difference is: \(difference)"