三十而立，從零開始學ios開發（六）：IOS控件（3），Segmented Control、Switch

這次的學習還是基於上一個項目繼續進行（你也可以新建一個項目）學習Segmented Control和Switch。

Segmented Control

Switch

Segmented Control和Switch的主要區別在於Segmented Control可以有多個值進行選擇，而Switch只有2個值。

1）添加Segmented Control
從object library中拖一個Segmented Control到iphone界面上
然后調整Segmented Control位置以及它的寬度，如下圖

在Segmented Control的attributes inspector中有一個屬性叫做Segments，這個值是用來設置有多少個分段，默認是2個，你可以將它的值設成100，看看其效果如何。

像改變Label控件文字內容一樣，鼠標雙擊Segmented Control上的文字，可以改變其內容，將“First”改成“Switches”，將“Second”改成“Button”，如下

1）添加2個Switch
從object library中拖兩個Switch到iphone界面上，如下

Switch的attribute不需要做改動，下面接着創建Outlet和Action

3）添加Outlet和Action
為2個Switch添加分別添加Outlet，然后2個Switch共用一個Action，Segmented Control使用一個Action
為左邊的Switch添加一個Outlet，命名為leftSwitch，為右邊的Switch添加一個Outlet，命名為rightSwitch
 
為左邊的Switch添加一個Action，命名為switchChanged，添加完成后，將右邊的Switch也關聯到switchChanged

為Segmented Control添加一個Action，命名為toggleControls

添加完的BIDViewController.h如下

#import <UIKit/UIKit.h>

@interface BIDViewController : UIViewController
@property (weak, nonatomic) IBOutlet UITextField *nameField;
@property (weak, nonatomic) IBOutlet UITextField *numberField;
@property (weak, nonatomic) IBOutlet UILabel *sliderLabel;
@property (weak, nonatomic) IBOutlet UISwitch *leftSwitch;
@property (weak, nonatomic) IBOutlet UISwitch *rightSwitch;

- (IBAction)textFieldDoneEditing:(id)sender;

- (IBAction)backgroundTap:(id)sender;

- (IBAction)sliderChanged:(id)sender;

- (IBAction)switchChanged:(id)sender;

- (IBAction)toggleControls:(id)sender;

@end

（上面有很多其他的Outlet和Action，這個是使用了之前項目的原因）

BIDViewController.m如下

#import "BIDViewController.h"

@implementation BIDViewController
@synthesize nameField;
@synthesize numberField;
@synthesize sliderLabel;
@synthesize leftSwitch;
@synthesize rightSwitch;

...

- (IBAction)switchChanged:(id)sender {
}

- (IBAction)toggleControls:(id)sender {
}

4）實現Switch Action
在BIDViewController.m中的switchChanged方法中添加如下代碼：

- (IBAction)switchChanged:(id)sender {
    UISwitch *whichSwitch = (UISwitch *)sender;
    BOOL setting = whichSwitch.isOn;
    [leftSwitch setOn:setting animated:YES];
    [rightSwitch setOn:setting animated:YES];
}

因為leftSwitch和rightSwitch都關聯到了switchChanged，因此，無論對哪個switch進行操作，都會調用到該方法，在該方法中，首先將sender強制轉換成UISwitch類型，這樣就可以使用UISwitch定義的屬性了，isOn用來判斷Switch的狀態是打開還是關閉（Switch僅有的2種狀態），最好根據觸發事件的Switch狀態，將另一個switch也設置成相同的狀態，程序中為了方便，並沒有判斷到底是哪個switch觸發了該Action，只是簡單的將2個switch設成相同的狀態而已。

[rightSwitch setOn:setting animated:YES];

setOn方法是根據后面的BOOL型參數的值來設置Switch的狀態是打開還是關閉（ON，OFF）。
animated是指當Switch從一種狀態切換到另一種狀態后，其滑塊是否有活動效果，如果是YES，則滑塊滑動的慢點，給人的感覺滑塊是慢慢移動過去的，如果設成NO，滑塊會很快地改變位置，滑動的速度很快。

編譯運行程序，用鼠標在模擬器中點擊Switch控件，看看效果，2個switch的值應該始終是一樣的，並且無論點擊哪個switch，另一個switch的值也會隨之改變。
Switch is ON

Switch is OFF

5）添加Button
Segmented Control在這個應用中的作用是切換Switch和Button，且Switch和Button同時只能有一個顯示，另一個必須隱藏，因此我們在switch相同的位置添加Button，並設置Button按鈕的屬性為hidden，程序初始情況下不顯示，然后需要顯示Button時，只需切換segmented的值，Button就會顯示，2個switch會被隱藏。

在2個switch相同的位置上添加一個button

拉伸button，使其完全遮住2個switch，並雙擊button，輸入"Do Something"

6）為button添加Outlet和Action
添加Outlet是因為我們需要在改變segmented中來控制釋放顯示或隱藏button，當點擊button后，Action會被觸發。
添加Outlet：doSomethingButton

添加Action：buttonPressed

7）隱藏button
之所以到現在才設置button的隱藏屬性（Hidden），是因為這樣子會更加方便添加button的Outlet和Action，容易選擇。
選中button，在attributes inspector的View欄中找到“Hidden”的checkbox，並選中

選中Hidden后，button變成不可見，但是在iphone的布局界面里，button僅僅是變成了透明而已，其外觀還是可見的，在真實的運行環境里，button是看不見的。

8）實現segmented的Action
segmented的Action toogleControls我們之前已經添加完畢了，在其中添加如下code

- (IBAction)toggleControls:(id)sender {
    if ([sender selectedSegmentIndex] == 0) {
        leftSwitch.hidden = NO;
        rightSwitch.hidden = NO;
        doSomethingButton.hidden = YES;
    }
    else {
        leftSwitch.hidden = YES;
        rightSwitch.hidden = YES;
        doSomethingButton.hidden = NO;

    }
}

第一個if語句，使用Segmented Control的selectedSegmentIndex方法來返回segment的哪個值（那一段）被選中（Segmented Control中的塊的index從左到右從0開始編號），如果是第0個，說明Switch段被選中的，因此左右2個switch需要顯示，button需要隱藏，因此設2個switch的hidden屬性值為NO（false，不隱藏），button需呀隱藏，設其hidden值為YES（true，隱藏）。如果不是，則說明第1個被選中（這個程序中的segmented只有2段，不是第0段被選中就是第1段被選中），2個switch需要隱藏，button需要顯示。

編譯運行，程序初始情況下，segmented的第0段被選中，2個switch顯示

鼠標選中segmented的Button，2個switch隱藏，button顯示

9）下一篇將實現button的Action
到目前為止，所有新添加的控件，除了button的Action之外，都已經實現了其應有的功能。button的Action將在下一篇中完成，這里的button Action涉及到2個新的控件Action Sheet和Alert，這2個控件有點特殊，他們不是從object library拖到iphone界面上，而是會使用到delegate（其實delegate到目前為止我也不是理解的很清楚，還是有點迷茫，望高人能夠指點），對我來說還有些復雜，因此放到下一篇中講，望大家諒解。

 

Control Fun 3