Getting the value of slider and printing it in the Alert Box
Initialize a global variable currentValue of type Int and assign it the default value of 50.
Inside the sliderMoved method assign the slider.value.rounded() to the currentValue. Remember to cast slider.value.rounded() as we only need the integer values and not the decimal ones.
Copy the message inside the print statement in the sliderMoved method. Create another variable message inside showAlert() method of type string and assign the message to it. Replace slider.value in the message to currentValue.
Replace the old message in UIAlertController with message variable. Now run the app and change the slider position. Click Hit Me. We see the current value in the alert message.
Current Value of slider in Alert Message
Connecting Outlets
Right now we can access the slider only in one method. And we want to access its current value in another method or globally. This creates a need to have an instance variable of type UISlider. We can do that by using @IBOutlet like this
@IBOutlet weak var slider: UISlider!
Next open Main.storyboard -> control + click on slider -> click on New Referencing outlets and connect it to ViewController which pops up two options -> select slider
Now copy the code in sliderMoved to viewDidLoad. This makes sure that by default the current value of the slider is taken if the user hits the button “Hit Me!” without changing the slider value.
By default the slider’s value id 50. So now when we run the app and click on “Hit Me” , 50 is shown.
An app is composed of objects that can send messages to each other.
Most of the objects are provided by the iOS, example UIButton, UIAlertController, etc.
The remaining objects are created by us, for example, ViewController.
In iOS, apps are event-driven.
What happens when we click “Hit Me” Button
Portrait vs Landscape
In iOS, screen dimensions are measured in points. In older devices, 1 point = 1 pixel. Right now the plus devices had 1 point = 3 pixels.
To change the orientation of our app to landscape – Click on BullsEye in project navigator -> Select BullsEye in Target part -> In the general area, scroll down to the Device Orientation and uncheck portrait. Now run the app, the app stays in landscape mode even when we rotate the device.
Adding all UI Elements
Next, I added all the UI elements of the app on the screen using the objects of UIKit.
Open Main.Storyboard -> Utilities Panel -> Object Library -> Drag button to the controller
ViewController
A view controller manages a single screen or a portion of a screen. In this app, we have only one screen so only one view controller. View Controller has two parts:
Main.Storyboard where we add all the UI components to the view
ViewController.swift where we write code to handle those components
Adding action to the button
Open ViewController.Swift and add a function showAlert() with @IBAction prefix currently printing “Hello World!”. Then go back to Main.storyboard and click on the ViewController in the navigation area. Click on the button “Click Me”. Hold the button down and take the cursor to the ViewController. A drop-down will show with the method showAlert(), select that method. Now the button is connected to the action. When we run the app and click on the button “Hello World” is printed in the console.
Printing on the console
Display Popup on clicking the button
Right now I just added the following code instead on print statement in the showAlert() method. We are going to learn what each statement means in the coming lessons.
let alert = UIAlertController(title: "Hello World!", message: "This is my first app", preferredStyle: .alert)
let action = UIAlertAction(title: "Awesome", style: .default, handler: nil)
alert.addAction(action)
present(alert, animated: true, completion: nil)
Now when I run the app and click on the button a pop up appears on the screen.
Hello World Popup
This is the screenshot of the assignment about adding another button –
Bull’s Eye app gives us a random value. And we need to take the slider to approximate value and click on the button to send our input. Then a score is calculated based on how close our guess was.
The second video focuses on making a list of things we will need to do to make our functioning Bull’s Eye App. Here’s my To-Do List for this app –
Slider for getting the guess from the user
Button for submitting the user’s guess
Pop up to show the score after submitting the user’s guess
Text showing the random number selected by the app
Text showing the rounds and scores
Reset button to reset score and round to zero and start a new game
