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