Uicollectionview-create a storyboard-based collection view application

About the collection view uicollectionviewArticle:

Part 1: uicollectionview-create a set view cell using the XIB File
Part 1: uicollectionview-create a cell of the uicollectionviewcell subclass

 

Create a storyboard-based set view applicationProgram

When we created the simplecollectionview sample program, we canceled the use storyboard option, which briefly demonstrated some basic concepts and usage of the set view. Here, we will go deeper into creating a storyboard-based, interesting set view application. The following figure shows the running effect of the photocollectionview application:

Use xcode's single view application template to create a new project photocollectionview with the class prefix set to photo. Select the use storyboards and use automatic reference counting check boxes.

 

Delete the View Controller from the template

Xcode automatically creates a subclass of uiviewcontroller Based on the xcode project created in the template selected earlier. In this example, we need a subclass of uicollectionviewcontroller. Therefore, select the photoviewcontroller. h and photoviewcontroller. M files in the project navigation bar to delete these two files.
Next, select the mainstoryboard. storyboard file, select the View Controller in the storyboard canvas, and click the delete key on the keyboard to delete the View Controller.

 

Add collection View Controller to storyboard

Drag the collection View Controller object from the object library to the storyboard canvas.

 

 

As you can see, as uicollectionviewcontroller is added to the storyboard, A uicollectionview object (black background) and a prototype cell (a white square lattice in the upper left corner) are also added to the scene.
Next, we will add the uicollectionviewcontroller subclass to the project. Select File> New> file... Menu item. Under the IOS cocoa touch node, select objective-C class.

In the following window, set the class name to photocollectionviewcontroller, and select uicollectionviewcontroller from the subclass of drop-down menu.

 

 

The project will add two new files: photocollectionviewcontroller. h and photocollectionviewcontroller. M, which are subclasses of uicollectionviewcontroller.
Open the storyboard file, select the collection View Controller, and set the class attribute in the identity Inspector panel to the photocollectionviewcontroller class you just created.

 

Collection view cell class)

Select File> New> file... again... Menu item, and then select the objective-C class template in the IOS cocoa touch node. In the following window, enter the class name photocollectionviewcell, and select uicollectionviewcell from the subclass of drop-down menu. Click Next, select the file storage location in the project, and click Create to create a cell subclass of the set view.

Return to the mainstoryboard. storyboard file and select the white square lattice in the upper left corner of the set view. This is the prototype cell of the set view ). Then, in the identity Inspector panel window, set the class attribute to the previously created photocollectionviewcell.

In the attributes Inspector panel window, set the identifier attribute to photocell.CodeThis reuse identifier is used ).

 

Design prototype Cell

The cell class of the set view and set view has been designed. Now we start designing cells. Designing cells is simply dragging some UI elements from the object library to the cell design interface. You can drag the cell size directly or set it in the size Inspector panel window.

Next, we adjust the cell size and drag the Image view object from the object library to the cell. The image view size is full of the entire cell, and the image will be displayed in the cell.

Because you need to assign values to the image view in the cell, you need to define the output port of the Image view. The assistant editor is displayed, and the photocollectionviewcell. H code file is displayed. Press and hold the control key to drag the Image view object to the header file, which is located under the @ interface code line. In the displayed window, select outlet and input imageview as the output port to establish a connection between the image view object and the output port. The photocollectionview. H code after the connection is completed is as follows:

# Import <Uikit/uikit. h>
@ Interface Photocollectionviewcell: uicollectionviewcell
@ Property (strong, nonatomic) iboutlet uiimageview * imageview;
@ End

OK. Now the cell implementation is complete.

 

Implement Data Model)

The data model of this example project is a series of image files. Each image is displayed in every cell in the set view.
The first step is to load the image file to the project. First, create a new folder (Group) in the project and name it images. Drag some images to be displayed from the Finder to the folder.

Next, open the photocollectionviewcontrolller. h file and define a variable array photoimages to store the image file name.

# Import <Uikit/uikit. h>
@ Interface Photocollectionviewcontroller: uicollectionviewcontroller
@ Property (strong, nonatomic) nsmutablearray * photoimages;
@ End

 

