天天看點

博文視點 瘋狂ios講義之選擇器(UIPickerView)

UIPickerView也是一個選擇器控件它比UIDatePicker更加通用它可以生成單列的選擇器也可生成多列的選擇器而且開發者完全可以自定義選擇項的外觀是以用法非常靈活。

UIPickerView直接繼承了UIView沒有繼承UIControl是以它不能像UIControl那樣綁定事件處理方法UIPickerView的事件處理由其委托對象完成。

UIPickerView控件常用的屬性和方法如下。

numberOfComponents擷取UIPickerView指定列中包含的清單項的數量。該屬性是一個隻讀屬性。

showsSelectionIndicator該屬性控制是否顯示UIPickerView中的選中标記以高亮背景作為選中标記。

- numberOfRowsInComponent:擷取UIPickerView包含的列數量。

- rowSizeForComponent:擷取UIPickerView包含的指定列中清單項的大小。該方法傳回一個CGSize對象。

- selectRow:inComponent:animated:該方法設定選中該UIPickerView中指定列的特定清單項。最後一個參數控制是否使用動畫。

- selectedRowInComponent:該方法傳回該UIPickerView指定列中被選中的清單項。

- viewForRow:forComponent:該方法傳回該UIPickerView指定列的清單項所使用的UIView控件。

UIDatePicker控件隻是負責該控件的通用行為而該控件包含多少列各列包含多少個清單項則由UIPickerViewDataSource對象負責。開發者必須為UIPickerView設定UIPickerViewDataSource對象并實作如下兩個方法。

- numberOfComponentsInPickerView:該UIPickerView将通過該方法來判斷應該包含多少列。

- pickerView:numberOfRowsInComponent:該UIPickerView将通過該方法判斷指定列應該包含多少個清單項。

如果程式需要控制UIPickerView中各列的寬度以及各列中清單項的大小和外觀或程式需要為UIPickerView的選中事件提供響應都需要為UIPickerView設定UIPickerViewDelegate委托對象并根據需要實作該委托對象中的如下方法。

- pickerView:rowHeightForComponent:該方法傳回的CGFloat值将作為該UIPickerView控件中指定列中清單項的高度。

- pickerView:widthForComponent:該方法傳回的CGFloat值将作為該UIPickerView控件中指定列的寬度。

- pickerView:titleForRow:forComponent:該方法傳回的NSString值将作為該UIPickerView控件中指定列的清單項的文本标題。

- pickerView:viewForRow:forComponent:reusingView:該方法傳回的UIView控件将直接作為該UIPickerView控件中指定列的指定清單項。

- pickerView:didSelectRow:inComponent:當使用者單擊選中該UIPickerView控件的指定列的指定清單項時将會激發該方法。

Interface Builder隻支援為UIPickerView設定一個屬性——Shows Selection Indicator該屬性用于控制是否顯示UIPickerView中的選中标記以高亮背景作為選中标記。

下面通過程式來介紹UIPickerView 的功能和用法。

博文視點 瘋狂ios講義之選擇器(UIPickerView)

對于單列選擇器隻要控制UIPickerView的dataSource對象的numberOfComponentsInPickerView:方法傳回1即可。

下面建立一個單列選擇器首先建立一個Single View Application使用Interface Builder打開應用的界面設計檔案并将一個UIPickerView拖入界面設計檔案中為在程式中通路該控件需要将該控件綁定到picker IBOutlet屬性。

接下來開始修改控制器類本例打算使用控制器類作為UIPickerView的dataSource和delegate是以程式需要讓控制器類實作UIPickerViewDataSource、UIPickerViewDelegate兩個協定。

修改控制器類的實作代碼主要就是實作UIPickerViewDataSource、UIPickerViewDelegate兩個協定中的必要方法其代碼如下。

程式清單codes/10/10.12/UIPickerViewTest/UIPickerViewTest /FKViewController.m

上面的程式首先初始化了一個NSArray接下來的關鍵就是實作了4個用粗體字表示的方法其中有兩個方法來自UIPickerViewDataSource協定分别用于控制該UIPickerView控件包含多少列、各列包含多少個清單項另兩個方法則來自UIPickerViewDelegate最後一個粗體字方法負責為UIPickerView控件的選中事件提供響應——當使用者選中該UIPickerView的某個清單項時系統将會自動激發該方法該方法的實作邏輯就是使用UIAlertView顯示使用者選擇的圖書。

編譯、運作該程式可以看到如圖10.46所示的效果。

博文視點 瘋狂ios講義之選擇器(UIPickerView)

圖10.46 單列UIPickerView

如果使用者選擇某個清單項程式将會彈出如圖10.47所示的UIAlertView警告框。

