IOS development of the Cascade Interface (recommended interface) to build principles _ios

Source: Internet
Author: User

First look at the effect chart:

I. Overall layout
1. Project requirements
Click on the left cell, the cell data on the right update
2. The interface constructs
2.1 to two controller management more trouble, click a controller need to notify another controller
2.2 So it is better to give a controller management
2.3 With Xib to build, left and right to put a tableview on it
3. Development sequence
First do the left side of the TableView, and then to the right, because the right data is based on the left side of the change

Two. Left TableView interface to build
1. Custom cell
One indicator to the left the middle position of the view in Europe with label
2. Set up a data source
Two TableView sets the same controller as the data source and the proxy, the way to realize the method is to judge the type of TableView first
3. Request data, view interface documentation
4. Dictionary Turn model
5. Display data
6. Operation found a tableview top is blocked, the other is not blocked, why?
Apple defaults to only the interface to the previous ScrollView set the additional scrolling area, only to cancel the automatic setting of the extra scrolling area, you can manually set the
7. Select the cell and let the cell indicator show
7.1 How to achieve?
Monitor cell selected, select Let indicator display
7.2 but also listen for unchecked, hide the indicator
7.3 How to simultaneously monitor a cell is selected and another cell is unchecked?
The cell itself has a way to monitor simultaneously

Call time: When a cell is selected, it is invoked, and a cell is unchecked when it is called
 -(void) setselected: (BOOL) selected animated: (BOOL) animated 


7.4 Cell does not require a selected state
Self.selectionstyle = Uitableviewcellselectionstylenone;

8. Click on the left cell, request the right TableView data
Listen for clicks on the left cell, then send the network request, request the right data

Three. Right TableView interface to build
1.xib Multiplexing
Xib can also be reused, when the two interface xib the same, you can use the same xib, as long as the Xib pass a different model can
2. Right TableView business logic
3. Click on the cell on the left, send the network request, request the right data
4. Request data, view interface documentation
4.1 found a parameter category_id needs to load the right data based on the ID returned by the left server, so we'll add an id attribute to the left TableView model
4.2 Multiplexing model, the model can also be reused, only need to add the original model of the data required properties can
5. Display the data, click on the left cell, the right side shows the corresponding data

Four. Overall data optimization
1. Select the No. 0 cell on the left by default

Copy Code code as follows:
-(void) Selectrowatindexpath: (Nullable Nsindexpath *) Indexpath animated: (BOOL) animated scrollposition: ( uitableviewscrollposition) scrollposition;

2. The No. 0 cell is selected by default. Where is it written?
2.1 Written in Viewdidload?
No, there's no data available at this time.
2.2 To write after the data is loaded successfully and the table is refreshed

To refresh the code:

[Self.categorytableview Reloaddata]; 
The default is to select the No. 0 cell
nsindexpath *indexpath = [Nsindexpath indexpathforrow:0 insection:0];
[Self.categorytableview selectrowatindexpath:indexpath Animated:yes Scrollposition:uitableviewscrollpositionnone] ; 

3. Manually select the No. 0 cell on the left, found the right data did not refresh

3.1 Why?

Because-(void) TableView: (UITableView *) TableView Didselectrowatindexpath: (Nsindexpath *) Indexpath method must be clicked by the user manually to trigger

3.2 How to solve?
Call this method yourself, write it on the default to select the No. 0 cell.

[Self TableView:self.categoryTableView didselectrowatindexpath:indexpath];

4. Data optimization
4.1 Each click on the left cell, the right cell needs to send requests to obtain data, consumption performance
4.2 If it is loaded once, it will be saved and the next time it will not be loaded.
4.3 Where to save?
In the user array of the corresponding classification model, a user array is defined in the classification TableView model, and the TableView data on the right side of the left cell is saved.
4.4 How do I get a set of models for the left cell?
To request the right data, the corresponding cell on the left must be selected, and the model can be obtained by recording the corresponding model of the cell.
4.5 in the method of selecting the left cell, first determine whether the user array in the model (the corresponding data array on the right) has a value
If you have a value, refresh the table directly, and then return, do not send a network request
If not, send a network request, after the successful request, save the data, refresh the table, show the data

