[IPhone intermediate] implementing custom uicombox in IOS

During iOS development, we sometimes restrict some of the controls that come with the system, but cannot achieve a better user experience. Today we will introduce our own uicombox controls, first, let's take a look:

This is our custom control, which enables you to click the input box to bring up the data picker effect.

First, let's sort out our ideas. uicombox looks like uitextfield, but there is a small image next to it. Then we can inherit uitextfield and reorganize the uitextfield framework.

The next step is the data picker below. We should be able to think of uiactionsheet when we see the half-screen effect, but we changed the buttons in the action to our custom effect, we will encode the ideas.

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

Here I will talk about it. First, our uicombox inherits uitextfield, and then we need to implement some uipickerview methods to produce the expected results. Items is the value to be displayed in uicombx transmitted from the front. A Method for initializing components is also defined.

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

Initialization starts when the program starts.

-(Void) initcomponents {If (action! = Nil) return; // create uidatepicker with uitoolbar. action = [[uiactionsheet alloc] initwithtitle: @ "" delegate: delimiter: Nil destructivebuttontitle: delimiter: Nil]; // create a pickview picker = [[uipickerview alloc] initwithframe: cgrectmake (0.0, 44.0, 0.0, 0.0)]; picker. showsselectionindicator = yes; picker. delegate = self; picker. datasource = self; // top toolbar uitoolbar * datepickertoolbar = [[uitoolbar alloc] initwithframe: cgrectmake (0, 0,320, 44)]; datepickertoolbar. barstyle = require; [datepickertoolbar sizetofit]; // define two buttons for Export * baritems = [[nsmutablearray alloc] init]; uibarbuttonitem * btnflexiblespace = [[uibarbuttonitem alloc] lower: lower target: self action: Nil]; [baritems addobject: btnflexiblespace]; [btnflexiblespace release]; uibarbuttonitem * btncancel = [[uibarbuttonitem alloc] usage: Custom target: Self action: @ selector (docancelclick :)]; [baritems addobject: btncancel]; [btncancel release]; uibarbuttonitem * btndone = [[uibarbuttonitem alloc] failed: Failed: selfaction: @ selector (dodoneclick :)]; [baritems addobject: btndone]; [btndone release]; [eclipsetitems: baritems animated: Yes]; [baritems release]; [Action addsubview: datepickertoolbar]; [Action addsubview: picker]; [datepickertoolbar release];}

Here we have redefined uiactionsheet, which includes a uipickerview and an event corresponding to the buttons on uitoolbar and uitoolbar.

-(Void) docancelclick :( ID) sender {[Action dismisswithclickedbuttonindex: 0 animated: Yes];}-(void) dodoneclick :( ID) sender {[Action dismisswithclickedbuttonindex: 1 animated: yes]; // set the content of the input box [self settext: [items objectatindex: [picker selectedrowincomponent: 0];}

The next step is to start the interface when our control gets a response.

-(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 the input box contains content if (self. text. length> 0) {// locate the horizontal bar in the current option [picker selectrow: [items indexofobject: Self. text] incomponent: 0 animated: No] ;}} return yes ;}

OK. Now, let's take a look at our display interface.

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

Here we add an image to uitextfield to make it together and it looks like a whole.

Uipickerviewdatasource and 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];}

Okay. Now we have finished writing. Isn't it easy?

We add our own uitextfield to our XIB

Don't forget to select uicombox in the class column. This is a custom control.

Define two controls in our viewcontroller

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

In-(void) viewdidload, add

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

These two initial data sources of our custom controls.

Okay. Just run it and see if it's great? Source code download