IOS编程之自定义UICombox

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

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

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