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

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 370
    Comment on it

    Collection view is used to display multiple data simultaneously on view controller.Data can be of any type for example collection of text or images which can be display on controller with the help of collection view.

     

    With the help of an example we will see how to use collection view :-

    First of all take collection view  from object gallery on controller in which you want to show the multiple data simultaneously. With in collection view you will get a cell under which you can place label or image view according to your need. If you want to display only text value so you need only label or if you want to display images so take image view from object gallery.

    Create file in project for the cell under collection view in which you can create an outlet of label or image view for further working. Suppose a file with name ImageAndNameCollectionViewCell we will create for collection view cell.

    Here we are displaying collection of text and images both  with the help of collection view. So inside cell of collection view we have to take two objects from object gallery one is label to display text and another is image view to display image. After taking these two objects we will create outlets of both in  
    ImageAndNameCollectionViewCell.h file.Suppose the outlets of both objects will be like:-

    @property (weak, nonatomic) IBOutlet UIImageView *imgView;//image view outlet
    @property (weak, nonatomic) IBOutlet UILabel *lblName;//label outlet


    Now we will create an another file of UIViewController type for implementing collection view methods.Suppose we create a file with name
    DisplayDataWithCollectionViewController and we will write the methods in this way:-
    We will import the ImageAndNameCollectionViewCell.h file to access the label and image view under cell of collection view.
     

    
    
    #import "ImageAndNameCollectionViewCell.h"
    
    @interface  DisplayDataWithCollectionViewController() 
    {
     
        NSArray *arrayOfNames;
        NSArray *arrayOfImages;
    }
    -(void)viewWillAppear:(BOOL)animated{
        
        arrayOfNames = [[NSArray alloc]initWithObjects:@"Chair",@"Window",@"Door",nil];//here you can change names according to your need
        arrayOfImages=[[NSArray alloc]initWithObjects:@"image.png",@"image-1.png",@"pic.png",nil];//here you can change images
    }
    
    -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
        
        return arrayOfNames.count;// it will return number of items according to the elements in arrayOfNames
        
    }
    
    -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
        
        ImageAndNameCollectionViewCell *cell;
     
        cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"DataCell" forIndexPath:indexPath];
    
        [cell.lblName setText:[arrayOfNames objectAtIndex:indexPath.row]];//according to the arrayOfNames it will return names in label lblName
        [cell.imgView setImage:[UIImage imageNamed:[arrayOfImages objectAtIndex:indexPath.row]]];//according to the arrayOfImages it will return images in image view imgView
            return cell;
       
     }
    
    
    - (CGFloat)collectionView:(UICollectionView *) collectionView
                       layout:(UICollectionViewLayout *) collectionViewLayout
    minimumInteritemSpacingForSectionAtIndex:(NSInteger) section {
     
            return 1.0;//decrease the space between the items of cell
    
    }
    @end
    
    

    In this way we can easily use collection view to display multiple data simultaneously in any view controller.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
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: