IOS learning notes-iOS advanced controls and ios learning notes controls

IOS learning notes-iOS advanced controls and ios learning notes controls
UITableView

There are two types of UITableView styles, one is Grouped (left) and the other is Plain (right). For example, its attribute is style and its type is UITableViewStyle, the enumerated values are UITableViewStyleGrouped and UITableViewStylePlain;

The ViewController of this control can use UITableViewController. When this ViewController is used, you do not need to create another UITableView, which also contains the UITableViewDataSource and UITableViewDelegate implementations. These two classes will be discussed later, however, there are also some inconveniences. By default, the tableView created using UITableViewController is full screen. If tableView is not full screen, we should use UIViewController.

The data of UITableView can be dynamically bound through Static binding and Dynamic binding. The control is dynamically bound by default, and the Content attribute is set in the StoryBoard. It has two values: Static Cell and Dynamic, as the name implies. If Static Cell is set, you can click the Section title to control the number of rows in UITableView, and add the number of rows. To add content to a row, drag the control directly into the cell.

To dynamically add content to UITableView, You need to implement several methods of UITableViewDataSource and UITableViewDelegate. In fact, the two methods work together a little like the various adapters in Andriod. The Adapter in Android specifies the layout of each element in the list, the data source of the list, the two protocols are used to transmit data sources and define data cells.

 

// Return the number of groups-(NSInteger) numberOfSectionsInTableView :( UITableView *) tableView {} // number of rows in each group-(NSInteger) tableView :( UITableView *) tableView numberOfRowsInSection :( NSInteger) section {} // defines the content of a cell and returns it. -(UITableViewCell *) tableView :( UITableView *) tableView cellForRowAtIndexPath :( NSIndexPath *) indexPath {}

 

If you use UITableViewController, you can directly implement these methods. If you use UIViewController, You can explicitly implement UITableViewDataSource and UITableViewDelegate in the location of the class declaration.

Every cell object in UITableView is of the UITableViewCell type. Construct and return in the last method above. There are several Cell Layout types, which are enumeration of the UITableViewCellStyle type and are generally set in the initialization function.

• UITableViewCellStyleDefault: There is only one left-aligned Label, and its value is set through the cell's textLabel

• UITableViewCellStyleValue1: A left-aligned Label and a right-aligned blue font Label. The left-aligned Label is set through the cell's textLabel, and the right-aligned Label is set through the cell's detailTextLabel

• UITableViewCellStyleValue2: There are two Lebel, but the Lable on the left is right-aligned. The Label attribute is the same as the previous one, and the effect is as follows:

• UITableViewCellStyleSubtitle: there are also two Lable. The second Lable of this style acts as the subtitle

 

The layout of each cell is divided into three parts: Left, right, icon on the left, attachment view on the right, and arrow on the attachment. It uses the UITableViewCellAccessoryType attribute accessoryType, which has the following values:

• UITableViewCellAccessoryNone,
• UITableViewCellAccessoryDisclosureIndicator,
• UITableViewCellAccessoryDetailDisclosureButton,
• UITableViewCellAccessoryCheckmark,
• UITableViewCellAccessoryDetailButton

The five values are listed in the official documents, but my environment is iOS6. Only the values (except None) are available ). You can also add controls in the attachment area. In the following format, you can add a switch control to each row.

cell.accessoryView= [[UISwitch alloc]init];

 

 

UITableViewCell provides imageView to set the icon of each cell. It is a UIImageView type attribute. You can directly add an icon for each row by setting its image attribute, as shown in figure

cell.imageView.image=[UIImage imageNamed:@"African Daisy.gif"];

 

If these controls are still too few, you can also use the Cell contentCell addSubview method to add controls to cells, as shown below.

[cell.contentView addSubview:label];

 

However, you must control the number of controls added to the Cell, because if there are more than 3 or 4 controls, the efficiency will be affected, and the list will be stuck during scrolling.

You can add a View to the end of the UITableView header group. If you want to add a View to the end of the table header, you can set the tableHeaderView and tableFoorterView attributes of the UITableVIew, as shown below:

self.tableView.tableHeaderView=[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"bd_logo1.png"] highlightedImage:nil];self.tableView.tableFooterView=[[UISwitch alloc]init];

 

You can implement the following two methods to add the group header and the group end:

-(NSString *) tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section{}-(NSString *) tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{}

 

I have mentioned so much before. Now I will give a simple example to illustrate the dynamic binding process.

The data source used here is self-filled,

