[iPhone中级] IOS中实现自定义UICombox

我们在做IOS开发的时候，有时候会限制于系统自带的一些控件，而无法做到更好的用户体验，今天我们就来介绍一下我们自己做的UICombox控件，先来看一下图：

这是我们自定义的控件，实现了点击输入框，弹出数据拾取器的效果

首先我们先来整理一下思路，UICombox看上去像UITextField吧，只是旁边多了一个小图片，那我们就可以通过继承UITextField来实现，并重新整理UITextField的框架。

接下来就是下面的数据拾取器了，看到半遮照的效果，我们应该能想到是UIActionSheet吧，只不过我们把Action中的按钮换成了我们自定义的效果，好了，思路整理得差不多，我们就来编码了

#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中需要显示的值。还定义了一个初始化组件的方法。

-(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: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上的按键相对应的事件

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

这两个初始了我们自定义控件的数据源。

好了，直接运行一下看看呢，是不是很棒啊？源码下载