macOS UI 對話框!儲存面板增加自定功能

對話框!儲存面板增加自定功能

儲存對話框(面板)功能

之前文章中已經有介紹開啟與儲存對話框(面板)功能如何使用,但如果你要自定一些功能在存檔時讓使用者選擇,那就需要自訂一些功能View讓NSSavePanel使用。

增加功能元件

開啟與儲存對話框除了內建的選擇供選擇外,也可以自定一些功能後,利用setAccessoryView將整個View加入自定功能區塊,也就是上圖中綠框處,例子中我們新增一個可以用點選的方式來選擇檔案類型,這功能也是最常用到的功能,後面會介紹如何完成這個功能。

繪制增加功能View

新增一個View,並且命名為PanelExtra.xib,視需要也可以自行訂名稱(後面再自行將程式內容做更改),

並且再自行繪製像這樣的元件,看完這篇學會怎麼增加自定功能後,View的內容就由您自已來設計了,此次範例所需要的畫面如下:

增加一個Format的選項讓使用者選擇檔案類型,接下來的內容就由程式來完成。

取得增加功能View物件

現在所需要提到的內容為新增的功能,針對這程式一開始必需要先載入剛剛畫好的View,但View是存入Layout的資源檔,所以我們需要載入資源檔:

//-----------start-----------
NSNib *accessoryNib = [[NSNib alloc] initWithNibNamed:@"PanelExtra" bundle:nil];//讀取Layout nib
//------------end------------

載入後必需要將裡面的View物件將它取出來:

//-----------start-----------
    NSUInteger viewIndex = [arrayOfViews indexOfObjectPassingTest:^BOOL(id obj, NSUInteger idx, BOOL *stop) {
        return [obj isKindOfClass:[NSView class]];//取得nib內容上的view,因在Layout上只有一個view
    }];
//------------end------------

取出來的View也就是先前圖中的Custome View,正常來說你取得View之後就能直接在NSSavePanel進行設定,但這些自建的功能必需要跟使用者互動,因此我們要利用取得的View尋找我們所配置的Format選項NSPopupButton物件,進行事件的設定,如此就能在使用者變更選項時能得到結果:

//-----------start-----------
    self.accessoryView = [arrayOfViews objectAtIndex:viewIndex];//取得view中的所有元件

    NSUInteger poputButtonIndex = [self.accessoryView.subviews indexOfObjectPassingTest:^BOOL(id obj, NSUInteger idx, BOOL *stop) {
        return [obj isKindOfClass:[NSPopUpButton class]];//取得view中為NSPopUpButton元件(layout上只有1個,所以直接找到後回傳物件位址)
    }];
//------------end------------

增加功能View的事件

前面已經取得Layout資源檔的物件,之後我們要再次利用一樣的方法將Format的物件取得:

//-----------start-----------
    self.popupButton = [self.accessoryView.subviews objectAtIndex:poputButtonIndex];
    //設定NSPopUpButton的事項
    self.popupButton.target = self;
    self.popupButton.action = @selector(fileTypeChanged:);//選擇改變後執行fileTypeChanged
    [self.popupButton removeAllItems];
    [self.popupButton addItemsWithTitles:@[@"*.png",@"*.jpg"]];//指定PopUpButton 項目
//------------end------------

其取得的意義在於要設定一些事件,像.action就是當使用者按選擇好選項時就會執行這個事件,addItemsWithTitles的Method可以自行用程式增加選項內容,這次示範的是增加*.png*.jpg

fileTypeChanged

對話框開啟時,會有一個讓我們輸入檔名的輸入欄位,這個需要使用nameFieldStringValue Method取得輸入檔名欄位上的內容:

//-----------start-----------
NSString *nameWithoutExtension = [[_savePanel nameFieldStringValue] stringByDeletingPathExtension];
//------------end------------

之後使用者進行互動選擇Format時,上述程式會本據選擇的結果進行處理,如果選擇*.png,那indexOfSelectedItem的值會是0,我們利用stringByDeletingPathExtension將原先的副檔名刪除,再利用stringByAppendingPathExtension補上指定的副檔名png

//-----------start-----------
- (void)fileTypeChanged:(id)sender
{
    //選項變更後進行副檔的處理,選擇副檔後將原本的副檔名取代
    NSString *nameWithoutExtension = [[_savePanel nameFieldStringValue] stringByDeletingPathExtension];
    switch ([self.popupButton indexOfSelectedItem]) {
        case 0:
        {
            _savePanel.allowedFileTypes = @[@"png"];

            [_savePanel setNameFieldStringValue:[nameWithoutExtension stringByAppendingPathExtension:@"png"]];
            NSLog(@"0");

            break;
        }
        case 1:
        {
            _savePanel.allowedFileTypes = @[@"jpg"];
            [_savePanel setNameFieldStringValue:[nameWithoutExtension stringByAppendingPathExtension:@"jpg"]];
            NSLog(@"1");
            break;
        }
    }


}

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

設定增加功能View

程式中我們將增加功能的View當成物件並使用變數accessoryView來控制,前面都將需要設定的程式碼都準備完成,下面只需要將View用setAccessoryView指定就完成:

//-----------start-----------
    [panel setAccessoryView:self.accessoryView];//將取得的view指定至Panel,它會在顯示區域將View顯示
//------------end------------

其他的開啟對話框方式都與般的使用方式一樣,但不同的事開啟對話框後會看到增加功能的View與對話框整合。

範例程式

Panel Add Options

參考資訊

File System Programming Guide