Layout and display of the nine Gongge View (album selection)

last week a friend brought a problem with the project, the recruitment of iOS developers in the implementation of the selection of photo albums with nine Gongge style display encountered a bottleneck, took nearly 2 weeks has not been resolved. Later in the process of communicating with me he sent me a picture of the project, I looked at it, I laughed, this is just an algorithm problem, spend some time to think about the basic can be solved. Don't say much nonsense, show the effects of the previous finishes.

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/82/F6/wKiom1dnfvGhFrMIAAB0YqGwaP0966.png "title=" QQ picture 20160620132658.png "alt=" Wkiom1dnfvghfrmiaab0yqgwap0966.png "/>

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M01/82/F6/wKiom1dnfvGBYKCAAAGCQRzE_C4477.jpg "title=" QQ picture 20160620132711.jpg "alt=" Wkiom1dnfvgbykcaaagcqrze_c4477.jpg "/>

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/82/F6/wKioL1dnfvLB_YVpAANOcdQrt4M556.jpg "title=" QQ picture 20160620132715.jpg "alt=" Wkiol1dnfvlb_yvpaanocdqrt4m556.jpg "/>

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/82/F6/wKiom1dnfvTgZgSvAAO5iv56_c8456.png "title=" QQ picture 20160620132704.png "alt=" Wkiom1dnfvtgzgsvaao5iv56_c8456.png "/>

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M01/82/F6/wKioL1dnfvXAh7pBAAK5CB_SdIw188.png "title=" QQ picture 20160620132708.png "alt=" Wkiol1dnfvxah7pbaak5cb_sdiw188.png "/>

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/82/F6/wKioL1dnfvahiYNrAADiN61rlAc955.png "title=" QQ picture 20160620132719.png "alt=" Wkiol1dnfvahiynraadin61rlac955.png "/>

The above is the direct use of mobile phone to cut the map, it was not expected to be so big. One of the features of the image added is the introduction of a third-party library, very easy to use, and QQ on the image to add a function almost no different, the name of the library is Zlphotoactionsheet. Of course this is not the focus, the focus is how to achieve the nine Gongge display, the above picture in each row is 4, this is my custom macro, can be arbitrarily modified, the number of each row and the total number of display, is more flexible.

Here is the core of the algorithm, if you can not think of these will not be able to do the auto-line display.

     First , you have to customize the total number of impressions maxphotosno (default is 9), each line shows the number of Avgimgsno (default = 4) , write an object method in the view class that is used to display the nine Gongge -(void) Updatetheviewwithimgsarr: ( Nsarray *) Imgsarr; , that is, the image array object to be obtained into this method, and then processed.

then , the most critical step is to process the image array. Determine whether the number of elements in the array equals Maxphotosno, which is used to determine if you need to hide the Add button. Then, for loop processing, create a uiimageview that is used to host the picture, with the number of elements in the image array. Before each creation, you should know that it is the first of several lines, so as to calculate where it should be located.

set 2 int type parameter : (i represents the variable of the loop)

int s = I/avgimgsno; (determines the number of lines, 0 for the first row, and so on)

int r = I%avgimgsno; (ok is the number, 0 is the first one, etc.)

The next step is to calculate its position : (the parameter with space is the spacing)

Imgv.frame = CGRectMake (imgspace* (r+1) +avgwidth*r,rowspace* (s+1) +avgwidth*s,avgwidth,avgwidth);

Of course, don't forget that the location of the Add button has changed:

the same 2 parameters : (because it's always the last one, so just add 1 to the back)

int k = (i+1)/avgimgsno;

Int J = (i+1)%avgimgsno;

Note here: if the number of elements in the array has reached the maximum value of the set Maxphotosno , this should be handled

if ((int) imgsarr.count==maxphotosno) {

K = Maxphotosno/avgimgsno; Always put it in the last line of the last, because I need its orientation to layout, if not the classmate, can not write this

}

finally , it has been completed, the details of which may still be some, but the general idea is basically the way it is, very simple. I really do not understand why such a function can not be written in 2 weeks ..., well, we are all standing on the shoulder to say sarcastic people haha ~

This article is from the "11562149" blog, please be sure to keep this source http://11572149.blog.51cto.com/11562149/1790984

Layout and display of the nine Gongge View (album selection)