UIButton Semi-Transparent Border

Question

I have a custom button and the border is supposed to be semi-transparent white.

If I do this:

- (void) awakeFromNib {        
    self.layer.cornerRadius = 6.0f;
    self.layer.borderWidth = 4.0f;
    self.layer.borderColor = [[UIColor colorWithWhite:1.0f alpha:0.5f] CGColor];
}

I get this - transparency but of the original button color:

The border is semi-transparent but the color of the button.

Answer 1

Set the color of a sublayer to the color you want the button to be (don't set the background color of the button itself), and inset its rect relative to the button's rect,

- (void) awakeFromNib {
    self.layer.cornerRadius = 6.0f;
    self.layer.borderWidth = 4.0f;
    self.layer.borderColor = [[UIColor colorWithWhite:1.0f alpha:0.5f] CGColor];
    CALayer *sub = [CALayer new];
    sub.frame = CGRectInset(self.bounds, 4, 4);
    sub.backgroundColor = [UIColor redColor].CGColor;
    [self.layer addSublayer:sub];
}

Another way to do it, which will work better if you want the background color to be rounded too, is use a background color for both the self.layer and the sublayer. In this case theres on need to use a border at all.

- (void) awakeFromNib {
    self.layer.cornerRadius = 6.0f;
    self.tintColor = [UIColor whiteColor]; // make white text
    self.layer.backgroundColor = [[UIColor colorWithWhite:1.0f alpha:0.4] CGColor];
    CALayer *sub = [CALayer new];
    sub.cornerRadius = 4.0f;
    sub.frame = CGRectInset(self.bounds, 4, 4);
    sub.backgroundColor = [UIColor blueColor].CGColor;
    [self.layer addSublayer:sub];
}

Answer 2

Have you tried something like the following:

self.backgroundColor = [[UIColor colorWithWhite:1.0f alpha:0.5f] CGColor];

An easier approach is to set the color in Interface Builder by selecting the button, then choosing the alpha and background color in the Attributes Inspector:

Answer 3

Just in case if somebody looks for an UIImage with transparent outside border. If you simply set a layer border, you will get a transparent border, but you will see inside image behind that border, not outside image. I managed to create an ImageView with transparent outside border.

The idea is simple. I save UIImage from UIImageView. Then I remove UIImage and set initial layer as border layer. Then I put a new smaller sublayer above it and set a saved UIImage as contents of it.

#import <UIKit/UIKit.h>

@interface SSCircleImageView : UIImageView


@end

---

#import "SSCircleImageView.h"



@implementation SSCircleImageView


const CGFloat borderWidth = 5.0f;
const CGFloat borderAlpha = 0.3f;


- (void)awakeFromNib
{
    UIImage *image = self.image;
    self.image = nil;

    self.clipsToBounds = YES;
    self.layer.cornerRadius = self.frame.size.width / 2.0;
    self.layer.borderWidth = borderWidth;
    self.layer.borderColor = [[UIColor colorWithWhite:1.0f alpha:borderAlpha] CGColor];

    CALayer *subLayer = [CALayer layer];
    subLayer.frame =  CGRectInset(self.bounds, self.layer.borderWidth, self.layer.borderWidth);
    subLayer.cornerRadius = subLayer.frame.size.width / 2.0;
    subLayer.contents = (id)image.CGImage;
    [self.layer addSublayer:subLayer];
}



@end

It looks like this: