iOS - 如何使用阴影创建符合UIView的"材质设计"？

Question

我试图看看是否有办法创建一个具有符合材料设计的阴影行为的UIView .我的理解是,当物体从背景表面进一步移除时,阴影变得更加强烈.

我可以手动添加这样的阴影,但是这个阴影不会计算阴影的强度(基于Z顺序).

    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;

如何创建一个像Google的材料设计一样的UIView？我找到了这个名为Material Kit的例子,但它只是隐藏了阴影

谷歌这样做的一种方式是强调使用 'z轴'来创造一种深度感,其中元素可以占据不同的层次.为了显示元素在z轴上占据更高的水平,在其边界周围使用阴影,投射到下面的水平.这产生的是存在于不同的较低交互层/元素之上的交互层/元素的错觉.

Answer 1

您可以子类化UIButton,并首先根据自己的喜好设置阴影属性:

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

然后shadowOpacity在突出显示的状态更改时更改属性:

- (void)setHighlighted:(BOOL)highlighted
{
    [super setHighlighted:highlighted];
    self.layer.shadowOpacity = (highlighted ? 0.85 : 0);
}