Pages

Wednesday, December 15, 2010

Date Picker and Picker View

Picker
Date picker 提供日期讓使用者選擇,而Picker View 可以做出比較多特效,有單一挑選值、兩個轉輪供挑選、兩個轉輪選擇值會互相依賴影響、或者在轉輪上面加上圖片和值。每一個轉輪稱為 Picker Component,可以依據實作方式決定它的外觀。使用 datasource 和 delegate 來做出特效。

使用 Picker 不能只是單純從 Interface Builder 拖拉配製就使用,需要額外提供 picker delegate 和 picker datasource。Datasource 告知 picker 有多少 components 需要運轉和多少項目供挑選來組成。Delegate 在這邊扮演最重要角色是每個 rows 要怎麼畫。Picker 會問 delegate 不論是顯示 String 或者圖片提供給該 component,picker 從 delegate 取得顯示資料。

DatePicker
在 DatePickerViewController 宣告 UIDatePicker,規劃出 IBOutlet 和 IBAction。另外在 Interface Builder 拖拉 Date Picker 之後,將相關的關聯配製好。之後回到 Xcode 在類似事件處理區,可以從 datePicker 取得 date 資訊了。

SingleComponentPicker
在 SingleComponentPicker 要記得 implement UIPickerViewDelegate, UIPickerViewDataSource。
@interface SingleComponentPickerViewController : UIViewController {...}
宣告 UIPickerView 和 NSArray 放置資料用,配製好 property 和相關 IBOutlet 以及 IBAction。在 Interface Builder 拖拉 Picker View 之後,將相關的關聯配製好,記得將 Delegate 和 DataSource 都要拖拉關聯到 File's Owner 上。
-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {...}
告知 Picker View 只要 show 一組。
-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {...}
回傳每一列有多少筆資料
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {...}
當畫面轉輪變換時候,可以更新取得值。

DoubleComponentPicker
跟 SingleComponentPicker 一樣的規劃,記得 implement UIPickerViewDelegate, UIPickerViewDataSource。
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {...}
告知要 show 兩組
-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {...}
當詢問哪一個 component 回傳該規劃的總量,類似給與 NSArray 的 count。
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {...}
當畫面轉輪變換時候,更新該 component 的值

DependentComponentPicker
跟前面一樣規劃,在 DependentComponentPickerView.m 實作 Picker Data Source 和 Picker Delegate 的 methods
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {...}
告知要 show 兩組
-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {...}
當詢問哪一個 component 回傳該規劃的總量,類似給與 NSArray 的 count。
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {...}
當畫面轉輪變換時候,更新該 component 的值
- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component {...}
因為我們要做出互動,所以當選的時候,透過這邊來改變 picker 的值,達到例如挑選了主選單,更新了副選單的值。

CustomPicker
為了做出 5 個轉輪特效,在 viewDidLoad method 要把 png 檔案 load 進來,放置在 UIImageView 裡面,再將這些配製到 5 個 NSArray 中。利用 spin method 來啓動轉動輪盤。
-(IBAction) spin {...}
這邊透過隨機來轉動轉輪,根據五個的圖片值,來決定是否獲勝 (出現三個相同圖案) 或者重試。
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {...}
告知要 show 5 組
-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {...}
回傳轉輪上面的圖片數量,所以 return [self.column1count]; 即可。
- (UIView *)pickerView:(UIPickerView *)pickerView
viewForRow:(NSInteger)row
forComponent:(NSInteger)component reusingView:(UIView *) view {...}
根據 compoent 編號,取得 Array,再根據 row 來回傳選取到的圖片。

以上一種 DatePicker 和四種 Picker View 的效果,我們可以學到彼此共同點和差異點,如果有興趣可以參考
書本 Beginning iPhone 3 Development 章節 Tab Bars and Pickers,或者 Github:edwardinubuntu/Picker

No comments:

Post a Comment