[iPhone中級] IOS中實現自訂UICombox

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

這是我們自訂的控制項，實現了點擊輸入框，彈出資料拾取器的效果

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

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

#import <Foundation/Foundation.h>@interface UICombox: UITextField<UITextFieldDelegate, UIPickerViewDelegate, UIPickerViewDataSource> {@privateUIActionSheet *action;UIPickerView *picker;}@property(nonatomic, copy) NSArray *items;- (void)initComponents;@end

這裡我說一下，首先我們的UICombox繼承了UITextField，接著需要實現UIPickerView的一些方法才能產生我們需要的效果。items是由我們前部傳過來UICombx中需要顯示的值。還定義了一個初始化組件的方法。

-(void) didMoveToWindow {UIWindow* appWindow = [self window];  if (appWindow != nil) {                [self initComponents];            }}

初如化組件，程式啟動的時候就進行初始化

- (void)initComponents{if(action != nil) return;    //Create UIDatePicker with UIToolbar.action = [[UIActionSheet alloc] initWithTitle:@"" delegate:nilcancelButtonTitle:nil   destructiveButtonTitle:nilotherButtonTitles:nil];//建立PickView    picker = [[UIPickerView alloc] initWithFrame:CGRectMake(0.0, 44.0, 0.0, 0.0)];    picker.showsSelectionIndicator = YES;    picker.delegate = self;    picker.dataSource = self;        //頂部工具條UIToolbar *datePickerToolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];datePickerToolbar.barStyle = UIBarStyleBlackOpaque;[datePickerToolbar sizeToFit];    //定義兩個按鈕NSMutableArray *barItems = [[NSMutableArray alloc] init];UIBarButtonItem *btnFlexibleSpace = [[UIBarButtonItem alloc]  initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:self action:nil];[barItems addObject:btnFlexibleSpace];[btnFlexibleSpace release];UIBarButtonItem *btnCancel = [[UIBarButtonItem alloc]   initWithBarButtonSystemItem:UIBarButtonSystemItemCancel  target:self  action:@selector(doCancelClick:)];[barItems addObject:btnCancel];[btnCancel release];UIBarButtonItem *btnDone = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDonetarget:selfaction:@selector(doDoneClick:)];[barItems addObject:btnDone];[btnDone release];[datePickerToolbar setItems:barItems animated:YES];[barItems release];[action addSubview: datePickerToolbar];[action addSubview: picker];[datePickerToolbar release];}

這裡我們就將UIActionSheet進行了重定義，裡面加入了一個UIPickerView和一個UIToolbar，UIToolbar上的按鍵相對應的事件

- (void)doCancelClick:(id)sender{[action dismissWithClickedButtonIndex:0  animated:YES];}- (void)doDoneClick:(id)sender{[action dismissWithClickedButtonIndex:1  animated:YES];//設定輸入框內容    [self setText:[items objectAtIndex:[picker selectedRowInComponent:0]]];}

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

- (BOOL)canBecomeFirstResponder {return YES;}- (BOOL)becomeFirstResponder {if(action == nil)[self initComponents]; if(action != nil){UIWindow* appWindow = [self window];[action showInView: appWindow];[action setBounds:CGRectMake(0, 0, 320, 500)];        //如果當前輸入框內有內容        if (self.text.length > 0) {            //將橫條定位於當前選項            [picker selectRow:[items indexOfObject:self.text] inComponent:0 animated:NO];        }}    return YES;}

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

- (void)didMoveToSuperview {action = nil;// lets load our indecicator image and get its size.CGRect bounds = self.bounds;UIImage* image = [UIImage imageNamed:@"downArrow.png"];CGSize imageSize = image.size;// create our indicator imageview and add it as a subview of our textview.CGRect imageViewRect = CGRectMake((bounds.origin.x + bounds.size.width) - imageSize.width,   (bounds.size.height/2) - (imageSize.height/2),   imageSize.width, imageSize.height);UIImageView *indicator = [[UIImageView alloc] initWithFrame:imageViewRect];indicator.image = image;[self addSubview:indicator];[indicator release];   }

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

最後就是UIPickerViewDataSource和UIPickerViewDelegate了

#pragma mark PickViewDataSource// returns the number of 'columns' to display.- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{    return 1;}// returns the # of rows in each component..- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{    return [items count];}#pragma mark PickViewDelegate- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{    return [items objectAtIndex:row];}

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

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

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

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

@property (retain, nonatomic) IBOutlet UICombox *dataPicker;@property (retain, nonatomic) IBOutlet UICombox *dataPicker1;

在-(void)ViewDidLoad中加入

NSArray *items = [NSArray arrayWithObjects:@"11111", @"22222", @"33333", @"44444", nil];    dataPicker.items = items;        NSArray *items1 = [NSArray arrayWithObjects:@"aaaaa", @"bbbbb", @"ccccc", @"ddddd", nil];    dataPicker1.items = items1;

這兩個初始了我們自訂控制項的資料來源。

好了，直接運行一下看看呢，是不是很棒啊？源碼下載