分段控制 UISegmentedControl

UISegmentedControl 是一個可以顯示多個選項的元件,並依照選擇的選項做出相對應的動作。常見的使用情境是在同一個頁面中,切換顯示不同的子頁面。

以下是本節的目標,分成四段選項,切換選項時會印出選到的值:

uisegmentedcontrol01

首先在 Xcode 裡,新建一個 Single View Application 類型的專案,取名為 ExUISegmentedControl 。

一開始先在viewDidLoad()中建立 UISegmentedControl :

// 使用 UISegmentedControl(items:) 建立 UISegmentedControl
// 參數 items 是一個陣列 會依據這個陣列顯示選項
// 除了文字 也可以擺放圖片 像是 [UIImage(named:"play")!,"晚餐"]
let mySegmentedControl = UISegmentedControl(
  items: ["早餐","午餐","晚餐","宵夜"])

// 設置外觀顏色 預設為藍色
mySegmentedControl.tintColor = UIColor.black

// 設置底色 沒有預設的顏色
mySegmentedControl.backgroundColor =
  UIColor.lightGray

// 設置預設選擇的選項
// 從 0 開始算起 所以這邊設置為第一個選項
mySegmentedControl.selectedSegmentIndex = 0

// 設置切換選項時執行的動作
mySegmentedControl.addTarget(
  self,
  action:
    #selector(ViewController.onChange),
  for: .valueChanged)

// 設置尺寸及位置並放入畫面中
mySegmentedControl.frame.size = CGSize(
  width: fullScreenSize.width * 0.8, height: 30)
mySegmentedControl.center = CGPoint(
  x: fullScreenSize.width * 0.5,
  y: fullScreenSize.height * 0.25)
self.view.addSubview(mySegmentedControl)

最後為ViewController新增切換選項時執行動作的方法:

// 切換選項時執行動作的方法
@objc func onChange(_ sender: UISegmentedControl) {
    // 印出選到哪個選項 從 0 開始算起
    print(sender.selectedSegmentIndex)

    // 印出這個選項的文字
    print(sender.titleForSegment(at: 
        sender.selectedSegmentIndex)!)
}

以上即為本節範例的內容。

範例

本節範例程式碼放在 uikit/uisegmentedcontrol

results matching ""

    No results matching ""