博文視點 瘋狂ios講義之選擇器(UIPickerView)

圖10.47 選中指定項

10.12.2多列選擇器

對單列選擇器而言隻要控制UIPickerView的dataSource對象的numberOfComponentsInPickerView:方法傳回大于1的整數即可。

本節建立一個多列選擇器首先建立一個Single View Application使用Interface Builder打開應用的界面設計檔案并将一個UIPickerView拖入界面設計檔案中為在程式中通路該控件需要将該控件綁定到picker IBOutlet屬性。

接下來修改控制器類本例打算使用控制器類作為UIPickerView的dataSource和delegate是以程式需要讓控制器類實作UIPickerViewDataSource、UIPickerViewDelegate兩個協定。

程式清單codes/10/10.12/MultiPickerTest/MultiPickerTest/FKViewController.m

<a href="http://s3.51cto.com/wyfs02/M02/11/E0/wKiom1Lh3YmRzs5rAAVQN1OLw2o668.jpg" target="_blank"></a>

該程式與前一個程式基本相似同樣需要實作上面4個方法隻是numberOfComponentsInPickerView:方法傳回了2是以該UIPickerView包含兩列程式建立了兩個NSArray分别為兩列提供資料項。除此之外上面的程式還實作了一個pickerView:widthForComponent:方法該方法的傳回值控制UIPickerView中各列的寬度。

編譯、運作該程式可以看到如圖10.48所示的兩列選擇器。

博文視點 瘋狂ios講義之選擇器(UIPickerView)

如果使用者選中指定的清單項該應用同樣會彈出UIAlertView顯示使用者的選擇彈出的警告框與圖10.47類似。

博文視點 瘋狂ios講義之選擇器(UIPickerView)

10.12.2節的示例雖然是一個兩列的UIPickerView控件但該控件的兩列基本沒有任何關系選擇第一列的作者時第二列的圖書不會動态更新——在某些情況下這是允許的。但在某些情況下我們需要第二列的清單項依賴第一列的選擇即當第一列選擇作者時第二列隻顯示該作者的圖書。

為了讓第二列能根據第一列的選擇動态加載程式需要使用者選擇第一列的事件并根據該事件動态加載第二列的資料然後強制重新加載UIDatePicker的第二列清單項。

下面建立一個互相依賴的多列選擇器首先建立一個Single View Application使用Interface Builder打開應用的界面設計檔案并将一個UIPickerView拖入界面設計檔案中為在程式中通路該控件需要将該控件綁定到picker IBOutlet屬性。

接下來開始修改控制器類本例使用控制器類作為UIPickerView的dataSource和delegate是以程式需要讓控制器類實作UIPickerViewDataSource、UIPickerViewDelegate兩個協定。

程式清單codes/10/10.12/MultiPickerTest2/MultiPickerTest2/FKViewController.m

<a href="http://s3.51cto.com/wyfs02/M00/11/E0/wKiom1Lh3anierVNAAKkNnb8FmI167.jpg" target="_blank"></a>

<a href="http://s3.51cto.com/wyfs02/M02/11/DF/wKioL1Lh3Yax-9mlAATlgf-usJU978.jpg" target="_blank"></a>

<a href="http://s3.51cto.com/wyfs02/M01/11/E0/wKiom1Lh3ani5QD-AAOGIPTDPrM107.jpg" target="_blank"></a>

上面控制器類的實作部分與前一個示例中控制器類的實作部分大緻相同關鍵就是程式中的粗體字代碼。本程式采用了NSDictionary分别儲存NSPickerView控件中的兩列資料NSDictionary的所有key組成的集合作為第1列的資料當使用者選中第一列的某個作者後程式取出NSDictionary中該作者對應的圖書集合作為第二列的資料。這就可以讓第二列資料随第一列的選擇動态改變。

編譯、運作該程式在第一列中選中某個作者可以看到如圖10.49所示的效果。

博文視點 瘋狂ios講義之選擇器(UIPickerView)
博文視點 瘋狂ios講義之選擇器(UIPickerView)

前面示例看到的所有清單項都是文字形式實際上UIPickerView允許開發者對清單項進行任意定制。開發者隻要實作UIPickerViewDelegate協定中的-pickerView:viewForRow:forComponent: reusingView:方法即可該方法傳回的UIView将作為UIPickerView指定列和清單項的視圖控件。

博文視點 瘋狂ios講義之選擇器(UIPickerView)

下面以一個簡單的“老虎機”遊戲執行個體來示範自定義選擇器視圖的用法。

