Detail iOS App UIPickerView scroll selection bar add method

1. The width and height of UIPickerView are fixed, 320216 vertically and 568162 horizontally

2. Properties:

@property(nonatomic,readonly)NSInteger numberOfComponents; //  Select the number of rows in the box 
@property(nonatomic,assign)idUIPickerViewDataSource> dataSource; ( Similar to the UITableView)
@property(nonatomic,assign)idUIPickerViewDelegate>delegate; ( Similar to the UITableView)
(BOOL)showsSelectionIndicator//  Whether to display a selection indicator  , That is 1 I have a blue bar 
pickerView = [[UIPickerView alloc] initWithFrame:CGRectMake(0, 0, 320, 216)];  

//     The specified Delegate  

    pickerView.delegate=self;  

//     Show checkbox   

    pickerView.showsSelectionIndicator=YES;  

    [self.view addSubview:pickerView];  

Above can display 1 selector in the view, but the content is blank, pickerView. showsSelectionIndicator=YES; Is what the current picker selects:

The data displayed on the picker must rely on two protocols, UIPickerViewDelegate and UIPickerViewDataSource, to be added to the ViewController.h file

#import <UIKit/UIKit.h> 
@interface ViewController : UIViewController<UIPickerViewDelegate,UIPickerViewDataSource>  

{ 
    UIPickerView *pickerView;  

    NSArray *pickerData; 
} 
@end  

3. Then initialize the interface in ViewDidLoad of the.m file

- (void)viewDidLoad  

{  

    [super viewDidLoad];  

    // Do any additional setup after loading the view, typically from a nib. 
    pickerView = [[UIPickerView alloc] initWithFrame:CGRectMake(0, 0, 320, 216)];  

//     The specified Delegate  

    pickerView.delegate=self;  

//     Show checkbox   

    pickerView.showsSelectionIndicator=YES;  

    [self.view addSubview:pickerView];  
    NSArray *dataArray = [[NSArray alloc]initWithObjects:@" vae ",@" Jay Chou ",@" Fish leong ",@" Xu fei ",@" Phoenix legend ",@" Freddy adu ",@" Fang datong ",@" Jj Lin ",@" Hu Xia ",@" Qiu Yongchuan ", nil]; 
    pickerData=dataArray; 
//      Add a button      

    CGRect frame = CGRectMake(120, 250, 80, 40);  

    UIButton *selectButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];  

    selectButton.frame=frame;  

    [selectButton setTitle:@"SELECT" forState:UIControlStateNormal]; 
    [selectButton addTarget:self action:@selector(buttonPressed:) forControlEvents:UIControlEventTouchUpInside]; 
    [self.view addSubview:selectButton]; 
}

4. To implement UIPickerView's proxy method, several methods are needed to display data on the selector

#pragma mark -  

#pragma mark Picker Date Source Methods 
// Returns the number of columns displayed   

-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView  

{  

    return 1;  

}  

// Returns the number of rows displayed in the current column   

-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component  

{  

    return [pickerData count];  

} 
#pragma mark Picker Delegate Methods 
// Returns the contents of the current row , Here is the display bar that adds the value from the array to the scroll   

-(NSString*)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component  

{  

    return [pickerData objectAtIndex:row];  

}  

The first two are the proxy methods of the data source. The first one is the return column, and the second one is to set the number of rows in the selector. Because there is only one selector, it directly returns the number of rows, that is, the number of array elements. The third proxy method is to add array elements to the display above the picker;

Say 1 the next two protocol instance methods

Instance methods in UIPickerViewDelegate

//  When the user selects something row when 
- (void) pickerView: (UIPickerView *)pickerView didSelectRow: (NSInteger)row inComponent:                               (NSInteger)component
//  When it's drawing row content , Need to be row When the height of the 
(CGFloat) pickerView:(UIPickerView *)pickerView rowHeightForComponent: (NSInteger) component

//  Returns the specified component.row Displayed text 
(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger) component

//  when picker view It needs to be assigned component.row The specified view when , Call this function . The return value is used as row The content of view
(UIView *)pickerView: (UIPickerView *)pickerView view ForRow:(NSInteger) row forComponent:(NSInteger) component reusingView:(UIView *) view

// row The width of the 
(CGFloat)pickerView: (UIPickerView *)pickerView widthForComponent:(NSInteger) component

The instance method in UIPickerViewDataSource

According to the official document, the only function of UIPickerViewDataSource is to provide the number of component in picker view and the number of row in each component. Although named datasource, it works in C of MVC

There are only two instance methods in this Agreement, both of which need to be implemented:

//  Returns the number of columns 
(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView

//  Return each 1 The number of rows corresponding to a column 
(NSInteger) pickerView:(UIPickerView *) pickerView numberOfRowsInComponent:(NSInteger) component

5. The button response event, the formation and addition of the button response event are no longer mentioned, there are both in the front.

(void) buttonPressed:(id)sender  

{  

     NSInteger row =[pickerView selectedRowInComponent:0];  

     NSString *selected = [pickerData objectAtIndex:row];  

     NSString *message = [[NSString alloc] initWithFormat:@" What you chose :%@",selected]; 
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@" prompt "   

                                                    message:message  

                                                   delegate:self  

                                          cancelButtonTitle:@"OK"  

                                          otherButtonTitles: nil];  

    [alert show]; 
}  

@UIPickerView has other instance methods

//  Gets the number of rows for the specified column 
- (NSInteger) numberOfRowsInComponent:(NSInteger)component
//  Refresh all columns 
(void) reloadAllComponents

//  Refreshes the specified column 
(void) reloadComponent: (NSInteger) component
(CGSize) rowSizeForComponent: (NSInteger) component
//  Gets the number of rows selected for a column 
(NSInteger) selectedRowInComponent: (NSInteger) component

//  choose 1 line 
(void) selectRow: (NSInteger)row inComponent: (NSInteger)component animated: (BOOL)animated
(UIView *) viewForRow: (NSInteger)row forComponent: (NSInteger)component

PS: Multiple component correspond to different title methods
Sometimes we need to have multiple UIPickerView of component and corresponding different content, such as the choice of region, there need to be two options of province and city, choose different province, the city should change accordingly.

The number of component is assumed to be 2.

Use the function that specifies title to specify title for the second component according to [pickerView selectedRowInComponent:0]

- (NSString*)pickerView:(UIPickerView*)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {

}

But at this point, you will find that after switching the province, the city column 1 cannot refresh in time.

We also specify a refresh event.

- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component {

    [pickerView reloadComponent:1];

}