#Task 2 UI components: Segmented Control, Slider, Switch, Activity Indicator View, Progress View, Page Control, Date Picker, Visual Effect View with Blur

研究UI元件

Published in

彼得潘的 Swift iOS / Flutter App 開發教室

5 min readApr 4, 2022

Segmented Control

A segmented control is a linear set of two or more segments, each of which functions as a mutually exclusive button. Within the control, all segments are equal in width. Like buttons, segments can contain text or images. Segmented controls are often used to display different views. In Maps, for example, a segmented control lets you switch between Map, Transit, and Satellite views.
~apple developer's human interface guide

Add segment control from the library.

The default number of segments is 2 and it is modified to 3 for 3 images in this project.

Segment titles are updated to the corresponding image content: ‘Mail’, ‘Camera’, and ‘Music’.

Right-click-and-drag from the UISegmentedControl to Xcode’s Assistant Editor as part of class ViewController.

@IBOutlet weak var iconImageView: UIImageView!@IBOutlet weak var iconSegmentControl: UISegmentedControl!

Set initial settings for the following actions in ViewController.

let iconImages = ["mail", "camera", "music"]
    var selectNumber : Int = 0
    
    func updateImage() {
        iconImageView.image = UIImage(named: iconImages[selectNumber])
        iconSegmentControl.selectedSegmentIndex = selectNumber
    }

Update images in viewDidLoad function.

override func viewDidLoad() {
        super.viewDidLoad()
        updateImage()
    }

Action of segmented control is used to update image outlet.

@IBAction func segmentChange(_ sender: UISegmentedControl) {
        selectNumber = sender.selectedSegmentIndex
        updateImage()
    }

Result Demo:

Use segmented control to update UIImageView

Slider

A slider is a horizontal track with a control called a thumb, which you can slide with your finger to move between a minimum and maximum value, such as screen brightness level or position during media playback. As a slider’s value changes, the portion of track between the minimum value and the thumb fills with color. A slider can optionally display left and right icons that illustrate the meaning of the minimum and maximum values. ~apple’s developer guide

Value: Default value when app is loaded
Minimum: minimum value to slide
Maximum: minimum value to slide
Min Image: an image placed at the minimum of slider
Max Image: an image placed at the maximum of slider
Min Track: track between thumb tint and min end
Max Track: track between thumb tint and max end
Thumb Tint: an indicator of value on the slider

Demo: Use a slider to control the alpha value of images.

Switch

A switch is a visual toggle between two mutually exclusive states — on and off. ~apple’s developer guide

State: the default state of toggle switch
On Tint: track of switch
Thumb Tint: clickable solid circle

@IBAction func swtichSwitch(_ sender: UISwitch) {
        switchStatus = sender.isOn ? "On" : "Off"
        switchUILabel.text = "\(switchStatus)"
    }