Transparent UIButton title - ios

Question

How can I subtract the shape of the title text from the button background?
I created a custom UIButton class. Currently the code to add the border and text color looks simply like this
layer.borderWidth = 2.0
layer.borderColor = buttonColor.CGColor
layer.cornerRadius = (CGFloat(bounds.height) + paddingVertical * 2.0) / 2.0
setTitleColor(buttonColor, forState: UIControlState.Normal)
Any advice on how I can subtract the button title shape from background. Do I need to render all this as an image or is there a better alternative?

Answer 1

Extension for swift 4
extension UIButton{
func clearColorForTitle() {
let buttonSize = bounds.size
if let font = titleLabel?.font{
let attribs = [NSAttributedStringKey.font: font]
if let textSize = titleLabel?.text?.size(withAttributes: attribs){
UIGraphicsBeginImageContextWithOptions(buttonSize, false, UIScreen.main.scale)
if let ctx = UIGraphicsGetCurrentContext(){
ctx.setFillColor(UIColor.white.cgColor)
let center = CGPoint(x: buttonSize.width / 2 - textSize.width / 2, y: buttonSize.height / 2 - textSize.height / 2)
let path = UIBezierPath(rect: CGRect(x: 0, y: 0, width: buttonSize.width, height: buttonSize.height))
ctx.addPath(path.cgPath)
ctx.fillPath()
ctx.setBlendMode(.destinationOut)
titleLabel?.text?.draw(at: center, withAttributes: [NSAttributedStringKey.font: font])
if let viewImage = UIGraphicsGetImageFromCurrentImageContext(){
UIGraphicsEndImageContext()
let maskLayer = CALayer()
maskLayer.contents = ((viewImage.cgImage) as AnyObject)
maskLayer.frame = bounds
layer.mask = maskLayer
}
}
}
}
}
Usage :
button.clearColorForTitle()

Answer 2

I've written some code for you, my UIButton subclass called AKStencilButton (available on github https://github.com/purrrminator/AKStencilButton):
#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
it looks like this (sorry for the rainbow):

Answer 3

I added the following method to UIView to solve this:
-(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];
}
Simply call it with the views you want masked out. For example:
[button maskSubviews: #[button.titleLabel, button.imageView]]

Answer 4

I converted #purrrminator's solution to Swift 3, just the main method.
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
}