Implement a list view similar to the android grid effect

 

The uitableview in IOS is very powerful. However, there is no effect similar to grid in Android. For example, solve the problem of listview scrolling card. Because only one view can be displayed in each row of uitableview. If fine-grained effects such as Gallery are similar, you need to solve them by yourself.

A prototype with similar effects recently written:

Mainly solved:

• How to generate a grid Style
• Shadow Effect

There are two ways to implement the grid effect:

1. Implement it by myself. This time I did it myself.
2. Using third-party libraries is useless this time, mainly because the time is too tight and there are no quality problems, which may affect the construction period. Let's take a look at the time.

The third-party Library mentioned here is aqgridview. Project home here: https://github.com/AlanQuatermain/AQGridView

Use it to generate a view:

It looks good. See here: Workshop.

 

First, let's talk about how to implement grid.

Create a uiview:

 

@ Interface cdgridview: uiview <uitableviewdelegate, uitableviewdatasource> {
Uitableview * _ tableview;
Nsarray * _ cdinfos;
Int _ columnsize;
}

It encapsulates table view and an array (Data Model). In addition, the number of columns displayed in each row.

The init method of the uiview is reloaded:

-(ID) initwithframe :( cgrect) frame columnsize :( INT) columnsize cdinfos :( nsarray *) cdinfos {

Self = [Super initwithframe: frame];
If (Self ){
_ Tableview = [[uitableview alloc] initwithframe: frame];
_ Tableview. datasource = self;
_ Tableview. Delegate = self;
[_ Tableview setseparatorstyle: uitableviewcelleditingstylenone]; // sets the split line for canceling the list.
_ Tableview. allowsselection = no; // you are not allowed to select list entries.
[Self addsubview: _ tableview];

_ Columnsize = columnsize; // you can specify the number of columns.
_ Cdinfos = cdinfos;
}
Return self;
}

 

The table view attribute cancels the list split line and disables the selection of list entries.

Other methods:

 

-(Uitableviewcell *) tableview :( uitableview *) tableview cellforrowatindexpath :( nsindexpath *) indexpath {
Static nsstring * simpletableidentifier = @ "simpletableidentifier ";
Uitableviewcell * cell = [tableview dequeuereusablecellwithidentifier: simpletableidentifier];

If (cell = nil ){
Cell = [[[cdgridcell alloc] initwithstyle: uitableviewcellstyledefault
Reuseidentifier: simpletableidentifier
Columnsize: _ columnsize]
Autorelease];
}

For (INT I = 0; I <_ columnsize; I ++ ){
Uiview * rowview = [cell. contentview. subviews objectatindex: 0];
Uiview * imagecontainerview = [rowview. subviews objectatindex: I];
Uiimageview * imageview = [imagecontainerview. subviews objectatindex: 0];

If ([indexpath row] * _ columnsize + I <[_ cdinfos count]) {
Cdinfo * cdinfo = [_ cdinfos objectatindex: [indexpath row] * _ columnsize + I];
Imageview. Image = [uiimage imagenamed: cdinfo. coverphotopath];
Imageview. layer. shadowopacity = 1.0;
} Else {
Imageview. Image = nil;
Imageview. layer. shadowopacity = 0;
}
}

If ([[tableview indexpathsforvisiblerows] Count]> 0) {// The table view is empty at the time of creation.
Int _ firstindex = [[[tableview indexpathsforvisiblerows] objectatindex: 0] row] * _ columnsize;
Nsnumber * currentfirstrecordindex = [nsnumber numberwithint: _ firstindex];
Nsdictionary * Params = [[nsdictionary alloc] initwithobjectsandkeys: currentfirstrecordindex, @ "currentfirstrecord", nil];
[[Nsicationcenter center defacenter center] postnotificationname: @ "current. First. Record" Object: Self userinfo: Params];
// Currently it is not accurate. when moving to the first row, the first index is the first record of the second row.
}

Return cell;
}

-(Nsinteger) tableview :( uitableview *) tableview numberofrowsinsection :( nsinteger) Section {
Nsinteger numberofrows = Ceil ([_ cdinfos count] * 1.0/_ columnsize );
Return numberofrows;
}

-(Cgfloat) tableview :( uitableview *) tableview heightforrowatindexpath :( nsindexpath *) indexpath {
Return width/_ columnsize;
}

-(Void) setfistvisiblerecord :( INT) recordindex {
[_ Tableview scrolltorowatindexpath: [nsindexpath indexpathforrow: recordindex/_ columnsize insection: 0]
Atscrollposition: uitableviewscrollpositiontop animated: No];
}

 

 

It is used to implement the delegate required by Table view and auxiliary methods. The last setfistvisiblerecord: method, which is used to set the first record displayed in the list. Sometimes we need to display, for example, starting from 17th records, this method can help to display the row of the 17th records on the first line of the page.

Next, let's look at the implementation of the shadow effect. In fact, a rectangular box with a translucent shadow is displayed under the original uiimageview. The edge of the rectangular box is an arc, which looks more natural.

The following code can be used:

Imageview. layer. shadowcolor = [uicolor darkgraycolor]. cgcolor;
Imageview. layer. shadowoffset = cgsizemake (margin-2, margin-2 );
Imageview. layer. shadowopacity = 0.8;
Imageview. layer. shadowradius = 3.0;
Imageview. layer. shadowpath = [uibezierpath bezierpathwithrect: imageview. bounds]. cgpath;

 

Here, the besell curve is used to set the shadow path. Otherwise, the performance is poor.

After reading this, you will know the effect of the Shadow:

 

This is the way the uiimage is set, that is, the image is not set, and only the shadow is displayed.