透明UIButton標題

Question

如何從按鈕背景中減去標題文字的形狀？

我創建一個自定義的UIButton類。目前添加邊框和文字顏色的代碼看起來就像這樣

layer.borderWidth = 2.0 
layer.borderColor = buttonColor.CGColor 
layer.cornerRadius = (CGFloat(bounds.height) + paddingVertical * 2.0)/2.0 
setTitleColor(buttonColor, forState: UIControlState.Normal) 

任何關於如何從背景減去按鈕標題形狀的建議。我是否需要將所有這些渲染爲圖像，還是有更好的選擇？

Answer 1

我已經寫了一些代碼對你來說，（可在GitHub上https://github.com/purrrminator/AKStencilButton）我叫AKStencilButton的UIButton子類：

#import "AKStencilButton.h" 
#import <QuartzCore/QuartzCore.h> 

@interface AKStencilButton() 
{ 
    UIColor * _buttonColor; 
} 
@end 

@implementation AKStencilButton 

-(id)initWithCoder:(NSCoder *)aDecoder 
{ 
    if (self = [super initWithCoder:aDecoder]){ 
     [self setupDefaults]; 
    } 
    return self; 
} 
-(instancetype)initWithFrame:(CGRect)frame 
{ 
    if (self = [super initWithFrame:frame]){ 
     [self setupDefaults]; 
    } 
    return self; 
} 
-(void)setupDefaults 
{ 
    self.backgroundColor = [UIColor redColor]; 
    self.layer.cornerRadius = 4; 
    self.clipsToBounds = YES; 
} 
-(void)layoutSubviews 
{ 
    [super layoutSubviews]; 
    [self refreshMask]; 
} 
-(void)setTitleColor:(UIColor *)color forState:(UIControlState)state 
{ 
    [super setTitleColor:[UIColor clearColor] forState:state]; 
} 
-(void)refreshMask 
{ 
    self.titleLabel.backgroundColor = [UIColor clearColor]; 
    [self setTitleColor:[UIColor clearColor] forState:UIControlStateNormal]; 

    NSString * text = self.titleLabel.text; 
    CGSize buttonSize = self.bounds.size; 
    UIFont * font = self.titleLabel.font; 

    NSDictionary* attribs = @{NSFontAttributeName: self.titleLabel.font}; 
    CGSize textSize = [text sizeWithAttributes:attribs]; 


    UIGraphicsBeginImageContextWithOptions(buttonSize, NO, [[UIScreen mainScreen] scale]); 
    CGContextRef ctx = UIGraphicsGetCurrentContext(); 
    CGContextSetFillColorWithColor(ctx, [UIColor whiteColor].CGColor); 
    CGPoint center = CGPointMake(buttonSize.width/2-textSize.width/2, buttonSize.height/2-textSize.height/2); 

    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, buttonSize.width, buttonSize.height)]; 
    CGContextAddPath(ctx, path.CGPath); 
    CGContextFillPath(ctx); 
    CGContextSetBlendMode(ctx, kCGBlendModeDestinationOut); 

    [text drawAtPoint:center withAttributes:@{NSFontAttributeName:font}]; 
    UIImage* viewImage = UIGraphicsGetImageFromCurrentImageContext(); 
    UIGraphicsEndImageContext(); 

    CALayer *maskLayer = [CALayer layer]; 
    maskLayer.contents = (__bridge id)(viewImage.CGImage); 
    maskLayer.frame = self.bounds; 
    self.layer.mask = maskLayer; 
} 
@end 

它看起來像這樣（對不起，彩虹）：

Answer 2

我向UIView添加了以下方法來解決這個問題：

-(void)maskSubviews:(NSArray*)subviews { 
    UIGraphicsBeginImageContextWithOptions(self.bounds.size, NO, 0.0); 
    CGContextRef context = UIGraphicsGetCurrentContext(); 

    CGContextSetFillColorWithColor(context, [UIColor blackColor].CGColor); 
    CGContextFillRect(context, self.bounds); 

    CGContextSetBlendMode(context, kCGBlendModeDestinationOut); 
    for (UIView *view in subviews) { 
     CGPoint origin = [view convertPoint:CGPointZero toView:self]; 
     CGContextTranslateCTM(context, origin.x, origin.y); 
     [view.layer renderInContext:context]; 
     CGContextTranslateCTM(context, -origin.x, -origin.y); 
    } 
    UIImage* mask = UIGraphicsGetImageFromCurrentImageContext(); 
    UIGraphicsEndImageContext(); 

    self.maskView = [[UIImageView alloc] initWithImage:mask]; 
} 

只需用你想遮蓋的視圖來調用它。例如：

[button maskSubviews: @[button.titleLabel, button.imageView]] 

Answer 3

我將@ purrrminator的解決方案轉換爲Swift 3，只是主要的方法。

func clearTextButton(button: UIButton, title: NSString, color: UIColor) { 
    button.backgroundColor = color 
    button.titleLabel?.backgroundColor = UIColor.clear() 
    button.setTitleColor(UIColor.clear(), for: .normal) 
    button.setTitle(title as String, for: []) 
    let buttonSize: CGSize = button.bounds.size 
    let font: UIFont = button.titleLabel!.font 
    let attribs: [String : AnyObject] = [NSFontAttributeName: button.titleLabel!.font] 
    let textSize: CGSize = title.size(attributes: attribs) 
    UIGraphicsBeginImageContextWithOptions(buttonSize, false, UIScreen.main().scale) 
    let ctx: CGContext = UIGraphicsGetCurrentContext()! 
    ctx.setFillColor(UIColor.white().cgColor) 
    let center: CGPoint = CGPoint(x: buttonSize.width/2 - textSize.width/2, y: buttonSize.height/2 - textSize.height/2) 
    let path: UIBezierPath = UIBezierPath(rect: CGRect(x: 0, y: 0, width: buttonSize.width, height: buttonSize.height)) 
    ctx.addPath(path.cgPath) 
    ctx.fillPath() 
    ctx.setBlendMode(.destinationOut) 
    title.draw(at: center, withAttributes: [NSFontAttributeName: font]) 
    let viewImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()! 
    UIGraphicsEndImageContext() 
    let maskLayer: CALayer = CALayer() 
    maskLayer.contents = ((viewImage.cgImage) as! AnyObject) 
    maskLayer.frame = button.bounds 
    button.layer.mask = maskLayer 
}