IOS自製類似於下拉框的控制項，ios自製下拉框

IOS自製類似於下拉框的控制項，ios自製下拉框

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

 

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

第二步：操作main.storyboard

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

           註：將來點擊這個按鈕會彈出選取器，選擇內容後，會將按鈕的Title更改為我們選擇的內容；

 

   ——》再拖拽一個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);