Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

UICollectionView with Custom UICollectionViewCell

I have a UICollectionView with a custom cell. I had this working completely till I tried to create the collection view programmatically rather than from the storyboard. I did this because I was not able to change the frame size of the collection view for different screen sizes. So I tried to create a collection view programmatically. My problem is my custom cells are not working. For my custom cells I draw a circle in the view, user cornerradius on the view of the cell, have a UILabel and a UIImageView.

I draw the circle and the perform the cornerradius thing in the drawRect: of the custom cell. The rest i.e: put image in ImageView and text in UILabel, I do it in the collectionView datasource method.

The problem I am having is I don't get the cornerradius thing working although weirdly enough I can draw a circle on the view. second problem is I don't get the image in the image view and no text in the label

Here is my code. I create the collection view in ViewDidload: method.

 [layout setSectionInset:UIEdgeInsetsMake(24, 10, 24, 10)];

 [layout setScrollDirection:UICollectionViewScrollDirectionHorizontal];
 [layout setMinimumLineSpacing:15];
 [layout setMinimumInteritemSpacing:10];
 self.collectionView = [[UICollectionView alloc]initWithFrame:rect collectionViewLayout:layout];
 self.collectionView.delegate=self;
 self.collectionView.dataSource=self;
 [self.collectionView registerClass:[customCell class] forCellWithReuseIdentifier:@"cell"];
 self.collectionView.backgroundColor= [UIColor blackColor];
 self.searchBar.delegate = self;
 self.locations = [[NSArray alloc]init];
 self.location = [[NSString alloc]init];
 [self.view addSubview:self.collectionView];

Here is the drawRect: for my customCell.m

- (void)drawRect:(CGRect)rect
{
    UIBezierPath *circularpath = [[UIBezierPath alloc]init];
    CGRect Rect = CGRectMake(6, 20, 130, 130);//338
    CGPoint mypoint = CGPointMake(Rect.origin.x + (Rect.size.width / 2), Rect.origin.y + (Rect.size.height / 2));
    NSLog(@"Circle center point::%f, %f", mypoint.x, mypoint.y);

    circularpath = [UIBezierPath bezierPathWithOvalInRect:Rect];
    circularpath.lineWidth = 3.0;
    [[UIColor whiteColor]setStroke];
    UIImage *ori = [UIImage imageNamed:@"drogba.jpg"];
    UIImage *image = [[UIImage alloc]initWithCGImage:ori.CGImage scale:1.45 orientation:UIImageOrientationUp];
    [[UIColor colorWithPatternImage:image]setFill];
    NSLog(@"Circular path:%@", circularpath);
    //this works
    [circularpath stroke];
    //this does not
    self.viewForBaselineLayout.layer.cornerRadius = 8.0f;
}

and here is my datasource method

customCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
UIImage *image = [[UIImage alloc]init];
   if([self.allInfo count]>0){
       image = [self getImageForLocation:[self.allInfo objectAtIndex:indexPath.item]];
       NSDictionary *dict = [[NSDictionary alloc]initWithDictionary:[self.allInfo objectAtIndex:indexPath.item]];
       NSDictionary *city = [dict objectForKey:@"city"];
       NSString *name = [[NSString alloc]initWithString:[city objectForKey:@"name"]];
       cell.locationLabel.text = name;
       cell.imageView.image = [self getImageForSky:dict];
       cell.viewForBaselineLayout.backgroundColor = [UIColor colorWithPatternImage:image];
       cell.tempLabel.text = [self getTempForLocation:dict];
   }
NSLog(@"image description:%f", image.size.height);
count =1;
return cell;

I don't think it is a problem with my data because all I changed is creating Collection view programmatically rather than using storyboard.

EDIT:: I had to alloc init the image view and the labels for the custom cell and then add them as subview. now 3 of my 4 problems are solved. I still cannot get the corner radius to work for me. I want a slightly curved border for my cell

like image 392
nupac Avatar asked Jan 03 '14 11:01

nupac


1 Answers

So firstly, because I removed the cell from the storyboard, I had to add the views to the cell's view as subview. Secondly, to get the rounded corners, I had to also set masksToBounds to YES All this had to be done in the initWithFrame: method of the custom cell. Here the code snippet

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {

        self.imageView = [[UIImageView alloc]init];
        self.imageView.frame = CGRectMake(26, 27, 90, 90);
        self.tempLabel = [[UILabel alloc]initWithFrame:CGRectMake(26, 125, 90, 21)];
        self.locationLabel = [[UILabel alloc]initWithFrame:CGRectMake(11, 156, 121, 21)];
        self.tempLabel.textAlignment = NSTextAlignmentCenter;
        self.tempLabel.textColor = [UIColor whiteColor];
        self.locationLabel.textAlignment = NSTextAlignmentCenter;
        self.locationLabel.textColor = [UIColor whiteColor];

       [self.viewForBaselineLayout addSubview:self.imageView];
       [self.viewForBaselineLayout addSubview:self.tempLabel];
       [self.viewForBaselineLayout addSubview:self.locationLabel];

       self.viewForBaselineLayout.layer.masksToBounds = YES;
       self.viewForBaselineLayout.layer.cornerRadius = 8.0f;
    }
    return self;
}
like image 99
nupac Avatar answered Nov 18 '22 14:11

nupac