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