SoFunction
Updated on 2025-04-12

Detailed explanation of how to add UIPickerView scroll selection bar in iOS App

The width and height are fixed, the longitudinal direction is 320216 and the horizontal direction is 568162

2. Properties:

Copy the codeThe code is as follows:

@property(nonatomic,readonly)NSInteger numberOfComponents; // Number of rows in the selection box

@property(nonatomic,assign)idUIPickerViewDataSource> dataSource; (similar to UITableView)

@property(nonatomic,assign)idUIPickerViewDelegate>delegate; (similar to UITableView)

(BOOL)showsSelectionIndicator// Whether to display the selection indicator, it is a blue bar

pickerView = [[UIPickerView alloc] initWithFrame:CGRectMake(0, 0, 320, 216)]; 
//    Specify Delegate
    =self; 
//     Show selected boxes
    =YES; 
    [ addSubview:pickerView]; 


The above can display a selector in the view, but the content is blank, =YES; is the content selected by this current selector:

The data displayed on the picker must be relied on two protocols, UIPickerViewDelegate and UIPickerViewDataSource, add them to the file

Copy the codeThe code is as follows:

#import <UIKit/> 

@interface ViewController : UIViewController<UIPickerViewDelegate,UIPickerViewDataSource> 

    UIPickerView *pickerView; 
    NSArray *pickerData; 

@end 


3. Then initialize the interface in ViewDidLoad in the .m file
Copy the codeThe code is as follows:

- (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)]; 
//    Specify Delegate
    =self; 
//     Show selected boxes
    =YES; 
    [ addSubview:pickerView];  

NSArray *dataArray = [[NSArray alloc]initWithObjects:@"Xu Song",@"Jay Chou",@"Liang Jingru",@"Xu Fei",@"Phoenix Legend",@"Adu",@"Fang Datong",@"JJ Lin",@"Hu Xia",@"Qiu Yongchuan", nil];

    pickerData=dataArray; 

//
    CGRect frame = CGRectMake(120, 250, 80, 40); 
    UIButton *selectButton = [UIButton buttonWithType:UIButtonTypeRoundedRect]; 
    =frame; 
    [selectButton setTitle:@"SELECT" forState:UIControlStateNormal]; 

    [selectButton addTarget:self action:@selector(buttonPressed:) forControlEvents:UIControlEventTouchUpInside]; 

    [ addSubview:selectButton]; 

}


4. Implement the proxy method of UIPickerView and display the data on the selector several methods
Copy the codeThe code is as follows:

#pragma mark - 
#pragma mark Picker Date Source Methods 

//Return the number of columns displayed
-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView 

    return 1; 

//Return the number of rows displayed in the current column
-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component 

    return [pickerData count]; 

#pragma mark Picker Delegate Methods 

//Return the content of the current line, here is to add the values ​​in the array to the scrolling display bar.
-(NSString*)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component 

    return [pickerData objectAtIndex:row]; 


The first two are proxy methods for data sources. One is to return columns, and the number of selectors returns when there are several selectors. The second is to set how many rows the selector has. Because this selector is only one selector, the number of rows is directly returned, that is, the number of array elements; the third proxy method is to add the array elements to the selector to display;

Let me talk about two protocol instance methods

Instance method in UIPickerViewDelegate

Copy the codeThe code is as follows:

// When the user selects a row

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

// When it is drawing row content, the height of row is required

(CGFloat) pickerView:(UIPickerView *)pickerView rowHeightForComponent: (NSInteger) component
// Return the specified displayed text

(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger) component
// When the picker view needs to give the specified view, call this function. The return value is the view used as row content

(UIView *)pickerView: (UIPickerView *)pickerView view ForRow:(NSInteger) row forComponent:(NSInteger) component reusingView:(UIView *) view
// The width of row

(CGFloat)pickerView: (UIPickerView *)pickerView widthForComponent:(NSInteger) component


Instance method in UIPickerViewDataSource

According to the official documentation, the only function of the UIPickerViewDataSource protocol is to provide the number of components in the picker view and the number of rows in each component. Although it is called datasource, it works in MVC's C.

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

Copy the codeThe code is as follows:

// Return the number of columns

(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
// Return the number of rows corresponding to each column

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


5. Regarding button response events, no longer mention the formation and addition of button response events, as before,
Copy the codeThe code is as follows:

(void) buttonPressed:(id)sender 

     NSInteger row =[pickerView selectedRowInComponent:0]; 
     NSString *selected = [pickerData objectAtIndex:row]; 
NSString *message = [[NSString alloc] initWithFormat:@"You chose:%@", selected];

UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Tip"
                                                    message:message 
                                                   delegate:self 
                                          cancelButtonTitle:@"OK" 
                                          otherButtonTitles: nil]; 
    [alert show]; 



@UIPickerView There are other instance methods
Copy the codeThe code is as follows:

// Get the number of rows in the specified column

- (NSInteger) numberOfRowsInComponent:(NSInteger)component

// Refresh all columns

(void) reloadAllComponents
// Refresh the specified column

(void) reloadComponent: (NSInteger) component

(CGSize) rowSizeForComponent: (NSInteger) component

// Get the number of rows selected by a column

(NSInteger) selectedRowInComponent: (NSInteger) component
// Select a row

(void) selectRow: (NSInteger)row inComponent: (NSInteger)component animated: (BOOL)animated

(UIView *) viewForRow: (NSInteger)row forComponent: (NSInteger)component

PS: Methods for multiple components corresponding to different titles
Sometimes we need to have multiple components of UIPickerView and correspond to different contents, such as the selection of regions, and there are two options: province and city. If you choose different provinces, the city needs to change accordingly.

The following assumes that the number of components is 2.

Use the function that specifies the title, specify the title of the second component according to the difference between [pickerView selectedRowInComponent:0]

Copy the codeThe code is as follows:

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

But at this time, you will find that after switching to provinces, the city column cannot be refreshed in time.

We also need to specify a refresh event.

Copy the codeThe code is as follows:

- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component {
    [pickerView reloadComponent:1];
}