首先建立一個Single View Application使用Interface Builder打開應用的界面設計檔案并将一個UIPickerView拖入界面設計檔案中再将一個UIImageView和一個UIButton拖入應用界面中然後将這三個控件擺放整齊。為了在程式中通路這三個控件分别将它們綁定到picker、image、startBn這三個IBAction屬性。除此之外程式還需要響應按鈕的點選事件是以為該按鈕控件的Touch Up Inside事件綁定clicked:事件處理方法。

提示

“老虎機”遊戲的清單項都是圖示則需要為該執行個體準備一些圖示——讀者既可用本執行個體提供的圖示也可用自己選擇的圖示但圖示不要太大以小于60像素×60像素為宜将這些圖示拖入應用中即可。

接下來開始修改控制器類本例使用控制器類作為UIPickerView的dataSource和delegate是以程式需要讓控制器類實作UIPickerViewDataSource、UIPickerViewDelegate兩個協定。除此之外程式需要分别為UIPickerView的5列準備資料是以程式在控制器類的接口部分定義了5個NSArray屬性其代碼如下。

程式清單codes/10/10.12/CustomPicker/CustomPicker/FKViewController.h

然後修改該控制器類的實作部分主要就是實作UIPickerViewDataSource、UIPickerViewDelegate兩個協定中的必要方法其代碼如下。

程式清單codes/10/10.12/CustomPicker/CustomPicker/FKViewController.m

<a href="http://s3.51cto.com/wyfs02/M00/11/DF/wKioL1Lh3Z6TScODAAFE2DW3Ffk832.jpg" target="_blank"></a>

<a href="http://s3.51cto.com/wyfs02/M02/11/E0/wKiom1Lh3eqDTgtxAAGSFOgP1W8114.jpg" target="_blank"></a>

<a href="http://s3.51cto.com/wyfs02/M01/11/DF/wKioL1Lh3cfgwoLXAASBfSLja0w777.jpg" target="_blank"></a>

<a href="http://s3.51cto.com/wyfs02/M00/11/E0/wKiom1Lh3euB3_szAAMyfwZjZMM749.jpg" target="_blank"></a>

<a href="http://s3.51cto.com/wyfs02/M02/11/DF/wKioL1Lh3ceD0UnvAAS3oRyRNbM590.jpg" target="_blank"></a>

上面程式中為UIPickerView實作自定義清單項的關鍵就是第一段粗體字代碼該方法傳回一個UIImageView作為各列的清單項控件。是以該示例中UIPickerView所包含的各列的清單項都是UIImageView控件。

接下來的兩行粗體字代碼負責生成一個随機數并根據生成的随機數來選中UIPickerView的指定清單項這樣就可讓UIPickerView的5列随機選中指定的清單項——程式接下來的代碼判斷5個随機數中是否有相同的數出現過3次以上意味着UIPickerView的5列中出現了3個以上相同的圖示——如果符合該條件程式就延遲0.5秒執行showWin方法該方法就是播放勝利音樂并顯示勝利圖示否則就延遲0.5秒執行showLose方法該方法顯示失敗圖示。

由于該程式使用AudioToolbox來播放音樂是以程式還需要将win.wav和crunch.wav兩個音樂檔案拖入項目中。除此之外iOS項目預設是不帶AudioToolbox庫的是以需要手動添加AudioToolbox庫為iOS項目添加指定庫的步驟如下。

①在項目導航面闆中單擊指定項目對應的圖示。

②選中中間編輯區域左側的TARGETS下面的應用如圖10.50所示。

博文視點 瘋狂ios講義之選擇器(UIPickerView)

圖10.50 添加庫

③選擇編輯視窗上方的Build Phases标簽單擊Link Binary With Libraries旁邊的三角符号即可展開該項目目前包含的所有庫如圖10.51所示。

博文視點 瘋狂ios講義之選擇器(UIPickerView)

圖10.51檢視項目已包含的庫

④ 單擊圖10.51所示視窗中“添加庫”的“+”圖示系統将會顯示如圖10.52所示的庫清單。

⑤在圖10.52所示的對話框中選中需要添加的庫也可通過上面的搜尋框進行搜尋單擊“Add”按鈕即可完成添加。

博文視點 瘋狂ios講義之選擇器(UIPickerView)

圖10.52 選擇需要添加的庫

按上面所示步驟為該項目添加AudioToolbox庫然後編譯、運作該程式即可通過單擊程式界面上的按鈕開始遊戲遊戲界面如圖10.53所示。

博文視點 瘋狂ios講義之選擇器(UIPickerView)

圖10.53 自定義UIPickerView實作老虎機

————本文節選自《瘋狂ios講義》

博文視點 瘋狂ios講義之選擇器(UIPickerView)

本文轉自 

fkJava李剛 51CTO部落格,原文連結:http://blog.51cto.com/javaligang/1354375 ,如需轉載請自行聯系原作者

繼續閱讀