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

 

這是我們自定義的控件，實現了點擊輸入框，彈出數據拾取器的效果

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

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

[java]
<SPAN style="FONT-SIZE: 18px">#import <Foundation/Foundation.h> 
 
@interface UICombox: UITextField<UITextFieldDelegate, UIPickerViewDelegate, UIPickerViewDataSource> { 
@private 
    UIActionSheet *action; 
    UIPickerView *picker; 
} 
 
@property(nonatomic, copy) NSArray *items; 
- (void)initComponents; 
 
@end</SPAN> 

#import <Foundation/Foundation.h>

@interface UICombox: UITextField<UITextFieldDelegate, UIPickerViewDelegate, UIPickerViewDataSource> {
@private
 UIActionSheet *action;
 UIPickerView *picker;
}

@property(nonatomic, copy) NSArray *items;
- (void)initComponents;

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

[java]
<SPAN style="FONT-SIZE: 18px">-(void) didMoveToWindow { 
    UIWindow* appWindow = [self window];   
    if (appWindow != nil) {         
        [self initComponents];           
    } 
}</SPAN> 

-(void) didMoveToWindow {
 UIWindow* appWindow = [self window]; 
 if (appWindow != nil) {       
        [self initComponents];         
    }
}初如化組件，程序啟動的時候就進行初始化

[java] view plaincopyprint?<SPAN style="FONT-SIZE: 18px">- (void)initComponents{    
    if(action != nil) return; 
    //Create UIDatePicker with UIToolbar.  
    action = [[UIActionSheet alloc] initWithTitle:@"" 
                                         delegate:nil 
                                cancelButtonTitle:nil 
                           destructiveButtonTitle:nil 
                                otherButtonTitles: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:UIBarButtonSystemItemDone 
                                target:self 
                                action:@selector(doDoneClick:)]; 
     
    [barItems addObject:btnDone]; 
    [btnDone release]; 
    [datePickerToolbar setItems:barItems animated:YES]; 
    [barItems release]; 
     
    [action addSubview: datePickerToolbar]; 
    [action addSubview: picker]; 
     
    [datePickerToolbar release]; 
     
} 
</SPAN> 

- (void)initComponents{ 
 if(action != nil) return;
    //Create UIDatePicker with UIToolbar.
 action = [[UIActionSheet alloc] initWithTitle:@""
           delegate:nil
        cancelButtonTitle:nil
         destructiveButtonTitle:nil
        otherButtonTitles: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:UIBarButtonSystemItemDone
        target:self
        action:@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上的按鍵相對應的事件

 

 

[java]
<SPAN style="FONT-SIZE: 18px">- (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]]];  
}</SPAN> 

- (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]]]; 
}
接下來就是當我們的控件取得響應的時候就啟動界面

[java]
<SPAN style="FONT-SIZE: 18px">- (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; 
}</SPAN> 

- (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，這裡完成以後，我們就來看一下我們的顯示界面。

 

 

[java]
<SPAN style="FONT-SIZE: 18px">- (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];    
     
} 
</SPAN> 

- (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了

[java]
<SPAN style="FONT-SIZE: 18px">#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]; 
}</SPAN> 

#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中定義兩個控件

[java]
<SPAN style="FONT-SIZE: 18px">@property (retain, nonatomic) IBOutlet UICombox *dataPicker; 
@property (retain, nonatomic) IBOutlet UICombox *dataPicker1;</SPAN> 

@property (retain, nonatomic) IBOutlet UICombox *dataPicker;
@property (retain, nonatomic) IBOutlet UICombox *dataPicker1;在-(void)ViewDidLoad中加入

[java]
<SPAN style="FONT-SIZE: 18px">NSArray *items = [NSArray arrayWithObjects:@"11111", @"22222", @"33333", @"44444", nil]; 
    dataPicker.items = items; 
     
    NSArray *items1 = [NSArray arrayWithObjects:@"aaaaa", @"bbbbb", @"ccccc", @"ddddd", nil]; 
    dataPicker1.items = items1;</SPAN> 
作者：kangkangz4