macOS UI 选择! Pop-up Buttons

选择! Pop-up Buttons

Pop-up Button 像 Radio Buttons会有个列表让使用者选择,它可以设定多选或是单一选择,但列表的宽度是以项目内容最长当做最长宽度,不像Radio Buttons能针对个别来设定它的长度,当你按下 Pop-up Button上的Button,它会跳出一个展开的选单,并列出设定的选项,像下图一样:

建立 Pop-up Buttons

在物件Library中选择Pop Up Button物件,并且将它拖拉至Layout之中,并移至适当的位置,

修改 Pop-up Buttons

Pop-Up Buttons是利用很多个Menu Item所组成的,预设会有三组Menu Item,并且名称为Item 1、Item 2、Item 3,如果要修改内容时,必需要利用滑鼠连点击2次或是在Windows配置上直接点击结构选择你要修改的Menu Item

点选你要修改的Menu Item后,再来修改该Item的属性内容:

其中有2个项目必需要先介绍一下:

  • Title 这是该Item项目的内容,透过更改的方式可以变更原先内定的Item 1~3的内容
  • State 状态与Radio Buttons功能一样,但它是以勾选的方式显示On/Off
    • On 选单中会有已勾选的符号
    • Off 选单中勾选符号会取消

调整项目顺序

内容都修改完成后,也可以使用拖、拉的方式调整项目的顺序,这下图提供2个方式调整:

你可以透过左方Widnows上的树状结构调整它的顺序,或是直接在Layout上面的Pop-up Buttons物件上滑鼠连按两下叫出Menu Item来拖、拉调整顺序都可以,下图是将Item 2移至最下面,这样顺序就会成Item 1、3、2:

增加子选项

新建Pop-up Buttons时的第一层为最上面的选单,依照特性可以再增加子选单,先到Library物件中找到Submenu Menu Item,一定要这类的才能在主要选单中再增加子选单,再用拖拉、放的方式将子选单调整后放至主选单中:

调整好子选单的放置位子后,整个会像下图一样:

子选单的设定主要与主选单提供的方式大略相同,这不再多加描述。

程式增加选单项目

Pop-up Buttons的项目可以直接在Layout时增加,另外还能用程式去增加它,增加项目是利用阵列的方式将所有项目新增进去,在此之前必需要先将Pop-up Buttons物件与程式做个关连后再使用Pop-up Buttons物件的method新增,现在来照着步骤来完成。

标头档(.h)宣告

//-----------start-----------
@property (weak) IBOutlet NSPopUpButton *popupButtonMy;

//------------end------------

程式档(.m)

//-----------start-----------
    NSArray *myArray = @[@"I1",@"I2",@"I3"];
    [_popupButtonMy removeAllItems];
    [_popupButtonMy addItemsWithTitles:myArray];
//------------end------------

关连

上图为开始进行关联的滑鼠拖拉动作

选到App Delegate时,Xcode会去寻找未使用的IBAction宣告并将它列出来供选择,这只有宣告一组,会看到popupButtonMy。

完成后能看到上图有变化,这代表关联完成,程式启重后就能看到如下图用程式更改项目的结果:

获取选择结果

标头档(.h)宣告

//-----------start-----------
- (IBAction)popupButtonMyAction:(id)sender;

//------------end------------

程式档(.m)

//-----------start-----------
- (IBAction)popupButtonMyAction:(id)sender {
    NSInteger index = [sender indexOfSelectedItem];
    NSLog(@"你选择的项目索引值 is %ld", index);
}
//------------end------------

关连

上图为开始进行关联的滑鼠拖拉动作

选到App Delegate时,Xcode会去寻找未使用的IBAction宣告并将它列出来供选择,这只有宣告一组,会看到popupButtonMyAction。

完成后能看到上图有变化,这代表关联完成。

执行测试

当你利用滑鼠选择好项目时,该事件就会触发IBAction,所以程式中立即印出你选择的索引值,索引值从0开始:

2014-07-29 16:57:53.218 Popup Button Demo[9773:303] 你选择的项目索引值 is 1

利用索引值您就能对使用者所选择的项目进行对应的动作,不过要记住的一点:未做选择时,一开始预设项目是不会触发事件

另外你也可以加入将已选择项目的标题印出:

//-----------start-----------
- (IBAction)popupButtonMyAction:(id)sender {
    NSInteger index = [sender indexOfSelectedItem];
    NSLog(@"你选择的项目索引值 is %ld", index);
    //
    NSPopUpButtonCell *selCell = [sender selectedCell];
    NSLog (@"你选择项目的标题 %@", selCell.title);
}
//------------end------------

NSPopUpButton是由多个NSPopUpButtonCell所组成的,当你选择项目时,其实选择到的是NSPopUpButtonCell,所以我们透过NSPopUpButton提供的method将已选择项目的NSPopUpButtonCell回传,如此一来就能取得它的标题名称。

执行的结果:

2014-07-29 17:05:08.126 Popup Button Demo[9880:303] 你选择的项目索引值 is 1
2014-07-29 17:05:08.127 Popup Button Demo[9880:303] 你选择项目的标题 I2
2014-07-29 17:05:11.710 Popup Button Demo[9880:303] 你选择的项目索引值 is 2
2014-07-29 17:05:11.711 Popup Button Demo[9880:303] 你选择项目的标题 I3