Finally, open the photocollectionviewcontroller. M file, modify the viewdidload method, and initialize the array as the image file name.

-( Void ) Viewdidload
{
[Super viewdidload];
// Do any additional setup after loading the view.
Self. photoimages = [@[
@" Img_1.jpg " ,
@" Img_2.jpg " ,
@" Img_3.jpg " ,
@" Img_4.jpg " ,
@" Img_5.jpg " ,
@" Img_6.jpg " ,
@" Img_7.jpg " ,
@" Img_8.jpg " ,
@" Img_9.jpg " ,
@" Img_10.jpg " ,
@" 90s-girl.jpg " ,
@" 90s-girl-1.jpg " ,
@" 90s-girl-2.jpg " ,
@" 90s-girl-3.jpg " ] Mutablecopy];
}

Note that the above Code uses the modern objective-C syntax to initialize the array, which is equivalent to the following code (the previous syntax) to initialize the array. The above syntax creates an immutable array by default. Therefore, the mutablecopy method is added later to return a variable array.

Self. photoimages = [[nsmutablearray alloc] initwithobjects:
@" Img_1.jpg " ,
@" Img_2.jpg " ,
@" Img_3.jpg " ,
@" Img_4.jpg " ,
@" Img_5.jpg " ,
@" Img_6.jpg " ,
@" Img_7.jpg " ,
@" Img_8.jpg " ,
@" Img_9.jpg " ,
@" Img_10.jpg " ,
@" 90s-girl.jpg " ,
@" 90s-girl-1.jpg " ,
@" 90s-girl-2.jpg " ,
@" 90s-girl-3.jpg " , Nil];

 

Data Source)

We know that a collection view requires a data source and a delegate to provide all the functions. By default, xcode assigns the photocollectionviewcontroller class as both the delegate and Data Source of the uicollectionview object. We can select the uicollectionview object in storyboard for verification. Right-click the uicollectionview object and display the connection information of the object, as shown in.

Next, define the protocol to be implemented by the photocollectionviewcontroller class. In addition, this class needs to interact with the photocollectionviewcell class, And now it just introduces the corresponding header file. The updated photocollectionviewcontroller. h file is as follows:

# Import <Uikit/uikit. h>
# Import " Photocollectionviewcell. h "
@ Interface Photocollectionviewcontroller: uicollectionviewcontroller
@ Property (strong, nonatomic) nsmutablearray * photoimages;
@ End

The following describes a series of data source methods that comply with the uicollectionveiwdatasource protocol. First, let the set view know how many sections need to be displayed. For this example, only one section is displayed. Open the photocollectionviewcontroller. M file and write numberofsectionsincollectionview: method. The number 1 is returned.

# Pragma Mark-
# Pragma Mark uicollectionviewdatasource

-(Nsinteger) numberofsectionsincollectionview:
(Uicollectionview *) collectionview
{
Return 1;
}

 

Another method called by the set view is to know how many data items are displayed in each section. In the example program, we need to display each image in the array in a cell.

-(Nsinteger) collectionview :( uicollectionview *) collectionview
Numberofitemsinsection :( nsinteger) Section
{
Return Self. photoimages. count;
}

The next method called by the set view is cellforitematindexpath. This method obtains a cell object from the reuse queue, obtains the image from the photoimages array according to the indexpath parameter, configures and returns the cell object.

-(Uicollectionviewcell *) collectionview :( uicollectionview *) collectionview
Cellforitematindexpath :( nsindexpath *) indexpath
{
Photocollectionviewcell * mycell = [collectionview
Dequeuereusablecellwithreuseidentifier: @" Photocell "
Forindexpath: indexpath];

Uiimage * image;
IntRow = [indexpath row];
Image = [uiimage imagenamed: Self. photoimages [row];
Mycell. imageview. Image = image;
ReturnMycell;
}

 

Test the phtotocollectionview Application

Compile and run the application. If everything is normal, the image list is displayed in the set view, as shown in the previous photocollectionview application running effect. Each cell displays a fixed size image.

In 《Learn iOS 6 programming step by stepThe fourth version-PDF ebook provides more details and details.

 

 

Original article: Part 1: uicollectionview-create a storyboard-based collection view application