Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iOS - how to create a "material design" compliant UIView with shadow?

I'm trying to see if there's a way to create a UIView with a shadow behavior compliant with material design. My understanding is that the shadow gets more intense as the object is further removed from the background surface.

I can manually add a shadow like this, however this shadow does not calculate how intense the shadow should be (based on Z order).

    button.layer.shadowPath = [UIBezierPath bezierPathWithRoundedRect:button.layer.bounds cornerRadius:11].CGPath;
    button.layer.shadowOpacity = 1.0;
    button.layer.shadowOffset = CGSizeMake(1,1);
    button.layer.shadowColor = [UIColor blackColor].CGColor;

How do I create a UIView which will behave like Google's material design? I found this example, called Material Kit, however it simply hides shadow on touch

One way in which Google does this is by emphasizing the use of a ‘z-axis’ to create a sense of depth in which elements can occupy different levels. In order to show that an element is occupying a higher level on the z-axis, shadows are used around its border, being cast on to the level below. What this creates is the illusion of an interactive layer/element that exists above a different, lower interactive layer/element.

enter image description here

like image 602
Alex Stone Avatar asked May 20 '15 15:05

Alex Stone


1 Answers

You could subclass UIButton, and first set the shadow properties to your liking:

button.layer.shadowOffset = CGSizeMake(0, 1);
button.layer.shadowRadius = 5;
button.layer.shadowOpacity = 0;

Then change the shadowOpacity property when the highlighted state changes:

- (void)setHighlighted:(BOOL)highlighted
{
    [super setHighlighted:highlighted];
    self.layer.shadowOpacity = (highlighted ? 0.85 : 0);
}
like image 197
Rufel Avatar answered Nov 15 '22 07:11

Rufel