CODEWITHSUNDEEP
ioscocoa-touchuibuttonuikit
OdieO
OdieO

Reputation: 6994

UIButton Semi-Transparent Border

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:

enter image description here

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

Upvotes: 1

Views: 2467

Answers (3)

Denis Kutlubaev
Denis Kutlubaev

Reputation: 16114

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: enter image description here

Upvotes: 0

rdelmar
rdelmar

Reputation: 104082

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];
}

enter image description here

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];
}

enter image description here

Upvotes: 1

wigging
wigging

Reputation: 9170

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:

enter image description here

Upvotes: 0

Related Questions