macOS UI 资料输入！滑动条(Slider)的使用例子

滑动条(Slider)的使用例子

Slider 样式

滑动条(Slider)在Mac提供三种的程现方式：直式、横式、圆式，外观如下图：

分别视您的设计需求使用，这三个元件在Layout上的Library已经有提供：

但其实它们都是同一个元件NSSlider所产生的，如果元件已经配置好后，想要改变它的类型，需要在元件属性中重新选择：

但只能选择Linear与Circular，如果你的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关连性