创建一个重叠的半透明工具栏按钮,该按钮不会被工具栏一分为二

Creating an overlapping semi-transparent toolbar button that doesn't get bisected by tool bar

我正在创建一个带有绿色超大相机的用户界面 start/stop 位于工具栏顶部的按钮:

到目前为止,我一直在使用 yoichitgy/EEToolbarCenterButton 来实现它,一开始它似乎正是我想要的。

UI 设计者特别要求按钮是透明的。他们还希望它后面的工具栏是 "cut out",这样您就看不到按钮后面的工具栏。这是按钮应如何工作的图示。

这是他们不想要的例子:

那么有没有办法做到这一点?哦对了,还有一件事:一旦按下这个绿色按钮,它就会变成一个更小的 "Stop" 按钮。停止按钮不应该是半透明的,它后面的栏不应该有一块缺失。换句话说,我需要能够打开和关闭此行为。

我最终通过创建自定义 UIToolbar 自己解决了这个问题 class:

DLYCustomToolbar.h

#import <UIKit/UIKit.h>
#import "UIToolbar+EEToolbarCenterButton.h"

@interface DLYCustomToolbar : UIToolbar

@property (nonatomic) bool isMasked;

@end

DLYCustomToolbar.m:

#import "DLYCustomToolbar.h"

@implementation DLYCustomToolbar

- (void) drawRect:(CGRect)rect {
    [[UIColor colorWithRed:0 green:0 blue:0 alpha:0.5] setFill];
    UIRectFill(rect);

    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetBlendMode(context, kCGBlendModeClear);

    if(_isMasked) {
        float circleDiameter = 58;
        CGRect pathRect = CGRectMake(self.frame.size.width/2-circleDiameter/2, -circleDiameter/2+2, circleDiameter, circleDiameter);
        UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:pathRect];
        [path fill];
    }

    CGContextSetBlendMode(context, kCGBlendModeNormal);
}

- (void) setIsMasked:(bool)isMasked {
    if (isMasked != _isMasked) {
        _isMasked = isMasked;
        [self setNeedsDisplay];
    }
}

@end