Explain how to add uipickerview scrolling selection bar in IOS app _ios

Source: Internet
Author: User
Tags instance method uikit

The width and height of the 1.UIPickerView are fixed, the portrait is 320216, and the transverse is 568162.

2. Properties:

Copy Code code 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 a selection indicator is displayed, that is, a blue bar

Pickerview = [[Uipickerview alloc] Initwithframe:cgrectmake (0, 0, 320, 216)];
Specify delegate
pickerview.delegate=self;
Show check box
Pickerview.showsselectionindicator=yes;
[Self.view Addsubview:pickerview];


The above can display a selector in the view, but the content is blank, Pickerview.showsselectionindicator=yes is the only selection selected by this current selector:

To display data on the picker, you must rely on two protocols, Uipickerviewdelegate and Uipickerviewdatasource, to add them to the ViewController.h file

Copy Code code as follows:

#import <UIKit/UIKit.h>

@interface viewcontroller:uiviewcontroller<uipickerviewdelegate,uipickerviewdatasource>
{

Uipickerview *pickerview;
Nsarray *pickerdata;

}

@end


3. Then initialize the interface in the viewdidload of the. m file
Copy Code code as follows:

-(void) viewdidload
{
[Super Viewdidload];
Do no additional setup after loading the view, typically from a nib.

Pickerview = [[Uipickerview alloc] Initwithframe:cgrectmake (0, 0, 320, 216)];
Specify delegate
pickerview.delegate=self;
Show check box
Pickerview.showsselectionindicator=yes;
[Self.view Addsubview:pickerview];

Nsarray *dataarray = [Nsarray alloc]initwithobjects:@ "Xu song", @ "Jay Chou", @ "Leong", @ "Xu Fei", @ "Phoenix legend", @ "Ah du", @ "square Datong", @ "JJ Lin", @ "Hu Xia", @ "Chu Yong Biography", 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. Implementation of Uipickerview proxy method, the data displayed on the selector of several methods required
Copy Code code as follows:

#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, where the values in the array are added 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 the data source, one is to return the column, several pickers will return a few, and the second is to set how many rows the picker has, because in this selector, it returns the number of rows directly, that is, the number of elements in the array; The third proxy method is to add the array elements to the selector display;

Say two protocol instance methods

An instance method in Uipickerviewdelegate

Copy Code code as follows:

//when user selects a row

-(void) Pickerview: (Uipickerview *) Pickerview D Idselectrow: (nsinteger) Row incomponent:                                ( Nsinteger) component

//when it needs a row height when it is drawing row content

(cgfloat) Pickerview: (Uipickerview *) Pickerview Rowheightforcomponent: (Nsinteger) component
//returns the text displayed by the specified Component.row

(NSString *) Pickerview: ( Uipickerview *) Pickerview Titleforrow: (nsinteger) Row forcomponent: (nsinteger) component
//When Picker This function is called when view needs to specify view for the specified component.row. The return value is the view

(UIView *) Pickerview that is used as the row content: (Uipickerview *) Pickerview view Forrow: (Nsinteger) Row forcomponent: (Nsinteger) component Reusingview: (UIView *) View
//Row width

(cgfloat) pic Kerview: (Uipickerview *) Pickerview widthforcomponent: (nsinteger) component


An instance method in Uipickerviewdatasource

According to the official document, Uipickerviewdatasource the only function of this protocol is to provide the number of component in Picker view and the number of row in each component, although named DataSource, But it works in the C of MVC.

This agreement has only two instance methods, all of which need to be implemented:

Copy Code code as follows:

Returns the number of columns

(Nsinteger) Numberofcomponentsinpickerview: (Uipickerview *) Pickerview
Returns the number of rows per column

(Nsinteger) Pickerview: (Uipickerview *) Pickerview numberofrowsincomponent: (Nsinteger) component


5. About the button response event, about the formation of the button and add the response event no longer mentioned, before,
Copy Code code as follows:

(void) buttonpressed: (ID) sender
{
Nsinteger row =[pickerview selectedrowincomponent:0];
NSString *selected = [Pickerdata objectatindex:row];
NSString *message = [[NSString alloc] initwithformat:@ "Your choice is:%@", selected];

Uialertview *alert = [[Uialertview alloc] initwithtitle:@ "Prompt"
Message:message
Delegate:self
cancelbuttontitle:@ "OK"
Otherbuttontitles:nil];
[Alert show];

}


@UIPickerView There are other instance methods
Copy Code code as follows:

Gets the number of rows in the specified column

-(Nsinteger) Numberofrowsincomponent: (Nsinteger) component

To refresh all columns

(void) reloadallcomponents
Refreshes the specified column

(void) Reloadcomponent: (Nsinteger) component

(cgsize) Rowsizeforcomponent: (Nsinteger) component

Gets 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: Multiple component corresponding to different title of the method
Sometimes we need to have multiple component Uipickerview and corresponding to different content, such as the choice of regions, provinces and cities need to have two options, choose different provinces, the city should be changed accordingly.

The following assumes a component quantity of 2.

Specifies the title of the second component, based on the difference between [Pickerview selectedrowincomponent:0], using the specified title function.

Copy Code code as follows:

-(nsstring*) Pickerview: (uipickerview*) Pickerview Titleforrow: (nsinteger) Row forcomponent: (Nsinteger) Component {
}

But at this point, you will find that after switching provinces, the city column does not have the means to refresh in time.

We also want to specify the refresh event.

Copy Code code as follows:

-(void) Pickerview: (Uipickerview *) Pickerview Didselectrow: (nsinteger) Row incomponent: (Nsinteger) Component {
[Pickerview reloadcomponent:1];
}

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.