@ Property (nonatomic, strong) NSArray * carGroups;-(NSArray *) carGroups {if (_ carGroups = nil) {// 1. create model HGTableviewModel * cg1 = [[HGTableviewModel alloc] init]; cg1.group = @ ""; cg1.desc = @ ""; cg1.cars = @ [@ "Honda ", @ "Toyota", @ "Nissan"]; HGTableviewModel * cg2 = [[HGTableviewModel alloc] init]; cg2.group = @ "grimace"; cg2.desc = @ ""; cg2.cars = @ [@ "", @ "Buick",]; // 2. add the model to the array _ carGroups = @ [cg1, cg2];} return _ carGroups ;}

 

Specify the data source for tableView in the viewDidLoad Method

self.tableView.dataSource=self;

 

In this method, you can make other settings for tableView. Here we will not illustrate them one by one. Finally, we will get the number of groups, the number of columns in each group, and construct three methods for cells.

-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{return self.carGroups.count;}-(NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{HGTableviewModel *item= self.carGroups[section];return item.cars.count;}-(UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{UITableViewCell *cell=nil;if(indexPath.section==0)cell=[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:nil];elsecell=[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:nil];HGTableviewModel *item=self.carGroups[indexPath.section];cell.textLabel.text= item.cars[indexPath.row];cell.accessoryType= UITableViewCellAccessoryDetailDisclosureButton;cell.detailTextLabel.text=item.desc;if(indexPath.section==0)cell.imageView.image=[UIImage imageNamed:@"African Daisy.gif"];elsecell.accessoryView= [[UISwitch alloc]init];//[UIButton buttonWithType:UIButtonTypeContactAdd];return cell;}

 

If you want to bind a method to the selected cell event, you only need to implement the following method. As shown in the code below, a box is displayed after a row is selected to show which brand is selected.

-(Void) tableView :( UITableView *) tableView didSelectRowAtIndexPath :( NSIndexPath *) indexPath {NSString * msg = [[NSString alloc] initWithFormat: @ "you selected % @", (HGTableviewModel *) self. carGroups [indexPath. section]). cars [indexPath. row]; UIAlertView * alert = [[UIAlertView alloc] initWithTitle: @ "selected row" message: msg delegate: self cancelButtonTitle: nil otherButtonTitles: @ "OK", nil]; [alert show];}

 

UIDatePickerView

UIDatePickerView is a space selected by date and time. It is displayed in the form of a scroll wheel. You can set its current display time and maximum and minimum time ranges. These values are of the NSDate type,

NSDateFormatter *formatter=[[NSDateFormatter alloc]init];[formatter setDateFormat:@"yyyy-MM-dd HH:mm:ss"];self.dtpDateTime.minimumDate= [formatter dateFromString:@"2011-01-01 00:00:00"];self.dtpDateTime.maximumDate=[formatter dateFromString:@"2015-01-01 00:00:00"];self.dtpDateTime.date=[formatter dateFromString:@"2015-03-01 00:00:00"];

 

It has a datePickerMode attribute to set the display type of DatePicker. It is an enumeration of the UIDatePickerMode type and has the following values respectively.

• UIDatePickerModeTime: clock mode, only time,
• UIDatePickerModeDate: Date Mode
• UIDatePickerModeDateAndTime: Date and time mode. The time is only time, and the date is only month and day.
• UIDatePickerModeCountDownTimer: clock mode, only hours, but 24 hours

Shows the sequence.

UIDatePicker has a ValueChange event that is triggered after the Value of the control changes. You need to bind the event. Use StoryBoard or the addTargetWithActionForControlEvents method. The following shows the current date output after the Value is changed.

-(IBAction) dtpValueChanged :( id) sender {NSLog (@ "current date is % @", self. dtpDateTime. date );}

 

UIPickerView

UIPickerView presents the data list as a scroll wheel. Similar to UITableVIew, UIPickerViewDataSource and UIPickerViewDelegate are required for data binding. However, UIPickerView does not support static data binding. Data Binding mainly implements the following methods of the two Protocols.

// Return the number of columns displayed-(NSInteger) rows :( UIPickerView *) pickerView {} // return the number of rows displayed in the current column-(NSInteger) pickerView :( UIPickerView *) pickerView numberOfRowsInComponent :( NSInteger) component {} // The following method is the PickerDelegate protocol. You can select either of them to return the content displayed for each item-(NSString *) pickerView :( UIPickerView *) pickerView titleForRow :( NSInteger) row forComponent :( NSInteger) component {}-(UIView *) pickerView :( UIPickerView *) pickerView viewForRow :( NSInteger) row forComponent :( NSInteger) component reusingView :( UIView *) view {}

 

If the scroll wheel contains only some plain text information, you can use the method that returns the String. If each item is non-text, you need to use the method that returns the UIView, if View is returned, it indicates that any control can be returned, including custom controls.

If you want to trigger the event execution method after the UIPickerView is selected, the following method can be implemented:

-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{NSLog([[NSString alloc]initWithFormat:@"SELECT Item %@ " ,[pickerDs objectAtIndex:row] ] );}

 

The following provides an example to illustrate the process of binding UIPicker data. The data in the example is copied from a netizen's blog.

The first is to implement two protocols.

@interface HGDatePickerViewController : UIViewController<UIPickerViewDataSource,UIPickerViewDelegate >@end 

The StoryBoard is used to create an associated variable picker and define an NSArray variable for the data source. Then, add the following code in viewDidLoad. The most important thing is to set deletage.

PickerDs = [[NSArray alloc] initWithObjects: @ "Xu Ke", @ "Jay Chou", @ "Liang jingru", @ "Xu Fei", @ "Phoenix Legend", @ "Addu ", @ "fang Datong", @ "Lin Junjie", @ "Hu Xia", @ "Qiu Yongchuan", nil]; self. picker. delegate = self;

 

Then implement the method mentioned above. Here we list the two UIPickerViewDelegate methods. The one that returns the View is to return a UILabel, which lists them separately.

-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{return 1;}-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{return [pickerDs count];}- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{return [pickerDs objectAtIndex:row];}- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view{UILabel *myView = nil;myView = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 0.0, 180, 30)];myView.text = [pickerDs objectAtIndex:row];myView.textAlignment = UITextAlignmentCenter;myView.font = [UIFont systemFontOfSize:14];myView.backgroundColor = [UIColor clearColor];return myView;}

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

-(UIView *) pickerView :( UIPickerView *) pickerView viewForRow :( NSInteger) row forComponent :( NSInteger) component reusingView :( UIView *) view Implementation Effect

In fact, UIPicker can achieve the multi-level linkage effect like the drop-down menu in BS or CS development in the past, which is not detailed here, mainly through-(void) pickerView :( UIPickerView *) pickerView didSelectRow :( NSInteger) row inComponent :( NSInteger) The component method calls [self. picker reloadComponent: xxx.

UIActionSheet

The UIActionSheet control was used by others when I checked UIDatePicker. It seems to be useful, so I recorded it. I don't have iOS devices, so I don't know much about any of them, I have seen this control in an interface prototype diagram before, but I don't know it's ActionSheet. This ActionSheet is similar to AlertView. You can also pop up a button selection box on the interface, with a mask effect.

To use this UIActionSheet, You need to implement the UIActionSheetDelegate protocol. The code for constructing and initializing the ActionSheet is as follows:

UIActionSheet *as=[[UIActionSheet alloc]initWithTitle:@"This is my First ActionSheet" delegate:selfcancelButtonTitle:@"Cancle" destructiveButtonTitle:@"Sure" otherButtonTitles:@"First Btn",@"Second Btn", nil];

 

The preceding parameters have two special buttons, cancelButton and destructiveButton. In ActionSheet, the buttons also have a certain sequence. For example, in AlertView, all buttons have a certain order, by default, destructiveButton is ranked first, followed by a red button, followed by an ortherButton. The order of the buttons is determined by the order in which they are added, and the last is cancelButton, is a black button. In the above initialization function, if the button is not required, nil can be passed in. The effects shown in the above ActionSheet are as follows:

You can also call the following method to add an OtherButton.

[as addButtonWithTitle:@"addButton"];

 

The destructiveButton can also be replaced by other buttons.

as.destructiveButtonIndex=1;

 

Results:

Show ActionSheet, call the following method

[as showInView:self.view];

 

During the development process, it is found that sometimes the last click of UIActionSheet is invalid and it is valid when the upper half of the last item is clicked. This occurs only in certain situations, this scenario is available only when UITabBar is used. Solution:

[ActionSheet showInView: [UIApplication sharedApplication]. keyWindow]; or [sheet showInView: [AppDelegate sharedDelegate]. tabBarController. view.

The actionSheetStyle attribute of ActionSheet is to set the ActionSheet style. It is an enumeration of the UIActionSheetStyle type, which has the following three values:

• UIActionSheetStyleDefault // default style: white text displayed on the gray background
• UIActionSheetStyleBlackTranslucent // transparent black background, white text
• UIActionSheetStyleBlackOpaque // black background, white text

Similar to UIAlertView, UIActionSheet also has a set of methods that appear in the ActionSheet. When you click and disappear, the call is triggered.

-(void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex{} -(void)willPresentActionSheet:(UIActionSheet *)actionSheet{}-(void)didPresentActionSheet:(UIActionSheet *)actionSheet{}-(void)actionSheetCancel:(UIActionSheet *)actionSheet{ }-(void)actionSheet:(UIActionSheet *)actionSheet didDismissWithButtonIndex:(NSInteger)buttonIndex{}-(void)actionSheet:(UIActionSheet *)actionSheet willDismissWithButtonIndex:(NSInteger)buttonIndex{}

 

Here we have encountered the actionSheetCancel method in UIAlert, which knows when to trigger. The trigger sequence of these methods is as follows (actionSheetCancel is inferred from the order in UIAlertView)

WillPresentActionSheet --> didPresentActionSheet

After clicking the button

ActionSheetclickedButtonAtIndex --> willDismissWithButtonIndex --> didDismissWithButtonIndex