Add UIView and UILabel to UICollectionViewCell

Question

I am using GitHub project https://github.com/mayuur/MJParallaxCollectionView

I am trying to add a UIView and UILabel to the cells being displayed. I have tried so many solutions it would probably just be easier to ask someone how to do it.

So with that can someone add a UIView and UILabel to the UICollectionView displaying some text? This can be done programmatically or via storyboard, whichever suits your style.

I tried adding related logic in MJCollectionViewCell.m setupImageView method. Also, tried MJRootViewController cellForItemAtIndexPath method. But I still can't get the UIView and UILabel to display over the UIImage object in MJCollectionViewCell.

@property (nonatomic, strong, readwrite) UIImage *image;

MJCollectionViewCell.h

//
//  MJCollectionViewCell.h
//  RCCPeakableImageSample
//
//  Created by Mayur on 4/1/14.
//  Copyright (c) 2014 RCCBox. All rights reserved.
//

#import <UIKit/UIKit.h>
#define IMAGE_HEIGHT 200
#define IMAGE_OFFSET_SPEED 25

@interface MJCollectionViewCell : UICollectionViewCell

/*

 image used in the cell which will be having the parallax effect

 */
@property (nonatomic, strong, readwrite) UIImage *image;

/*
 Image will always animate according to the imageOffset provided. Higher the value means higher offset for the image
 */
@property (nonatomic, assign, readwrite) CGPoint imageOffset;

//@property (nonatomic,readwrite) UILabel *textLabel;
@property (weak, nonatomic) IBOutlet UILabel *textLabel;
@property (weak, nonatomic) IBOutlet UIImageView *cellImage;
@property (nonatomic,readwrite) NSString *text;
@property(nonatomic,readwrite) CGFloat x,y,width,height;
@property (nonatomic,readwrite) NSInteger lineSpacing;

@property (nonatomic, strong) IBOutlet UIView* overlayView;



@end

MJCollectionViewCell.m

 //  MJCollectionViewCell.m
    //  RCCPeakableImageSample
    //
    //  Created by Mayur on 4/1/14.
    //  Copyright (c) 2014 RCCBox. All rights reserved.
    //

    #import "MJCollectionViewCell.h"

    @interface MJCollectionViewCell()

    @property (nonatomic, strong, readwrite) UIImageView *MJImageView;

    @end

    @implementation MJCollectionViewCell

    - (instancetype)initWithFrame:(CGRect)frame
    {
        self = [super initWithFrame:frame];
        if (self) [self setupImageView];
        return self;
    }

    - (id)initWithCoder:(NSCoder *)aDecoder {
        self = [super initWithCoder:aDecoder];
        if (self) [self setupImageView];
        return self;
    }

    /*
    // Only override drawRect: if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    - (void)drawRect:(CGRect)rect
    {
        // Drawing code
    }
    */

    #pragma mark - Setup Method
    - (void)setupImageView
    {
        // Clip subviews
        self.clipsToBounds = YES;

        /*
        // Add image subview
        self.MJImageView = [[UIImageView alloc] initWithFrame:CGRectMake(self.bounds.origin.x, self.bounds.origin.y, self.bounds.size.width, IMAGE_HEIGHT)];
        self.MJImageView.backgroundColor = [UIColor redColor];
        self.MJImageView.contentMode = UIViewContentModeScaleAspectFill;
        self.MJImageView.clipsToBounds = NO;
        [self addSubview:self.MJImageView];
        */

        //New Code in method
        // Add image subview
        self.MJImageView = [[UIImageView alloc] initWithFrame:CGRectMake(self.bounds.origin.x, self.bounds.origin.y, self.bounds.size.width, IMAGE_HEIGHT)];
        self.MJImageView.backgroundColor = [UIColor redColor];
        self.MJImageView.contentMode = UIViewContentModeScaleAspectFill;
        self.MJImageView.clipsToBounds = NO;

        //self.overlayView.backgroundColor = [UIColor colorWithWhite:0.0f alpha:0.4f];
       // UIView *anotherView = [[UIView alloc]initWithFrame:CGRectMake(0.0, 0.0, 20.0, 20.0)];

       //  UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0.0, 0.0, 50.0, 20.0)];
       // label.text = @"Hello";

       // [anotherView addSubview:label];

        [self addSubview:self.MJImageView];
        [self addSubview:self.overlayView];
        [self addSubview:self.textLabel];
    }

    # pragma mark - Setters

    - (void)setImage:(UIImage *)image
    {
        // Store image
        self.MJImageView.image = image;

        // Update padding
        [self setImageOffset:self.imageOffset];
    }

    - (void)setImageOffset:(CGPoint)imageOffset
    {
        // Store padding value
        _imageOffset = imageOffset;

        // Grow image view
        CGRect frame = self.MJImageView.bounds;
        CGRect offsetFrame = CGRectOffset(frame, _imageOffset.x, _imageOffset.y);
        self.MJImageView.frame = offsetFrame;
    }

    //This was added from MPSkewed may need to remove if not called.
    - (void)setText:(NSString *)text{
        _text=text;

        if (!self.textLabel) {

            CGFloat realH=self.height*2/3-self.lineSpacing;
            CGFloat latoA=realH/3;

           // self.textLabel=[[UILabel alloc] initWithFrame:CGRectMake(10,latoA/2, self.width-20, realH)];
            self.textLabel.layer.anchorPoint=CGPointMake(.5, .5);
            self.textLabel.font=[UIFont fontWithName:@"HelveticaNeue-ultralight" size:38];
            self.textLabel.numberOfLines=3;
            self.textLabel.textColor=[UIColor whiteColor];
            self.textLabel.shadowColor=[UIColor blackColor];
            self.textLabel.shadowOffset=CGSizeMake(1, 1);

            self.textLabel.transform=CGAffineTransformMakeRotation(-(asin(latoA/(sqrt(self.width*self.width+latoA*latoA)))));
            [self addSubview:self.textLabel];
        }

        self.textLabel.text=text;
    }
    @end

Answer 1

In the .h of the cell:

@property (strong, nonatomic, readonly) UILabel *label

In the .m of the cell:

@property (strong, nonatomic, readwrite) UILabel *label

In the setupImageView method (which you should probably rename to be more generic), after the image view is created, something like this:

self.label = [[UILabel alloc] initWithFrame:someFrame]; // or CGRectZero if you are using auto layout

self.label.textColor = ...; // any other setup you want to do

[self addSubview:self.label];

self.label.frame = ...; // or set it up using auto layout

And in your data source's -collectionView:cellForItemAtIndexPath:

cell.label.text = @"some text";

That is a simple approach. In practice, I would probably expose a property for the string only, not the whole label, but that depends on what you are doing and how much control you need.