IOS中实现自定义UICombox

们在做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