1

I'm trying to mask an image (that is in a table view cell) in iOS 8 xcode 7.3 in autoLayout size class mode.

I looked this link: How to Mask an UIImageView

the first answer didn't work for me. The secound answer works, but the size of masked image is incorrect. my code is:

-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
UIImage *imgStory = [UIImage imageNamed:@"story1"];
UIImage *imgMask = [UIImage imageNamed:@"storyFrameMask"];

UIImageView *imgViewStory = (UIImageView *)[cell viewWithTag:100];
UIImageView *imgViewBorder = (UIImageView *)[cell viewWithTag:101];

imgViewStory.image = imgStory;
CALayer *mask = [CALayer layer];
mask.contents = (id)[[UIImage imageNamed:@"storyFrameMask"] CGImage];
//    mask.frame = CGRectMake(imgViewBorder.frame.origin.x, imgViewBorder.frame.origin.y, 178.0, 235.0);
mask.frame = CGRectMake(imgViewBorder.frame.origin.x, imgViewBorder.frame.origin.y, imgViewBorder.frame.size.width, imgViewBorder.frame.size.height);
imgViewStory.layer.mask = mask;
imgViewStory.layer.masksToBounds = YES;
}

and my output screen shot is: [![enter image description here][1]][1]

I can fix the problem by giving custom value to width and height of the mask frame (I have commented fixed width and height in my code. you can see it.), and you know this is not the correct way. Because I'm using auto layout and size class.

the fixed width and height works for just a single size class.

This is the scren shot when I set fixed width and height: [![enter image description here][2]][2]

I have searched all the websites but no of them are for auto layout. Any one can help me to have a good mask for all size classes and devices.

Edit: Note that the constraints for my masked imageview is same as the border imageView. so their frame is equal to each other. so the problem is not from my layout. The problem is the masked image that is drown on the masked image view. I can fix the problem by giving custom value to width and height of the mask frame, but this is not the correct way in auto layout.

Community
  • 1
  • 1
amin akbarzade
  • 227
  • 2
  • 13

1 Answers1

0

Edited: The old answer is not correct.

The problem is in -(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath, frame of the image view is not the final frame. Its frame that moment is equals to design size in storyboard. To solve this problem, i think you should override - (void)layoutSubviews in your custom cell, and set the correct frame of the mask like this:

- (void)layoutSubviews {
    [super layoutSubviews];

    CALayer *mask = [CALayer layer];
    mask.contents = (id)[[UIImage imageNamed:@"storyFrameMask"] CGImage];
    //    mask.frame = CGRectMake(imgViewBorder.frame.origin.x, imgViewBorder.frame.origin.y, 178.0, 235.0);
    mask.frame = CGRectMake(imgViewBorder.frame.origin.x, imgViewBorder.frame.origin.y, imgViewBorder.frame.size.width, imgViewBorder.frame.size.height);
    imgViewStory.layer.mask = mask;
    imgViewStory.layer.masksToBounds = YES;
}
Tien
  • 2,105
  • 17
  • 14
  • No. it doesn't difference. the origin of imgViewBorder is same as imgViewStory's origin. In addition if you look at my screen shots you see the origin is't the problem. the width and height of masked image is the problem. It was better you comment under my question not an answer. – amin akbarzade May 02 '16 at 05:49
  • Updated my answer, please check. – Tien May 05 '16 at 02:44
  • it doesn't difference. The frame of mask still is incorrect in "layoutSubviews". I don't know which method, give me the correct (final) frame. Any help :( – amin akbarzade May 07 '16 at 07:09
  • I put my mask codes in "didSelectRowAtIndexPath" method, it worked. this shows that my codes are correct but the frame of the "imgViewBorder" is not the final frame. it's frame is still the frame in storyboard. what is the best method that I can put my codes in to work. – amin akbarzade May 07 '16 at 10:54