IOS development-Table view uidesign Mode

There are design patterns in software design, and design patterns in uidesign. Because table views are widely used in iOS, This section describes two uidesign modes in table views: Paging mode and pull-to-Refresh mode. These two models have become the standard for mobile platform development.

 

Paging Mode

The paging mode standardizes how mobile platforms process massive data requests.

Pull-down refresh Mode

Pull-to-refresh is used to refresh the table view or list and reload data. This mode is widely used on mobile platforms. The pull-down refresh is opposite to the paging. When the screen is turned to the top, the program pulls down the screen to request data again. The Waiting Indicator appears in the table view header and the table view header disappears. The pull-down refresh mode has an arrow animation effect.

 

The pull-down and refresh implementation code is available in many open-source communities. GitHub's git: // github.com/leah/pulltorefresh.githas a new example for reference.

Ios6 pull-down refresh control

As the pull-down refresh mode becomes more and more influential, Apple has to consider including it in its own specifications, and launched the pull-down refresh control in iOS 6 API. The pull-down refresh in iOS 6 is a bit like pulling a "Gum". When this "Gum" is broken, a wait indicator will appear.

 

After iOS 6, uitableviewcontroller adds a refreshcontrol attribute, which maintains a pointer to the uirefreshcontrol. Uirefreshcontrol is provided by iOS 6 for the drop-down refresh of the table view. Currently, the uirefreshcontrol class can only be applied to table view images. Other views cannot be used. This attribute is used with uitableviewcontroller. You do not need to consider the drop-down refresh layout and other issues. uitableviewcontroller will automatically place it in the table view.

Let's take an example to learn how to use the uirefreshcontrol control. Refer to the case for creating a simple table view, create the project "refreshcontrolsample", and then modify the code viewcontroller. h.

#import <UIKit/UIKit.h>@interface ViewController : UITableViewController@property (nonatomic,strong) NSMutableArray* Logs;@end

 

The logs attribute stores the ndate date list, which is used to display the required data in the table view. The initialization code in viewcontroller. m is as follows:

-(Void) viewdidload {[Super viewdidload]; // initialization variable and time self. logs = [[nsmutablearray alloc] init]; nsdate * Date = [[nsdate alloc] init]; [self. logs addobject: date]; // initialize uirefreshcontroluirefreshcontrol * rc = [[uirefreshcontrol alloc] init]; RC. attributedtitle = [[nsattributedstring alloc] initwithstring: @ "pull-down refresh"]; [RC addtarget: Self action: @ selector (refreshtableview) forcontrolevents: uicontroleventvaluechanged]; self. refreshcontrol = RC ;}

 

The viewdidload method initializes a simulation data of the current time. The construction method of uirefreshcontrol is init. The attributedtitle attribute is used to display the title text in the drop-down control. Addtarget: forcontrolevents of uirefreshcontrol: The method can be programmed to add a processing method for the uicontroleventvaluechanged event. Refreshtableview is the method for handling the uicontroleventvaluechanged event. The code of the refreshtableview method is as follows:

-(Void) refreshtableview {If (self. refreshcontrol. Refreshing) {self. refreshcontrol. attributedtitle = [[nsattributedstring alloc] initwithstring: @ "loading..."]; // Add a new simulated data nsdate * Date = [[nsdate alloc] init]; // After the simulated request is complete, the callback method callbackmethod [self defined mselector: @ selector (callbackmethod :) withobject: date afterdelay: 3] ;}}

 

The refreshing attribute of uirefreshcontrol can be used to determine whether the control is still in the refresh status. The icons in the refresh status are our common wait indicators, in this phase, set the title text to "loading ...". The next step is to perform network requests or database queries. After these operations are completed, the application calls back the callbackmethod method. This case involves cloud technologies. We use [self defined mselector: @ selector (callbackmethod :) withobject: Date afterdelay: 3] The callbackmethod method is called for statement delay to simulate implementation.

Callbackmethod: the code is as follows.

-(Void) callbackmethod :( ID) OBJ {[self. refreshcontrol endrefreshing]; self. refreshcontrol. attributedtitle = [[nsattributedstring alloc] initwithstring: @ "pull-down refresh"]; [self. logs addobject :( nsdate *) OBJ]; [self. tableview reloaddata];}

 

 

When the request is complete, the endrefreshing method can stop the pull-down refresh control and return to the initial state. The title text displayed is "pull-down refresh ". The [self. tableview reloaddata] statement is to reload the table view.

The code for implementing uitableviewdatasource is as follows:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {return 1;}- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {return [self.Logs count];}- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {static NSString *CellIdentifier = @”Cell”;UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];if (cell == nil) {cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:CellIdentifier];}NSDateFormatter *dateFormat = [[NSDateFormatter alloc] init];[dateFormat setDateFormat: @"yyyy-MM-dd HH:mm:ss zzz"];cell.textLabel.text = [dateFormat stringFromDate: [self.Logs objectAtIndex:[indexPath row]]];cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;return cell;}