三十而立，從零開始學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. 這篇的敘述開始圍繞新增加的內容展開，一些和前幾篇相同的內容，在這裡就省略了，只做簡單的描述，如果大家有看不懂的地方，可以看前幾篇的內容，或者留言和我說，我會一一回覆，謝謝！