macOS UI 資料輸入!滑動條(Slider)的使用例子

滑動條(Slider)的使用例子

Slider 樣式

滑動條(Slider)在Mac提供三種的程現方式:直式、橫式、圓式,外觀如下圖:

分別視您的設計需求使用,這三個元件在Layout上的Library已經有提供:

但其實它們都是同一個元件NSSlider所產生的,如果元件已經配置好後,想要改變它的類型,需要在元件屬性中重新選擇:

但只能選擇LinearCircular,如果你的Linear的Slider要由原本直式改成橫式的,那您就需要重新從元件Library上重新再配置一個新的才行。

Slider 定義調整範圍

調整的範例是依照你程式需求而定的,設定的畫面如下:

  • Value Minimum Slider的最小值(例子為0)
  • Value Maximum Slider的最大值(例子為100)
  • Current 一開始選擇的值(例子為50,會落在中間)

刻度選擇

Slider也可以在上面標示刻度,其中刻度的度數由右框框中填入,例子中的值為3,所以可看到Slider總共有3個刻度,您視需要可以增加刻度值(0值為不顯示)。

程式連動

雖然元件配置好後就能在UI上看到結果並操作,但還是必需要將操作結果從程式中取得並使用,它的事件使用方式與其他的元件並無不同,當Slider滑動的值有改變時,指定對應的method就可以接收到目前的值:

標頭檔(.h)宣告:

- (IBAction)actionSlider:(id)sender;

程式內容(.m):

- (IBAction)actionSlider:(id)sender {
    NSSlider *slider = (NSSlider*)sender;
    NSLog(@"%ld",slider.integerValue);
    NSLog(@"%f",slider.floatValue);
    NSLog(@"%f",slider.doubleValue);
    NSLog(@"%@",slider.stringValue);
    NSLog(@"%@",slider.objectValue);
}

Slider取得值的method有很多型態,上面範例將印出不型態的值,依序輸出結果如下:

2014-07-16 17:07:29.423 SliderDemo[71146:303] 69
2014-07-16 17:07:29.423 SliderDemo[71146:303] 69.855927
2014-07-16 17:07:29.424 SliderDemo[71146:303] 69.855925
2014-07-16 17:07:29.424 SliderDemo[71146:303] 69.8559
2014-07-16 17:07:29.424 SliderDemo[71146:303] 69.85592532467533

雖然得到結果,不過範例中有使用到slider.objectValue將物件內容印出來,雖然%@能順利印出值,但如果想要知道是什麼物件可以使用:

NSLog(@"%@",[slider.objectValue class]);

然後就能看到輸出結果:

2014-07-16 17:09:36.315 SliderDemo[71181:303] __NSCFNumber

意思就是NSNumber物件,如此一來就可以更了解,Slider回傳的物件值是NSNumber,也就能將程式改成:

    NSNumber *sliderValue = (NSNumber*)slider.objectValue;
    NSLog(@"%@",sliderValue);

之後需要什麼樣的型態直接從NSNumber的Method取得也可以。

程式直接取值

雖然程式與UI連動能立即得到值,但還是有另一個方式可以在您需要時直接取用物件並利用Method得到值,利用Reference Outlet方式將Slider物件指定成一個接口的變數名稱:

標頭檔(.h)宣告:

@property (weak) IBOutlet NSSlider *outletSlider;

那我們要取得值時就直接使用outletSlider物件:

程式內容(.m):

    NSNumber *sliderValue = (NSNumber*)_outletSlider.objectValue;
    NSLog(@"%@",sliderValue);

在Objective-C與Xcode環境中,對於元件與程式中的關聯性就是如此的操作,你可以指定事件發生時執行哪個Method,或是指接將元件指定成物件的名稱讓程式使用,這個方法要熟練。

程式碼擷圖

程式內容還蠻少的,所以將程式碼用擷圖方式顯示如下:

DYAppDelegate.m DYAppleDelegate.h

Slider關連性