IOS自制類似於下拉框的控件

最近做的有關物流的APP中，貨物數量的單位需要在給定的范圍選取（比如：噸、方、件），但ios沒有類似Android中的下拉框，我就自己想了辦法自制了一個，效果還算滿意；以后項目組的本科小師妹會幫我一起做ios端的開發，在此表示感謝！！！

 

第一步：新建工程XiaLaKuang（名字比較俗，新建方法不再比比。。。）

第二步：操作main.storyboard

     ——》拖拽一個UIButton（命名Title為“噸”，background為“light gray”，Alignment中的Horizonal選擇靠左），再拖拽一個UIImage的圖像為三角箭頭的圖片，使按鈕看起來想一個下拉框；

           注：將來點擊這個按鈕會彈出選擇器，選擇內容后，會將按鈕的Title更改為我們選擇的內容；當然也可以將UIPickerView控件換成UITableView控件，那樣就不需要Toolbar控件，直接在UITableView的代理方法didSelected方法中編寫選擇結果動作；

 

   ——》再拖拽一個Toolbar、PickerView控件到按鈕的下方（稍微小一點，畢竟我們選擇的東西就很少），再往Toolbar上拖拽一個Item控件更名為“完成”，也可以再往Item的左側拖拽一個Flexible space使“完成”按鈕在右側；再將Toolbar和PickerView的Hidden勾選；

完成后的效果圖如下：

 

 

第三步：連線（控件與ViewController.m之間）

   ——》UIButton連接兩根線，一根Outlet“Button”，一根Action“BtnAction”；

   ——》Toolbar一根Outlet“Toolbar”；

   ——》UIPickerView一根Outlet“Picker”；

   ——》Toolbar上的“完成”按鈕連一根Action“selectedAction”；

   ——》給PickerView連接dataSource和delegate；（方法和UITableview顯示列表數據時的連線方法一樣，看我的上上篇博客）

 

第四步：編碼

   

#import "ViewController.h"

@interface ViewController ()<UIPickerViewDelegate,UIPickerViewDataSource> @property (weak, nonatomic) IBOutlet UIButton *danweiBtn; - (IBAction)BtnAction:(id)sender; @property (weak, nonatomic) IBOutlet UIToolbar *Toolbar; @property (weak, nonatomic) IBOutlet UIPickerView *Picker; - (IBAction)selectedAction:(id)sender; @property (nonatomic, strong) NSArray *danwei; @end

@implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib.
    _danwei = [NSArray arrayWithObjects:@"噸",@"方",@"件", nil]; } - (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView { return 1; } - (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component { return _danwei.count; } - (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component { return [_danwei objectAtIndex:row]; } - (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component { [self.danweiBtn setTitle:[_danwei objectAtIndex:row] forState:UIControlStateNormal]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated.
} - (IBAction)BtnAction:(id)sender { self.Picker.hidden = NO; self.Toolbar.hidden = NO; } - (IBAction)selectedAction:(id)sender { self.Picker.hidden = YES; self.Toolbar.hidden = YES; } @end

 

最終效果圖：

 

沒做那個黑色三角圖案旋轉，通常如果點擊下拉框后那個三角形是會旋轉的；感興趣的朋友可以嘗試一下

    三角圖片.transform = CGAffineTransformMakeRotation(M_PI);