UIButton Archives

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.

It looks like this:

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

#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

The same approach can be used for UIButton or UIView.

Sometimes you need to create only one button, that looks like a UITableViewCell with accessory indicator. Users are familiar with this control and they know that if they click it, something should appear. For example, it can be used in different forms to select something after user taps a button. Using a UITableView with one section and cell is too complex approach if you need only one such button. Even if you need some more such buttons, you can use this solution to make code a little simpler.

I created an instance of UIButton and reached this goal after some search in StackOverflow and my own attempts. Finally, my button looks like this:

Yes, it is a UIButton, not UITableViewCell. So, how I did it?

You can look at my repository on GitHub, I have published a source code of such button under MIT Licence Terms.
DKAccessoryButton: https://github.com/wzbozon/DKAccessoryButton

Alwawee

Tag Archives: UIButton

How to create semi-transparent outside border for UIImageView

How to create UIButton that looks like UITableViewCell with AccessoryIndicator

iOS Development