1. 程式人生 > >IOS 初級開發入門教程 (六) Switch、Slider、Segmented、Progress練習

IOS 初級開發入門教程 (六) Switch、Slider、Segmented、Progress練習

看完前面5章的內容,基本對IOS開發有一些認識了,這章我們繼續動手去實踐一下,學習開關、拖動、分段控制、進度條的相關知識,以及通過一個互動式的案例演示如何使用。

系列文章:

UIKit繼承結構

我們通過這個UIKit繼承結構圖,我們試著找到本章要學習的UI,去觀察所屬的繼承關係。

介面檢視


先把我們要學習的控制元件拖拽到檢視介面。如果新手可以參考我前面的文章。從這章開始我就不細說畫圖拖拽方面了。

程式碼介面

首先,我們先實現第一功能,Switch和Segmented之間的聯動。先把兩個控制元件在程式碼上宣告輸出口 Outlet :


我們將Action動作也實現:(這裡以Switch為例)


關鍵就在於程式碼如何實現了:(直接把程式碼邏輯貼出來了)

 @IBAction func SwithValueChange(_ sender: Any) {
        let senderSwich = sender as! UISwitch ; // 獲取當前點選的控制元件並強轉為Switch
        
        if senderSwich == self.mSwitch{
            let value = self.mSwitch.isOn ;//獲取點選後的狀態值
            
            if value{
                self.mSegmented.selectedSegmentIndex=1
            }else{
                self.mSegmented.selectedSegmentIndex=0
            }
        }
        
    }
    @IBAction func ControValueChange(_ sender: Any) {
        let senderSegmented = sender as! UISegmentedControl
       
        if self.mSegmented == senderSegmented {
            let value = self.mSegmented.selectedSegmentIndex
            
            if value == 1{
                self.mSwitch.setOn(true, animated: true)
            }else{
                self.mSwitch.setOn(false, animated: true)
            }
        }
    }

然後,我們實現第二個功能,Slider與Progress、Label互動。同樣先宣告輸出口outlet:


我們將Slider的Action動作實現:

直接把程式碼邏輯貼出來了:

    @IBAction func sliderValueChange(_ sender: Any) {
        let slider = sender as! UISlider    // 當前拖動的滑塊
        let value = Int(slider.value*100)   // 獲取當前值(0.x)乘以100後的Int值
        let showText = NSString(format: "%d", value)    // 將資料格式化
        self.mLable.text = showText as String  // 顯示在Label上
        self.mProgress.progress = slider.value //顯示在Progress上
    }

執行結果