Unit 3: UIKit Controls - Subjective Questions

UIButton is a UIKit control that allows the user to initiate an action by tapping it. A button can display a title, image, or both and can have different appearances for states such as normal, highlighted, selected, and disabled.

Target-action mechanism:

• The target is the object that receives the event, usually a view controller.
• The action is the method executed when the event occurs.
• The control event specifies when the action should be invoked, such as .touchUpInside.

Example:

let submitButton = UIButton(type: .system)
submitButton.setTitle("Submit", for: .normal)
submitButton.addTarget(self, action: #selector(submitTapped), for: .touchUpInside)

@objc func submitTapped() {
    print("Submit button tapped")
}

Buttons can also be connected through Interface Builder by creating an IBAction. The button should have suitable constraints, readable text, and an accessibility label.

UITextView is a scrollable and editable control used to display or accept multiline text. It is suitable for comments, descriptions, notes, and messages.

Important properties:

• text: Gets or sets the displayed text.
• font: Sets the text font.
• textColor: Sets the text color.
• isEditable: Determines whether the user can edit the content.
• isScrollEnabled: Enables scrolling for long content.
• delegate: Receives editing-related events.

Unlike UITextField, a text view normally inserts a new line when Return is pressed. The keyboard can be dismissed using a toolbar button or another user action.

Example:

@IBAction func doneTapped(_ sender: UIBarButtonItem) {
    view.endEditing(true)
}

Alternatively, a tap gesture can be added to the parent view:

let tap = UITapGestureRecognizer(target: self, action: #selector(dismissKeyboard))
view.addGestureRecognizer(tap)

@objc func dismissKeyboard() {
    view.endEditing(true)
}

The controller can also adopt UITextViewDelegate to validate input or respond when editing begins and ends.

UITextField is a UIKit control designed for single-line text input. It is commonly used for names, email addresses, passwords, phone numbers, and search values.

Input customization:

• keyboardType: Selects keyboards such as .emailAddress, .numberPad, or .phonePad.
• isSecureTextEntry: Hides password characters.
• autocapitalizationType: Controls automatic capitalization.
• autocorrectionType: Enables or disables autocorrection.
• returnKeyType: Changes the Return key to Done, Next, Search, and so on.
• inputView: Replaces the standard keyboard with a custom input control.
• inputAccessoryView: Adds a toolbar above the keyboard.

Appearance customization:

• Set borderStyle, font, textColor, backgroundColor, and placeholder.
• Use leftView and rightView to display icons.
• Customize layer.cornerRadius and layer.borderWidth.

Example:

emailField.placeholder = "Enter email"
emailField.keyboardType = .emailAddress
emailField.autocapitalizationType = .none
emailField.autocorrectionType = .no
emailField.borderStyle = .roundedRect

passwordField.isSecureTextEntry = true
passwordField.returnKeyType = .done

A UITextFieldDelegate can validate characters, move between fields, and dismiss the keyboard.

UITextField and UITextView both accept text, but they are intended for different forms of input.

Use UITextField when:

• The value is short and structured.
• A specific keyboard type is required.
• The Return key should submit or navigate between inputs.

Use UITextView when:

• The user needs to enter multiple lines.
• The content may be lengthy and scrollable.
• Rich or attributed text must be displayed or edited.

Both controls should validate input and handle keyboard appearance appropriately.

UISwitch is a two-state UIKit control representing an on/off or true/false setting. It is suitable for options such as enabling notifications, dark mode, sound, or location services.

Important properties and methods:

• isOn: Returns or changes the current Boolean state.
• setOn(_:animated:): Changes the state with optional animation.
• onTintColor: Sets the color shown in the on state.
• thumbTintColor: Changes the thumb color.
• .valueChanged: Event generated when the user changes the switch.

Example:

let notificationSwitch = UISwitch()
notificationSwitch.isOn = true
notificationSwitch.addTarget(self, action: #selector(switchChanged), for: .valueChanged)

@objc func switchChanged(_ sender: UISwitch) {
    if sender.isOn {
        print("Notifications enabled")
    } else {
        print("Notifications disabled")
    }
}

The setting can be saved in UserDefaults and restored when the application starts. A descriptive label should be placed beside the switch so the meaning of each state is clear.

UIImageView is a UIKit view used to display a single image or a sequence of animated images. Images can come from the asset catalog, application bundle, system symbols, or a remote source.

Example:

let imageView = UIImageView()
imageView.image = UIImage(named: "profile")
imageView.contentMode = .scaleAspectFit
imageView.clipsToBounds = true

Common content modes:

• .scaleToFill: Scales the image to fill the bounds and may distort it.
• .scaleAspectFit: Preserves the aspect ratio and displays the complete image; empty space may remain.
• .scaleAspectFill: Preserves the aspect ratio and fills the entire view; some parts may be cropped.
• .center: Displays the image at its original size in the center.

Additional points:

• Set clipsToBounds to true when cropped content must not extend beyond the view.
• Use tintColor with template images or SF Symbols.
• UIImageView does not accept touches by default; set isUserInteractionEnabled = true if gesture handling is needed.
• Large images should be resized or loaded efficiently to reduce memory usage.

A user profile application can collect a name, email address, biography, profile image, and notification preference.

Suggested controls:

• UIImageView to display the profile photograph.
• UITextField controls for name and email.
• UITextView for a multiline biography.
• UISwitch for notification preference.
• UIButton to choose an image and save the profile.

Implementation steps:

1. Create the interface using Interface Builder or programmatic views.
2. Add Auto Layout constraints so the screen adapts to different devices.
3. Set the email field's keyboard type to .emailAddress.
4. Use UIImagePickerController or PHPickerViewController to select a profile image.
5. Dismiss the keyboard with view.endEditing(true).
6. Validate all required inputs when Save is tapped.
7. Display an alert if validation fails.
8. Store or pass the valid profile information.

Save logic example:

@IBAction func saveProfile(_ sender: UIButton) {
    view.endEditing(true)

    guard let name = nameField.text, !name.isEmpty,
          let email = emailField.text, email.contains("@") else {
        showMessage("Enter a valid name and email address")
        return
    }

    let bio = bioTextView.text ?? ""
    let notificationsEnabled = notificationSwitch.isOn
    print(name, email, bio, notificationsEnabled)
}

The application should also provide accessibility labels, clear error messages, safe keyboard handling, and appropriate content modes for the image.

A view is an instance of UIView or one of its subclasses. It occupies a rectangular area, draws content, and may respond to user interaction. Controls such as buttons, labels, text fields, and image views are specialized views.

View hierarchy:

• Views are arranged in a parent-child structure.
• A parent is called a superview.
• Child views are stored in the subviews array.
• addSubview(_:) adds a child view.
• The order of subviews affects which view appears in front.

Frame and bounds:

• frame describes a view's size and position in its superview's coordinate system.
• bounds describes the view's internal coordinate system and normally begins at (0, 0).
• center specifies the center point in the superview's coordinate system.

Auto Layout:

• Auto Layout positions and sizes views using constraints.
• Constraints express relationships such as leading, trailing, top, bottom, width, and height.
• Safe-area constraints prevent content from overlapping system areas.
• Intrinsic content size helps size controls based on their content.

A well-designed hierarchy groups related controls, avoids unnecessary nesting, and uses constraints that adapt to screen size and orientation.

A multi-view application contains more than one screen, with each screen generally managed by a separate UIViewController. Examples include applications with login, list, detail, settings, and profile screens.

Role of a view controller:

• Creates or loads its view hierarchy.
• Handles control events and user interaction.
• Manages screen-specific data.
• Coordinates navigation to another controller.
• Responds to lifecycle methods such as viewDidLoad, viewWillAppear, and viewDidDisappear.

Implementation approaches:

1. Create multiple view controllers in a storyboard or as Swift classes.
2. Design the user interface for each controller.
3. Embed the initial controller in a navigation controller when hierarchical navigation is needed.
4. Connect screens with segues or perform programmatic navigation.
5. Pass required data before the destination appears.
6. Use delegation, closures, notifications, or shared models to return data.

Important design principles:

• Each controller should have a clear and limited responsibility.
• Data should be stored in models rather than duplicated across screens.
• Navigation should be predictable and support the standard Back operation.
• Controllers should release resources and avoid strong reference cycles.

This structure improves modularity, maintainability, and reuse.

A segue represents a transition from one view controller to another in a storyboard. It stores information about the source, destination, transition style, and optional identifier.

Creating a segue:

• Control-drag from a button or view controller to the destination controller.
• Select a segue type such as Show, Present Modally, or Custom.
• Assign an identifier in the Attributes inspector.

A manual segue can be triggered with:

performSegue(withIdentifier: "showDetails", sender: selectedItem)

Before the transition, UIKit calls prepare(for:sender:). This method is used to configure the destination and pass data.

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    if segue.identifier == "showDetails",
       let destination = segue.destination as? DetailViewController,
       let item = sender as? Item {
        destination.item = item
    }
}

If the destination is embedded in another controller, such as a navigation controller, the required child controller must first be obtained. shouldPerformSegue(withIdentifier:sender:) may be used to prevent a transition when validation fails.

UINavigationController manages a stack of view controllers and provides hierarchical navigation with a navigation bar and Back button.

Pushing a controller:

let details = DetailViewController()
navigationController?.pushViewController(details, animated: true)

If the controller is stored in a storyboard:

let storyboard = UIStoryboard(name: "Main", bundle: nil)
let details = storyboard.instantiateViewController(withIdentifier: "DetailViewController")
    as! DetailViewController
navigationController?.pushViewController(details, animated: true)

The top controller can be removed using:

navigationController?.popViewController(animated: true)

Push versus modal presentation:

• Push adds a controller to a navigation stack and is suitable for parent-to-detail movement.
• Present displays a controller modally and is suitable for tasks such as creating an item, signing in, or choosing settings.
• A pushed controller normally displays a Back button automatically.
• A presented controller usually needs its own Done or Cancel action and is dismissed using dismiss(animated:).

The navigation controller itself should usually be established before attempting to push another controller.

Data transfer between view controllers should use a method appropriate to the navigation direction and relationship between screens.

Forward data transfer:

• Set public properties on the destination controller.
• Pass data in prepare(for:sender:) before a segue.
• Use dependency injection through an initializer for programmatic controllers.

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    if let destination = segue.destination as? DetailViewController {
        destination.product = selectedProduct
    }
}

Backward data transfer:

• Delegate pattern: The destination defines a protocol, and the source adopts it.
• Closure: The destination invokes a closure before it is removed.
• Unwind segue: Returns to an earlier storyboard controller.
• NotificationCenter: Broadcasts data to loosely coupled listeners, though it should not be overused.
• Shared model: Both controllers access a common model or store.

Closure example:

editor.onSave = { [weak self] updatedName in
    self?.nameLabel.text = updatedName
}

Best practices:

• Pass model objects rather than unrelated individual values.
• Avoid global variables for screen-to-screen transfer.
• Use [weak self] where closures may create reference cycles.
• Update visible controls on the main thread.
• Keep data ownership and responsibilities clear.

UISegmentedControl displays a horizontal group of mutually exclusive segments. It is suitable when the user must select exactly one option from a small set, such as List/Grid, Day/Week/Month, or Login/Register.

Configuration example:

let control = UISegmentedControl(items: ["List", "Grid"])
control.selectedSegmentIndex = 0
control.addTarget(self, action: #selector(segmentChanged), for: .valueChanged)

@objc func segmentChanged(_ sender: UISegmentedControl) {
    if sender.selectedSegmentIndex == 0 {
        listView.isHidden = false
        gridView.isHidden = true
    } else {
        listView.isHidden = true
        gridView.isHidden = false
    }
}

Useful operations:

• insertSegment(withTitle:at:animated:) adds a segment.
• removeSegment(at:animated:) removes one.
• setTitle(_:forSegmentAt:) changes a title.
• selectedSegmentIndex identifies the selected option.

A segmented control is most effective with a limited number of short, closely related options. It should not be used as a substitute for a long menu.

UISlider is a continuous control that allows the user to select a value by moving a thumb along a track. It is commonly used for volume, brightness, zoom, and playback position.

Important properties:

• minimumValue: Lowest permitted value.
• maximumValue: Highest permitted value.
• value: Current selected value.
• minimumTrackTintColor and maximumTrackTintColor: Customize track colors.
• thumbTintColor: Customizes the thumb.

If the slider's range is from minimumValue to maximumValue, its percentage is:

Example:

slider.minimumValue = 0
slider.maximumValue = 1
slider.value = 0.5
slider.addTarget(self, action: #selector(sliderChanged), for: .valueChanged)

@objc func sliderChanged(_ sender: UISlider) {
    let percentage = Int(sender.value * 100)
    valueLabel.text = "\(percentage)%"
}

For discrete values, the slider value can be rounded before use. Accessibility labels and values should be supplied so assistive technologies can report the setting.

UIAlertView was an older UIKit class used to show a modal alert containing a title, message, and buttons. It used a delegate to determine which button the user selected.

UIAlertView is deprecated and should not be used in modern applications. The recommended replacement is UIAlertController with the .alert style.

Modern example:

let alert = UIAlertController(
    title: "Invalid Input",
    message: "Please enter all required values.",
    preferredStyle: .alert
)

alert.addAction(UIAlertAction(title: "OK", style: .default))
present(alert, animated: true)

UIAlertController advantages:

• Uses action-handler closures instead of a delegate.
• Supports text fields.
• Handles default, cancel, and destructive actions.
• Provides both alert and action-sheet styles.

Alerts should communicate important information or request a decision. They should have concise messages and a limited number of clearly named actions.

UIActionSheet was an older UIKit component that presented a list of choices related to the current context. It commonly included options such as Share, Delete, Choose Photo, and Cancel.

UIActionSheet is deprecated. Modern applications use UIAlertController with the .actionSheet style.

let sheet = UIAlertController(
    title: "Profile Photo",
    message: "Choose an action",
    preferredStyle: .actionSheet
)

sheet.addAction(UIAlertAction(title: "Take Photo", style: .default) { _ in
    self.openCamera()
})

sheet.addAction(UIAlertAction(title: "Delete Photo", style: .destructive) { _ in
    self.deletePhoto()
})

sheet.addAction(UIAlertAction(title: "Cancel", style: .cancel))
present(sheet, animated: true)

On an iPad, an action sheet must be anchored using its popoverPresentationController, for example to a source view or bar button item. Otherwise, the application may fail at runtime. Destructive actions should be clearly identified and used only when appropriate.

Both components request user attention, but they serve different purposes. In modern UIKit, both are created using UIAlertController with different preferred styles.

Guidelines:

• Use an alert when the user must acknowledge information or make a critical decision.
• Use an action sheet when presenting multiple actions for the current item.
• Use .destructive for irreversible operations such as deletion.
• Avoid unnecessary interruptions and excessive numbers of actions.
• Configure the popover source when presenting an action sheet on an iPad.

The older UIAlertView and UIActionSheet classes are deprecated.

UIProgressView displays the completion status of a task as a horizontal progress bar. It is suitable for determinate operations such as file downloads, uploads, installations, or processing a known number of items.

The progress value is a floating-point number in the range to , where means no progress and means completion.

If completedWork out of totalWork units has finished, progress is calculated as:

Example:

progressView.progress = 0
progressView.progressTintColor = .systemBlue
progressView.trackTintColor = .systemGray5

let progress = Float(completedItems) / Float(totalItems)
progressView.setProgress(progress, animated: true)

Important considerations:

• Update UIKit controls on the main thread.
• Use Progress or task callbacks to report real operation progress.
• Hide or reset the view when the operation finishes.
• Use UIActivityIndicatorView instead when the amount of work is unknown.
• A nearby label can display a percentage such as 75% for greater clarity.

Keyboard handling ensures that users can enter data without the keyboard hiding the active control.

1. Dismissing the keyboard:

• Call view.endEditing(true) when the user taps Done or outside an input.
• For a text field, handle the Return key through UITextFieldDelegate.

func textFieldShouldReturn(_ textField: UITextField) -> Bool {
    textField.resignFirstResponder()
    return true
}

2. Moving between fields:

• Set the Return key to .next for intermediate fields and .done for the last field.
• In textFieldShouldReturn, call becomeFirstResponder() on the next field.

3. Preventing keyboard overlap:

• Place form controls inside a UIScrollView.
• Observe keyboard frame changes.
• Adjust the scroll view's bottom inset according to the keyboard intersection.
• Scroll the active input into view.
• Alternatively, use keyboardLayoutGuide on supported iOS versions.

4. Accessory toolbar:

• Number pads have no Return key, so an inputAccessoryView with a Done button can be added.

5. Cleanup and animation:

• Match layout updates to the keyboard's duration and animation curve.
• Remove notification observers when necessary.

Proper handling should account for safe areas, hardware keyboards, orientation changes, and varying keyboard sizes.

A feedback application can contain three screens: Feedback Form, Preview, and Submission Status.

1. Feedback Form screen:

• UITextField for the user's name and email.
• UITextView for multiline feedback.
• UISegmentedControl for feedback category.
• UISlider for a satisfaction rating.
• UISwitch for permission to contact the user.
• UIImageView and a button for attaching an image.

An action sheet can offer Camera, Photo Library, Remove Attachment, and Cancel actions.

2. Validation and navigation:

• When Preview is tapped, dismiss the keyboard.
• Validate required fields and email format.
• Present an alert if data is invalid.
• If valid, create a Feedback model and push the Preview controller.

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    if let preview = segue.destination as? PreviewViewController {
        preview.feedback = feedback
    }
}

3. Preview screen:

• Display the received data using labels and an image view.
• Allow the user to go back and edit or tap Submit.
• Use a delegate or closure if edited data must be returned.

4. Submission Status screen:

• Display UIProgressView while uploading the feedback and attachment.
• Update progress on the main thread.
• At completion, set progress to and display a success alert.
• Provide a Done button to return to the initial screen.

Design requirements:

• Use a navigation controller for hierarchical movement.
• Apply Auto Layout and keyboard-safe scrolling.
• Keep network or storage logic outside the view controllers where possible.
• Handle failures with retry and cancel options.
• Add accessibility labels and avoid deprecated UIAlertView and UIActionSheet APIs.