iOS系列 基礎篇 09 開關、滑塊和分段控制項

標籤：

iOS系列 基礎篇 09 開關、滑塊和分段控制項

 

目錄：

1. 案例說明
2. 開關控制項Switch
3. 滑塊控制項Slider
4. 分段控制項Segmented Control

 

 

1. 案例說明

　　開關控制項（Switch）、滑塊控制項（Slider）和分段控制項（Segmented Control）都是UIControl的子類，本篇我們將通過一個案例和大家一起學習這三個控制項的使用。

 

　　如所示，本案例包括兩個開關控制項Switch、一個分段控制項（Segmented Control）、兩個標籤（Label）和一個滑塊控制項（Slider）：

 

 

 

　　兩個開關控制項的值保持相反狀態，點擊其中的一個，令其值為ON，另一個也會隨之發生變化。

　　一個有兩段的分段控制項，左側和右側的段分別命名為Left和Right，點擊Right時上面哪兩個開關控制項消失，點擊Left時上面兩個開關控制項恢複顯示。

　　最下面那個滑塊控制項可以改變上面Label標籤的常值內容，把滑塊變化的樹枝顯示在Label上面。

 

 

 

2. 開關控制項Switch

　　使用Single View Application模板建立一個工程項目，開啟Main.storyboard檔案。

　　從物件程式庫中拖拽兩個開關控制項（Switch）到介面上，然後將它們的State屬性設為相反。

 

　　因為要在代碼中控制使兩個開關控制項保持相反值，所以需要為兩個開關控制項置頂輸出口，分別命名為LeftSwitch和RightSwitch。

　　（PS：忘記怎麼添加輸出口的請看前面的文章《iOS系列 基礎篇 07 Action動作和輸出口》）

 

　　按住control鍵，拖拽左邊的Switch到右側的代碼中，添加Outlet輸出口：

 

　　設定名稱為LeftSwitch：

 

 

　　按照相同的方式添加右側開關控制項的Outlet，並命名為RightSwitch，最終效果為：

 

　　在ViewController中聲明一個switchValueChange: 方法，該方法的作用是同時設定兩個開關的值，使它們的值保持相反。

　　（PS：忘記如何添加Action動作的請參考前面的文章《iOS系列 基礎篇 07 Action動作和輸出口》）

 

　　按住control鍵，拖拽開關控制項到右側代碼中：

 

　　在彈出的對話方塊中選擇添加Action，並設定如下資訊：

 

　　添加Action動作方法之後，具體的實現代碼如下：

 1     @IBAction func switchValueChanged(sender: AnyObject) { 2         let senderSwitch = sender as! UISwitch  // 擷取當前點擊的控制項並強制轉型為Switch 3          4         let value = senderSwitch.on // 擷取當前點擊Switch後的狀態值 5          6         // 如果當前點擊的是LeftSwitch 7         if (senderSwitch == self.LeftSwitch){ 8             self.RightSwitch.setOn(!value, animated: true)  // 設定右側Switch的狀態值 9         }else{  // 如果當前點擊的是RightSwitch10             self.LeftSwitch.setOn(!value, animated: true)    // 設定左側Switch的狀態值11         }12     }

 

　　然後按住control，將右側的Switch也拖拽到上面這個方法上，這樣，兩個Switch的Action就綁定在一個方法上了：

 

　　運行效果如下：

 

 

 

 

3. 滑塊控制項Slider

　　如上案例所示，從物件程式庫中拖拽一個滑塊控制項Slider到設計器中，並擺放在螢幕中央的位置。

 

　　開啟它的屬性偵測器，將其最小值、最大值、初始值依次設定為0.0、1.0、0.5。

　　在iOS中，滑塊的值是0.0到1.0之間的浮點數。

 

　　在滑塊上方，放置兩個Label標籤控制項，將左側的標籤文本改為“滑塊當前值：”，將右側的文本設定為50。

　　（因為滑塊預設就是在中間的0.5，我想在Label上顯示0～100，所以預設就50了）

 

　　為右側要顯示值的Label添加Outlet輸出口，並命名為SliderValue：

 

　　在彈出的視窗中設定名稱為SliderValue，如下：

 

　　設定Slider的Outlet輸出口後代碼如下：

1 @IBOutlet weak var SliderValue: UILabel!

 

　　右側的這個Label是用來顯示滑塊當前值的，這裡我們需要為滑塊實現一個Action動作：

 

　　將其命名為sliderValueChanged：

 

　　滑塊的Action代碼如下：

1     @IBAction func sliderValueChanged(sender: AnyObject) {2         let slider = sender as! UISlider    // 當前拖動的滑塊3         let value = Int(slider.value*100)   // 擷取當前值(0.x)乘以100後的Int值4         let showText = NSString(format: "%d", value)    // 將資料格式化5         self.SliderValue.text = showText as String  // 顯示在Label上6     }

 

　　運行效果如下：

 

 

 

 

4. 分段控制項Segmented Control

　　分段控制項（Segmented Control）也是一種選擇控制項，其功能類似於Windows中的選項按鈕。

　　它由兩段或多段構成，每個段相當於一個獨立的按鈕。

 

　　它有三種樣式：Plain、Bordered和Bar樣式，在iOS 7之後，這三種樣式沒有什麼太大的區別，大家可以試試看。

 

　　如上案例所示，拖拽一個分段控制項（Segmented Control）到設計器中，將左段文本設定為Left，右段文本設定為Right。

　　然後添加Action方法touchDown：

 1     @IBAction func touchDown(sender: AnyObject) { 2         if (self.LeftSwitch.hidden){    // 如果當前開關控制項是顯示的 3             // 將兩個開關都隱藏 4             self.LeftSwitch.hidden = false 5             self.RightSwitch.hidden = false 6         }else{  // 如果當前開關控制項是隱藏的 7             // 將兩個開關都顯示 8             self.LeftSwitch.hidden = true 9             self.RightSwitch.hidden = true10         }11     }

 

　　效果如下：

 

iOS系列 基礎篇 09 開關、滑塊和分段控制項