Five. Pull up and down refresh
1. Project requirements: The right tableview need to pull up and down refresh function
2. How to achieve up and down pull refresh?
Using the Mjrefresh framework
3. Drop-down refresh, directly load the latest data, cover off the original can be
We used to directly use the array in the model, overwriting the original data, so we do not have to do to remove the original data processing
4. Pull Up Refresh business logic
4.1 Pull refresh, need to load more data, how to load more data?
Need a parameter (page or ID) to get more data
4.2 This parameter (page) server will return, we need to record, where to record?
Should be logged to the left TableView model, when requesting more data, take this parameter out of the model and send the request
4.3 To restore the page parameter when the dropdown is refreshed
Resets the page to 1, otherwise the Drop-down refresh will load data from other page numbers to the Value data disorder
4.4 When we load more data, we're going to page +1 because the page of the record is passed as the next request parameter
Note: as long as the request data, the request succeeds, will be to page + 1
4.5 On-Pull refresh, processing of data
Pull refresh, you need to display the original data with the newly loaded data
4.6 How to show together?
Save the loaded data with an array and add the elements in the array to the original data array
4.7, how do you add an element of an array to another array?
Pass-(void) AddObject: (ObjectType) AnObject; method?
No, this method adds the entire array as an element to the other array [_selectcategoryitem.users addobject:users];
4.8. Which method is it used?

-(void) Addobjectsfromarray: (nsarray<objecttype> *) Otherarray;

This method takes each element out of the array and adds it to the other array.
5. Pull up Refresh details processing
5.1 When there is no more data, you need to hide the pull refresh control
5.2 How to hide?
Get control set hidden property Self.userTableView.mj_footer.hidden
5.3 What are the hidden conditions?
Need to determine the current user group, there are no more users
5.4 How to judge?
The data returned by the server has a Total_page property, and if the current page >= total_page There is no more data
5.5 Need to save the Total_page property, where to save it?
Save to the left TableView model, each time the request succeeds, the Total_page property is saved to the corresponding user group
5.6 When the table is refreshed, the current page property is the value of the current page + 1
So set up pull refresh hidden conditions should be: page > Total_page
5.7 Where is the hidden code written?
After the table is refreshed, the MJ refresh frame automatically determines whether to hide it after each refresh of the data, and must be set to be useful after refreshing the method.
5.8 Every time you click on the left cell, also to determine whether to hide the pull refresh control, why?
It is possible that the data is only one page, not judged, it will display the pull refresh control, to refresh the time, can not get more data

Source

-(void) viewdidload {[Super viewdidload];
 Self.title = @ "Recommended attention";
 Self.automaticallyadjustsscrollviewinsets = NO;
 _categorytableview.contentinset = Uiedgeinsetsmake (64, 0, 0, 0);
 _usertableview.contentinset = Uiedgeinsetsmake (64, 0, 0, 0); Classification TableView registered Cell [_categorytableview registernib:[uinib nibwithnibname:@ "Xmgcategorycell" Bundle:nil]
 Forcellreuseidentifier:categoryid]; User TableView Register cell [_usertableview registernib:[uinib nibwithnibname:@ "Xmgsubtagcell" Bundle:nil]
 Forcellreuseidentifier:userid];
 Request categorical data [self loadcategorydata]; 
Add up and down pull refresh [self setuprefreshview]; }-(void) Setuprefreshview {//dropdown refresh//When let go and the Drop-down refresh is fully displayed, it triggers the Drop-down refresh mjrefreshnormalheader *header = [Mjrefreshnormalhead
 Er headerwithrefreshingtarget:self refreshingaction: @selector (loadnewuserdata)];
 Header.automaticallychangealpha = YES;
 
 Self.userTableView.mj_header = header; Pull refresh Mjrefreshautonormalfooter *footer = [Mjrefreshautonormalfooter footerwithrefreshingtarget:self refreshinGaction: @selector (loadmoreuserdata)];
 Footer.automaticallyhidden = YES;
