我們在做IOS開發的時候，有時候會限制於系統自帶的一些控制元件，而無法做到更好的使用者體驗，今天我們就來介紹一下我們自己做的UICombox控制元件，先來看一下圖：

 

這是我們自定義的控制元件，實現了點選輸入框，彈出資料拾取器的效果

首先我們先來整理一下思路，UICombox看上去像UITextField吧，只是旁邊多了一個小圖片，那我們就可以通過繼承UITextField來實現，並重新整理UITextField的框架。

接下來就是下面的資料拾取器了，看到半遮照的效果，我們應該能想到是UIActionSheet吧，只不過我們把Action中的按鈕換成了我們自定義的效果，好了，思路整理得差不多，我們就來編碼了

01.#import <Foundation/Foundation.h> 02. 03.@interface UICombox: UITextField<UITextFieldDelegate, UIPickerViewDelegate, UIPickerViewDataSource> {

04.@private 05.UIActionSheet *action; 06.UIPickerView *picker; 07.} 08. 09.@property(nonatomic, copy) NSArray *items; 10.- (void)initComponents; 11. 12.@end
這裡我說一下，首先我們的UICombox繼承了UITextField，接著需要實現UIPickerView的一些方法才能產生我們需要的效果。items是由我們前部傳過來UICombx中需要顯示的值。還定義了一個初始化元件的方法。
1.-(void) didMoveToWindow {

2.UIWindow* appWindow = [self window];   3.if (appWindow != nil) {         4.[self initComponents];           5.} 6.}
初如化元件，程式啟動的時候就進行初始化

01.- (void)initComponents{  02.if(action != nil) return; 03.//Create UIDatePicker with UIToolbar. 04.action = [[UIActionSheet alloc] initWithTitle:@"" 05.delegate:nil

06.cancelButtonTitle:nil 07.destructiveButtonTitle:nil 08.otherButtonTitles:nil]; 09.//建立PickView 10.picker = [[UIPickerView alloc] initWithFrame:CGRectMake(0.0, 44.0, 0.0, 0.0)]; 11.picker.showsSelectionIndicator = YES; 12.picker.delegate = self; 13.picker.dataSource = self; 14. 15.//頂部工具條 16.UIToolbar *datePickerToolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, 320, 44)]; 17.datePickerToolbar.barStyle = UIBarStyleBlackOpaque; 18.[datePickerToolbar sizeToFit]; 19. 20.//定義兩個按鈕 21.NSMutableArray *barItems = [[NSMutableArray alloc] init];    22.UIBarButtonItem *btnFlexibleSpace = [[UIBarButtonItem alloc]  23.initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace 24.target:self action:nil]; 25.[barItems addObject:btnFlexibleSpace]; 26.[btnFlexibleSpace release]; 27. 28.UIBarButtonItem *btnCancel = [[UIBarButtonItem alloc]  29.initWithBarButtonSystemItem:UIBarButtonSystemItemCancel 30.target:self 31.action:@selector(doCancelClick:)]; 32.[barItems addObject:btnCancel]; 33.[btnCancel release]; 34. 35.UIBarButtonItem *btnDone = [[UIBarButtonItem alloc]  36.initWithBarButtonSystemItem:UIBarButtonSystemItemDone 37.target:self 38.action:@selector(doDoneClick:)]; 39. 40.[barItems addObject:btnDone]; 41.[btnDone release]; 42.[datePickerToolbar setItems:barItems animated:YES]; 43.[barItems release]; 44. 45.[action addSubview: datePickerToolbar]; 46.[action addSubview: picker]; 47. 48.[datePickerToolbar release]; 49. 50.}
這裡我們就將UIActionSheet進行了重定義，裡面加入了一個UIPickerView和一個UIToolbar，UIToolbar上的按鍵相對應的事件

 

01.- (void)doCancelClick:(id)sender{ 02.[action dismissWithClickedButtonIndex:0  animated:YES];      03.} 04. 05.- (void)doDoneClick:(id)sender{ 06.[action dismissWithClickedButtonIndex:1  animated:YES]; 07.//設定輸入框內容www.it165.net 08.[self setText:[items objectAtIndex:[picker selectedRowInComponent:0]]];  09.}

接下來就是當我們的控制元件取得響應的時候就啟動介面

01.- (BOOL)canBecomeFirstResponder {

02.return YES;  03.} 04. 05.- (BOOL)becomeFirstResponder { 06.if(action == nil) 07.[self initComponents];   08.if(action != nil){ 09.UIWindow* appWindow = [self window]; 10.[action showInView: appWindow]; 11.[action setBounds:CGRectMake(0, 0, 320, 500)]; 12.//如果當前輸入框內有內容 13.if (self.text.length > 0) { 14.//將橫條定位於當前選項 15.[picker selectRow:[items indexOfObject:self.text] inComponent:0 animated:NO]; 16.} 17.}    18.return YES; 19.}

OK，這裡完成以後，我們就來看一下我們的顯示介面。

 

01.- (void)didMoveToSuperview  02.{    03.action = nil; 04. 05.// lets load our indecicator image and get its size. 06.CGRect bounds = self.bounds; 07.UIImage* image = [UIImage imageNamed:@"downArrow.png"]; 08.CGSize imageSize = image.size; 09. 10.// create our indicator imageview and add it as a subview of our textview. 11.CGRect imageViewRect = CGRectMake((bounds.origin.x + bounds.size.width) - imageSize.width,  12.(bounds.size.height/2) - (imageSize.height/2),  13.imageSize.width, imageSize.height); 14. 15.UIImageView *indicator = [[UIImageView alloc] initWithFrame:imageViewRect]; 16.indicator.image = image; 17.[self addSubview:indicator]; 18.[indicator release];    19. 20.}

這裡給UITextField加入了一張圖片，使之組合起來，看起來像是一體的。

最後就是UIPickerViewDataSource和UIPickerViewDelegate了

01.#pragma mark PickViewDataSource 02.// returns the number of 'columns' to display. 03.- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{ 04.return 1; 05.} 06. 07.// returns the # of rows in each component.. 08.- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{ 09.return [items count]; 10.} 11. 12.#pragma mark PickViewDelegate 13.- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{ 14.return [items objectAtIndex:row]; 15.}

好了，到這裡我們就寫完了，是不是很簡單啊？

我們在我們的xib中加入我們自己的UITextField

 

別忘了在class一欄裡選擇UICombox這一項哦，這是使用了我們自定義的控制元件。

在我們的ViewController中定義兩個控制元件

1.@property (retain, nonatomic) IBOutlet UICombox *dataPicker; 2.@property (retain, nonatomic) IBOutlet UICombox *dataPicker1;
在-(void)ViewDidLoad中加入
1.NSArray *items = [NSArray arrayWithObjects:@"11111", @"22222", @"33333", @"44444", nil]; 2.dataPicker.items = items; 3. 4.NSArray *items1 = [NSArray arrayWithObjects:@"aaaaa", @"bbbbb", @"ccccc", @"ddddd", nil]; 5.dataPicker1.items = items1;

這兩個初始了我們自定義控制元件的資料來源。

好了，直接執行一下看看呢，是不是很棒啊？