我正在尝试以编程方式重新创建可以在 UINavigationBarButton 上看到的缩进按钮外观。不是 Shiny 的双色调外观或渐变，只是周边阴影:

它看起来像整个视野周围的内部暗阴影，顶部稍微暗一些？然后是围绕下视界的外部高亮阴影。

我玩过一些 Core Graphics，并尝试过 QuartzCore 和 view.layer.shadowRadius 和 .shadowOffset 的阴影，但甚至无法让较低的突出显示看起来正确。我也不确定从哪里开始实现带有内部偏移的暗阴影和带有外部偏移的亮阴影。

最佳答案

您似乎想要一个看起来像阴影的边框。由于阴影看起来是某种渐变，因此乍一看无法将边框设置为渐变。但是，可以创建一个代表边界的路径，然后用渐变填充它。 Apple 提供了一个似乎鲜为人知的函数，称为 CGPathCreateCopyByStrokingPath。 .这需要一条路径(例如，一个圆角矩形)并创建一个新路径，该路径将是旧路径的笔划，给定您传递给函数的设置(例如线宽，连接/帽设置，斜接限制等) ).所以假设您定义了一条路径(这不是 Apple 提供的，但它是相似的):

+ (UIBezierPath *) bezierPathForBackButtonInRect:(CGRect)rect withRoundingRadius:(CGFloat)radius{
    UIBezierPath *path = [UIBezierPath bezierPath];
    CGPoint mPoint = CGPointMake(CGRectGetMaxX(rect) - radius, rect.origin.y);
    CGPoint ctrlPoint = mPoint;
    [path moveToPoint:mPoint];

    ctrlPoint.y += radius;
    mPoint.x += radius;
    mPoint.y += radius;
    if (radius > 0) [path addArcWithCenter:ctrlPoint radius:radius startAngle:M_PI + M_PI_2 endAngle:0 clockwise:YES];

    mPoint.y = CGRectGetMaxY(rect) - radius;
    [path addLineToPoint:mPoint];

    ctrlPoint = mPoint;
    mPoint.y += radius;
    mPoint.x -= radius;
    ctrlPoint.x -= radius;
    if (radius > 0) [path addArcWithCenter:ctrlPoint radius:radius startAngle:0 endAngle:M_PI_2 clockwise:YES];

    mPoint.x = rect.origin.x + (10.0f);
    [path addLineToPoint:mPoint];

    [path addLineToPoint:CGPointMake(rect.origin.x, CGRectGetMidY(rect))];

    mPoint.y = rect.origin.y;
    [path addLineToPoint:mPoint];

    [path closePath];
    return path;
}

这会返回类似于 Apple 后退按钮的路径(我在我的应用程序中使用它)。我已将此方法(连同其他几十个方法)作为一个类别添加到 UIBezierPath。

现在让我们在绘图例程中添加内部阴影:

- (void) drawRect:(CGRect)rect{
    UIBezierPath *path = [UIBezierPath bezierPathForBackButtonInRect:rect withRoundingRadius:5.0f];
    //Just fill with blue color, do what you want here for the button
    [[UIColor blueColor] setFill]; 
    [path fill];

    [path addClip]; //Not completely necessary, but borders are actually drawn 'around' the path edge, so that half is inside your path, half is outside adding this will ensure the shadow only fills inside the path

    //This strokes the standard path, however you might want to might want to  inset the rect, create a new 'back button path' off the inset rect and create the inner shadow path off that.  
    //The line width of 2.0f will actually show up as 1.0f with the above clip: [path addClip];, due to the fact that borders are drawn around the edge 
    UIBezierPath *innerShadow = [UIBezierPath bezierPathWithCGPath: CGPathCreateCopyByStrokingPath(path.CGPath, NULL, 2.0f, path.lineCapStyle, path.lineJoinStyle, path.miterLimit)];
    //You need this, otherwise the center (inside your path) will also be filled with the gradient, which you don't want
    innerShadow.usesEvenOddFillRule = YES;
    [innerShadow addClip];

    //Now lets fill it with a vertical gradient
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGPoint start = CGPointMake(0, 0);
    CGPoint end = CGPointMake(0, CGRectGetMaxY(rect));
    CGFloat locations[2] = { 0.0f, 1.0f};
    NSArray *colors =  [NSArray arrayWithObjects:(id)[UIColor colorWithWhite:.7f alpha:.5f].CGColor, (id)[UIColor colorWithWhite:.3f alpha:.5f].CGColor, nil];
    CGGradientRef gradRef = CGGradientCreateWithColors(CGColorSpaceCreateDeviceRGB(), (__bridge CFArrayRef)colors, locations);
    CGContextDrawLinearGradient(context, gradRef, start, end, 0);
    CGGradientRelease(gradRef);
}

现在这只是一个简单的例子。我不保存/恢复上下文或任何你可能想要做的事情。您可能仍想做一些事情来让它变得更好，例如，如果您想使用普通边框，可以插入“阴影”路径。您可能想要使用更多/不同的颜色和位置。但这应该可以帮助您入门。

更新

您可以使用另一种方法来创建此效果。我编写了一个算法来倾斜核心图形中的任意贝塞尔曲线路径。这可用于创建您正在寻找的效果。这是我如何在我的应用程序中使用它的示例:

您将 CGContextRef、CGPathRef、斜面的大小以及您希望它用于高光/阴影的颜色传递给例程。

我为此使用的代码可以在这里找到:Github - Beveling Algorithm .

我还在此处解释了代码和我的方法:Beveling-Shapes in Core Graphics

关于ios - 创建在 UINavigationBarButton 中找到的缩进外观 - 以编程方式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10993328/