sarunw / swframebutton

iOS7 Style UIButton with border

SWFrameButton

This UIButton subclass replicate single line border button see in iOS 7 App Store.

Installation

SWFrameButton is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "SWFrameButton"

You may also quickly try the SWFrameButton example project with

pod try SWFrameButton

Requirements

Requires iOS 7.0+ and ARC.

Usage

SWFrameButton design to use tintColor to determine its color, so try to avoid set text color by setTitleColor:forState: it won't break your button, but may raise inconsistent highlighted/selected color state. Text Color property in Interface Builder will be ignore for this reason, use Tint property in view section instead.

Basic usage

SWFrameButton *button = [[SWFrameButton alloc] init];
[button setTitle:@"Green Tint Button" forState:UIControlStateNormal];
[button sizeToFit];
button.tintColor = [UIColor greenColor];

If you use Interface Builder, add a UIBUtton to your interface and set Class to SWFrameButton.

Customization

You can use customize SWFrameButton using UIAppearance

[[SWFrameButton appearance] setTintColor:[UIColor orangeColor]];
[[SWFrameButton appearance] setBorderWidth:1];
[[SWFrameButton appearance] setCornerRadius:10];

or set individual button style via property

SWFrameButton *button = [[SWFrameButton alloc] init];
button.tintColor = [UIColor orangeColor];
button.borderWidth = 1;
button.cornerRadius = 10;

Author

Sarun Wongpatcharapakorn (@sarunw)

License

SWFrameButton is available under the MIT license. See the LICENSE file for more info.

swframebutton's Issues

CGContextSetFillColorWithColor: invalid context 0x0

xcode 8.2.1
control output
CGContextSetFillColorWithColor: invalid context 0x0. Backtrace: <-[SWFrameButton sw_backgroundImage]+420> <-[SWFrameButton layoutSubviews]+128> <<redacted>+1196> <<redacted>+148> <<redacted>+292> <<redacted>+1016> <<redacted>+72> <-[SWFrameButton setSelected:]+1168> <-[SWFrameButton commonSetup]+896> <-[SWFrameButton initWithFrame:]+192> <<redacted>+684> <-[GrabListTopView getCornerButton:]+76> <-[GrabListTopView setupSubviews]+108> <-[GrabBaseView initWithFrame:]+168> <-[GrabListViewCell setupSubviews]+512> <-[JFBaseTableViewCell initWithStyle:reuseIdentifier:]+176> <<redacted>+540> <<redacted>+88> <-[GrapViewController tableView:cellForRowAtIndexPath:]+116> <<redacted>+716> <<redacted>+80> <<redacted>+2304> <<redacted>+116> <<redacted>+176> <<redacted>+1196> <<redacted>+148> <<redacted>+292> <<redacted>+32> <<redacted>+252> <<redacted>+512> <<redacted>+120> <<redacted>+32> <<redacted>+372> <<redacted>+1024> <CFRunLoopRunSpecific+444> <GSEventRunModal+180> <<redacted>+684> <UIApplicationMain+208> <main+124>

3 and 4 characters displayed weird

I am generating a grid of buttons and sometimes 3 characters and 4 characters displays weird.
check screenshot

Touch-target, size-challenges

Nice work,
I find however that this style of button have an issue when it comes to the size of the touch target. In order to look nice they quite often need to be a lot lower than the minimum 44 pts. recommended by Apple's HIG. This would probably mean you'd have to separate the viewLogic from the touch-target, but would make the component a lot more usable...

Accessibility Button Shapes

If the user turns on Button Shapes in accessibility, the buttons have underlined title labels. I do not believe this should be the default behavior because Segmented Controls, which also have outlines, do not do this.

Is there a way to disable the underline?

Missing text with clearColor background view

There are some limitations to this.
The button doesn't work for most of my project, because the text is not visible in selection state.
To reproduce this create a SWFrameButton and embed it in an UIView with clear background color.

Edit:
Simple fix:

- (UIColor *)currentBackgroundColor
{
    UIColor *backgroundColor = self.superview.backgroundColor;
    UIView *superSuperView = self.superview.superview;

    CGFloat r,g,b,a;
    [backgroundColor getRed:&r green:&g blue:&b alpha:&a];
    if (a == 0) {
        backgroundColor = nil;
    }

    while (backgroundColor == nil && superSuperView != nil) {
        backgroundColor = superSuperView.backgroundColor;
        superSuperView = superSuperView.superview;

        CGFloat r,g,b,a;
        [backgroundColor getRed:&r green:&g blue:&b alpha:&a];
        if (a == 0) {
            backgroundColor = nil;
        }
    }

    return backgroundColor;
}

This will do the work for [UIColor clearColor], but doesn't address other colors with alpha value <1.

Anyway. Great job with this Pod!
I've been looking a long time for something like this!

Having a different border color than the text color

Hey there,

Is there a way to set the border color to be a different color than the text color itself?

I basically want to have a button with lets say a red background color (note: background color, not tint color. So even if the user doesn't press the button, it's red). The text would be white in this unhighlighted state.

Now lets say the user taps on the button, I want to change the filled background color to white, the text to be red and the border to be red.

Is that possible, if so how can I achieve this effect?

I'm currently using this code but it's not really giving me what I'm after:

rightButton.setTitle("Say Hi!", forState: UIControlState.Normal)
rightButton.tintColor = UIColor.whiteColor()
rightButton.backgroundColor = UIColor.redColor()
rightButton.cornerRadius = 25 // button height is 50
rightButton.borderWidth = 1

Everything works, except that I still want the border color to be red instead of white when the user taps on it.