Self.userTableView.mj_footer = footer;
 
 }-(void) Loadcategorydata {Afhttpsessionmanager *mgr = [Afhttpsessionmanager Xmg_manager];
 Nsmutabledictionary *parameters = [Nsmutabledictionary dictionary];
 Parameters[@ "a"] = @ "category";
 
 parameters[@ "C"] = @ "Subscribe"; [Mgr Get:xmgbaseurl parameters:parameters progress:nil success:^ (nsurlsessiondatatask * _Nonnull task, NSDictionary * _
 
 Nullable responseobject) {Nsarray *dictarr = responseobject[@ "List"];
 
 _categorys = [Xmgcategoryitem Mj_objectarraywithkeyvaluesarray:dictarr];
 
 [Self.categorytableview Reloaddata];
 The default is to select the No. 0 cell Nsindexpath *indexpath = [Nsindexpath indexpathforrow:0 insection:0]; [Self.categorytableview selectrowatindexpath:indexpath Animated:yes Scrollposition:uitableviewscrollpositionnone]
 
 ;
 
 [Self TableView:self.categoryTableView didselectrowatindexpath:indexpath]; } failure:^ (Nsurlsessiondatatask * _nullable task, NserroR * _nonnull error) {}]; }-(Nsinteger) TableView: (UITableView *) TableView numberofrowsinsection: (nsinteger) Section {if (TableView = = _category
 TableView) {//Display category TableView return _categorys.count;
return _selectcategoryitem.users.count; }-(UITableViewCell *) TableView: (UITableView *) TableView Cellforrowatindexpath: (Nsindexpath *) IndexPath {if (tableVie W = = _categorytableview) {//Display category TableView Xmgcategorycell *cell = [TableView Dequeuereusablecellwithidentifier:categor
 Yid];
 Cell.item = _categorys[indexpath.row];
 return cell;
 } Xmgsubtagcell *cell = [TableView Dequeuereusablecellwithidentifier:userid];
 Cell.user = _selectcategoryitem.users[indexpath.row];
return cell; }-(CGFloat) TableView: (UITableView *) TableView Heightforrowatindexpath: (Nsindexpath *) Indexpath {if (TableView = = _ca
 Tegorytableview) {return 44;
return 60 + 1; //Click the cell to invoke///must be manually clicked on the cell to trigger-(void) TableView: (UITableView *) TableView Didselectrowatindexpath: (Nsindexpath *) Indexpath
{if (TableView = = _categorytableview) {//Record selection classification model _selectcategoryitem = _categorys[indexpath.row];
  Click on the Category cell//judge before there is no data if (_selectcategoryitem.users.count) {[Self.usertableview reloaddata]; 
  Self.userTableView.mj_footer.hidden = _selectcategoryitem.page > _selectcategoryitem.total_page;
 Return 
 //Request right user data [self loadnewuserdata]; }/////No more data, hide pull refresh control//Judge current category user group has no more user groups//load more user data-(void) Loadmoreuserdata {[Self.mgr.tasks Makeobjectsperfo
 
 Rmselector: @selector (cancel)];
 Nsmutabledictionary *parameters = [Nsmutabledictionary dictionary];
 Parameters[@ "a"] = @ "List";
 parameters[@ "C"] = @ "Subscribe";
 parameters[@ "category_id"] = _selectcategoryitem.id;
 
 parameters[@ "page"] = @ (_selectcategoryitem.page); [Self.mgr get:xmgbaseurl parameters:parameters progress:nil success:^ (nsurlsessiondatatask * _Nonnull task,
 
 Nsdictionary * _nullable responseobject) {[Self.userTableView.mj_footer endrefreshing];
 _selectcategoryitem.page++; Nsarray*dictarr = responseobject[@ "List"];
 
 Nsarray *users = [Xmguseritem Mj_objectarraywithkeyvaluesarray:dictarr];
 Remove all elements from the array and add to the new array//[_selectcategoryitem.users addobject:users];
 
 [_selectcategoryitem.users Addobjectsfromarray:users];
 
 [Self.usertableview Reloaddata]; Control whether the pull control is displayed, be sure to self.userTableView.mj_footer.hidden after Reloaddata = _selectcategoryitem.page > _
 Selectcategoryitem.total_page;
} failure:^ (Nsurlsessiondatatask * _nullable task, Nserror * _nonnull error) {}];
 //Load Update user data-(void) Loadnewuserdata {_selectcategoryitem.page = 1;
 
 [Self.mgr.tasks makeobjectsperformselector: @selector (cancel)];
 Nsmutabledictionary *parameters = [Nsmutabledictionary dictionary];
 Parameters[@ "a"] = @ "List";
 parameters[@ "C"] = @ "Subscribe";
 
 parameters[@ "category_id"] = _selectcategoryitem.id; [Self.mgr get:xmgbaseurl parameters:parameters progress:nil success:^ (nsurlsessiondatatask * _Nonnull task, Nsdictionary * _nullable responseobject) {_selectcategoryitem.page++;
 
 Records the total number of pages in the current category _selectcategoryitem.total_page = [responseobject[@ "Total_page"] integervalue];
 
 End Refresh [Self.userTableView.mj_header endrefreshing];
 
 Nsarray *dictarr = responseobject[@ "List"];
 
 _selectcategoryitem.users = [Xmguseritem Mj_objectarraywithkeyvaluesarray:dictarr];
 
 [Self.usertableview Reloaddata];
 
 Self.userTableView.mj_footer.hidden = _selectcategoryitem.page > _selectcategoryitem.total_page;
} failure:^ (Nsurlsessiondatatask * _nullable task, Nserror * _nonnull error) {}];
 }

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.

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.