三十而立，從零開始學ios開發（五）：IOS控件（2），Slider

下面繼續學習ios的其他控件，這次會使用到的控件有Slider，當然還有一些之前已經使用過的控件Label。

這次我們不新建一個project了，當然如果你願意重新創建一個新的項目也完全可以，我們還是使用上一篇的項目Control Fun。

上一篇中，我們最后的成果如下圖所示

我們添加了一個ImageView，2個Label和2個TextField，現在我們繼續在此基礎上添加其他的控件。

1）添加Slider和Label
Slider類似於一個滑塊，左右（或者上下）滑動來改變數值，在object library中找到Slider

拖動到界面中，並將其拉伸到你所喜歡的長度如下圖

2）設置Slider的屬性
選中Slider的情況下，查看attributes inspector，在attributes inspector中的Slider欄下有幾個數值需要注意，看下圖

其中1表示Slider的滑塊滑到最左邊時的數值（最小值），100表示Slider的滑塊滑到最右邊時的數值（最大值），50表示Slider的初始值，設置完成后，slider控件會根據設置的值自動調整位置。

3）添加Label
在slider的邊上添加一個Label控件，用來顯示slider的當前值，添加完成后的樣子如下圖

i）為了界面布局的統一性，把新添加的label和上面的2個label以右邊為基准對齊（同時選中3個Label，然后選中菜單欄中的Editor>Align>Right Edges，或者快捷鍵command + ]）。
ii）將label的內容改成50（選中label后，單擊鍵盤上的return鍵），和slider的初始值一致。
iii）在attributes inspector中找到Alignment，使label文字右對齊。
iv）務必使新添加的label的長度大於50，因為slider的最大值為100，因此如果label長度和50一直，當slider的滑塊移動到最右邊時，label會顯示不下。
好了，label的屬性也設置完成了，下面開始添加Outlet和Action。

4）為Label添加Outlet，為Slider添加Action
因為當我們滑動slider時，label會實時顯示slider的當前值，為了能夠改變label的值，我們需要一個Outlet來指向label，然后使用Outlet來改變label的值。

添加的方法很簡單，選中label，按住control鍵拖到BIDViewController.h中，在彈出的框框里，為Outlet取一個名字叫做sliderLabel，單擊return，完成添加。

添加Action，鼠標選中slider，按住control鍵拖到BIDViewController.h中，在彈出的框框里，將Connection改成“Action”，為Action取一個名字叫做sliderChanged，單擊return，完成添加。

注意上圖中的Event選項，這里選的“Value Changed”，也就是說當滑塊的位置發生改變時，就會觸發之歌Action。

添加完的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;

- (IBAction)textFieldDoneEditing:(id)sender;

- (IBAction)backgroundTap:(id)sender;

- (IBAction)sliderChanged:(id)sender;

@end

BIDViewController.m如下：

#import "BIDViewController.h"

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

......


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

5）添加code
在sliderChanged添加如下code

- (IBAction)sliderChanged:(id)sender {
    UISlider *slider = (UISlider *)sender;
    int progressAsInt = (int)roundf(slider.value);
    sliderLabel.text = [NSString stringWithFormat:@"%d", progressAsInt];
}

代碼還是很好理解的，當滑塊位置發生改變時，觸發sliderChanged，在sliderChanged中，將sender轉換成UISlider對象，然后獲取滑塊位置的當前值，然后將當前值賦給label。

6）編譯運行
command+B編譯
command+R運行
正常情況下程序不會有任何問題，iphone模擬器將會運行起來，然后滑動滑塊，label的值會隨着滑塊位置的不同而跟着改變。

程序運行的初始畫面

滑動滑塊，label值隨之改變。

 

Control Fun 2

 

P.S. 這篇的敘述開始圍繞新增加的內容展開，一些和前幾篇相同的內容，在這里就省略了，只做簡單的描述，如果大家有看不懂的地方，可以看前幾篇的內容，或者留言和我說，我會一一答復，謝謝！