IOS custom controls are similar to those in the drop-down box and ios custom drop-down boxes

Source: Internet
Author: User

IOS custom controls are similar to those in the drop-down box and ios custom drop-down boxes

In the recently developed logistics-related APP, the number of goods units must be selected within a given range (for example, tons, sides, and parts), but ios does not have a drop-down box similar to Android, I tried to make one myself, and the effect was satisfactory. Later, my undergraduate teacher and sister from the project team will help me develop ios products. Thank you !!!

 

Step 1: Create a project XiaLaKuang (the name is more common, and the new method is no longer compared ...)

Step 2: operate main. storyboard

-- Drag a UIButton named "ton", background named "light gray", and Horizonal in Alignment to the left, and then drag a UIImage image with a triangular arrow, make the button look like a drop-down box;

Note: in the future, clicking this button will bring up a selector. After selecting the content, the Title of the button will be changed to the selected content;

 

-- Drag a Toolbar and the PickerView control to the bottom of the button (a little smaller, after all, we have few choices ), drag an Item control to the Toolbar and rename it "finished". You can also drag a Flexible space to the left of the Item to make the "finished" button on the right; then, select Hidden of Toolbar and PickerView;

After completion, it is as follows:

 

 

Step 3: connect (between the control and ViewController. m)

-- UIButton connects two lines, one Outlet "Button" and one Action "BtnAction ";

-- A Toolbar Outlet "Toolbar ";

-- UIPickerView an Outlet "Picker ";

--> The "finish" button on the Toolbar connects to an Action "selectedAction ";

-- "Connect dataSource and delegate to PickerView. (The method is the same as that when UITableview displays list data. view my previous blog)

 

Step 4: Encoding

# Import "ViewController. h "@ interface ViewController () <UIPickerViewDelegate, UIPickerViewDataSource> @ property (weak, nonatomic) IBOutlet UIButton * danweibo tn;-(IBAction) BtnAction :( id) sender; @ property (weak, nonatomic) IBOutlet Toolbar * 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: @ "T", @ "", @ "", 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. danweibo tn setTitle: [_ danwei objectAtIndex: row] forState: UIControlStateNormal];}-(void) handle {[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

 

Finally:

 

Do not rotate the black triangle pattern. Generally, if you click the drop-down box, the triangle will rotate. If you are interested, try it.

Triangle image. transform = CGAffineTransformMakeRotation (M_PI );

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.