Shadow with Corner radius in cell with IBDesignables

Question

I have a 2 sub views in cell. One for shadow view and another for corner radius as it sounds a good approach that I found from this link. So I tried to make it in Objective-C with IBDessignables. Everything works fine if the cell is of same size but for a dynamic size shadow is showing over another cell but the cornerview is fine.

-- View hierarchy of cell --

-- UITableViewCell
  -- contentView
     -- shadowView
       -- CornerView

Here is my code for shadow View

ShadowView.h

IB_DESIGNABLE
@interface ShadowView : UIView
@property (nonatomic) IBInspectable CGFloat cornerRadius;
@property (nonatomic) IBInspectable CGFloat shadowRadius;
@property (nonatomic) IBInspectable CGSize  shadowOffset;
@end

ShadowView.m

@implementation ShadowView

-(void)setup{
    self.cornerRadius = 5.0f;
    self.shadowRadius = 2.0f;
    self.shadowOffset  = CGSizeMake(0, 0);
    self.backgroundColor = [UIColor clearColor];
}

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


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

- (void)drawRect:(CGRect)rect {
    [self updateLayerProperties];
}

- (void)updateLayerProperties {
    self.layer.shadowOffset = self.shadowOffset;
    self.layer.shadowRadius = self.shadowRadius;
    self.layer.shadowOpacity = 0.3;
    self.layer.shadowPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:self.cornerRadius].CGPath;
    self.layer.masksToBounds = NO;
    self.layer.shouldRasterize = YES;
    self.layer.rasterizationScale = [UIScreen mainScreen].scale;
}

@end

So does anyone know what the exact issue is? Because the corner view bounds work perfectly but not the shadow view.

Demo File

And here is the demo file if anybody wants to test it .. https://www.dropbox.com/s/myxjyj5pu3ey3aw/demoDesignables.zip?dl=0

So you mean your problem is that the shadow covers the cell below? — Suragch, May 30 '17 at 10:42
yes .. cornerview is of same size as a subview of shadow view .. but its fine and shadow is covering another cell for dynamic cell height — Bhavin Bhadani, May 30 '17 at 10:44
I don't really understand what it is you are trying to do. If there were more spacing between the cells would that fix it? An image showing what you want would be helpful. — Suragch, May 30 '17 at 10:48
let me explain u .. I have a dynamic height cell .. minimum is 142 .. now if cell is of 142 height then shadow and corner radius working fine but if height is more then that means if its expanding then shadow is covers otherview .. dont know why?? — Bhavin Bhadani, May 30 '17 at 10:50
please check that demo file .. I just want that shadow is not cover other cell .. — Bhavin Bhadani, May 30 '17 at 11:38

score 2 · Accepted Answer · answered May 30 '17 at 11:57

Views are responsible for drawing content, handling multitouch events, and managing the layout of any subviews. So, you need to override layoutSubviews function of your ShadowView.

-(void)layoutSubviews {
    [super layoutSubviews];
    [self updateLayerProperties];
}

Shadow with Corner radius in cell with IBDesignables

1 Answers1