Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • Collection View

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 833
    Comment on it

    Collection view is used to show data in a grid form. It is similar to table view where we have to implement its data source and delegate methods.

    In this example, we will implement collection view.


    Drag a UICollectionView to the default ViewController’s view. Setup auto layout constraints to it.

    Drag Collection View cell on collection view and add a new class i.e “CollectionViewCellClass”, which extends “UICollectionViewCell” .


     In MainStoryBoard select cell as shown in image and click on identity inspector, now assign class to it i.e “CollectionViewCellClass”.



    Now select Attribute inspector, you will get one option i.e identifier it means we have to give cell identifier also so for that select cell again as shown in image and write cell in front of identifier option.



    Right click on collection view and drag the cursor so that you can give data source and delegate to it. Give dataSource and delegate to ViewController so that you can implement its methods which are required.

    Make the outlet of collection View as shown below.



    Drag one label in collectionView Cell and make an outlet of it in CollectionViewCellClass. Select Connect option.


    Now go to your ViewControllerClass and add below methods in it.

    -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
        return 8 ; //number of cells you want
    -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
        CollectionViewCellClass *cell; //instance of CollectionViewCellClass
        NSString *cellIdentifier=@"cell"; //set the same identifier which we have set from the Main Storyboard
           cell=[collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
           [cell.labelOutlet setText:@"Demo]; //Here we are setting text in that label which you dragged in your cell
           return cell;


    Now build your App,you will get below response on screen. We can also download the project for further help.

    In this way you can implement collection view.


 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: