Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

iOS iOS 7 button with border (Apple uses it)

S

Sean7512

macrumors 6502a
Original poster
Jun 8, 2005
857
55
Is it possible to create a button in iOS 7 with a border the way that Apple did in iTunes Radio? (See attached screenshot and notice the "$1.29" button in the top right of the UI).

I have tried the following, but it does not work..

self.replayButton.layer.borderWidth=1.0f;
self.replayButton.layer.borderColor = [[UIColor blackColor] CGColor];

Any ideas/suggestions?
 

Attachments

  • itunesradio_hero.jpg
    itunesradio_hero.jpg
    187.9 KB · Views: 1,673
Last edited:
Sean7512 said:
Is it possible to create a button in iOS 7 with a border the way that Apple did in iTunes Radio? (See attached screenshot and notice the "$1.29" button in the top right of the UI).

I have tried the following, but it does not work..

self.replayButton.layer.borderWidth=1.0f;
self.replayButton.layer.borderColor = [[UIColor blackColor] CGColor];

Any ideas/suggestions?
Click to expand...

Sure it's possible, but I would advise against it. Apple is moving away from buttons with rounded rectangle borders. Any place you use them is going to look out of place in an iOS 7 app, and you will start to get dinged for it.

As for why iTunes Radio still has a rounded button, I suspect 1 of 2 things: It's a vestige that they haven't updated yet, or there is a holdout for the old look in the iTunes team. If there is a holdout on the iTunes Radio team that likes the old style, they will likely get smacked around and forced to update to follow the new UI Guidelines.

All that being said, what you want to do is quite easy and you are on the right track.

You need to create a custom subclass of UIButton, and set your button(s) to use that class. Then set your button type to "custom" in IB.

Finally, add setup code in your custom button class that does this:


Code: 
  self.layer.borderWidth = 1;
  self.layer.borderColor = [UIColor lightGrayColor].CGColor;
  self.layer.cornerRadius = 8;
  self.layer.masksToBounds = YES;

The last line, setting masksToBounds to YES, isn't strictly necessary unless you are going to fill the button with a color (which you will probably want to do).
 
Duncan C said:
Sure it's possible, but I would advise against it. Apple is moving away from buttons with rounded rectangle borders. Any place you use them is going to look out of place in an iOS 7 app, and you will start to get dinged for it.

As for why iTunes Radio still has a rounded button, I suspect 1 of 2 things: It's a vestige that they haven't updated yet, or there is a holdout for the old look in the iTunes team. If there is a holdout on the iTunes Radio team that likes the old style, they will likely get smacked around and forced to update to follow the new UI Guidelines.

All that being said, what you want to do is quite easy and you are on the right track.

You need to create a custom subclass of UIButton, and set your button(s) to use that class. Then set your button type to "custom" in IB.

Finally, add setup code in your custom button class that does this:


Code: 
  self.layer.borderWidth = 1;
  self.layer.borderColor = [UIColor lightGrayColor].CGColor;
  self.layer.cornerRadius = 8;
  self.layer.masksToBounds = YES;

The last line, setting masksToBounds to YES, isn't strictly necessary unless you are going to fill the button with a color (which you will probably want to do).
Click to expand...

Thanks, I'll give that a shot...

I know that Apple is moving away from those buttons, but there is a very specific use case I am looking to use this for. All of the other buttons in my app are the standard borderless buttons.

In this case, I have a table cell with some labels in it and then a button on the right side of the cell. The problem is, no one realizes it is a button so they don't attempt to press it. Just adding the border will help a lot I think. If not, I may have to use an icon maybe....
 
Sean7512 said:
Thanks, I'll give that a shot...

I know that Apple is moving away from those buttons, but there is a very specific use case I am looking to use this for. All of the other buttons in my app are the standard borderless buttons.

In this case, I have a table cell with some labels in it and then a button on the right side of the cell. The problem is, no one realizes it is a button so they don't attempt to press it. Just adding the border will help a lot I think. If not, I may have to use an icon maybe....
Click to expand...


Personally, I think Apple made a mistake by getting rid of the borders on buttons. We've been trained for 30+ years now to expect rounded rectangles of some sort around buttons. You see that shape, with or without a text title inside, and you know what it is and what to do with it.

However, resistance is futile. If you want to play in Apple's sandbox, you follow their lead.
 
I just got a new hard drive in stalled and my 10.8 OS to only run xcode. I downloaded xcode 5 and opened up an ipad app I had released. OMG what a nightmare it will be to solve these things. Button boarders gone! Some graphics are not placed right that get placed digitally. Plus the UINavigation Bar is lower in the screen so it covers up some text I had against the edge.

I see weeks of work ahead fixing things.
 
Can you not still do your own custom button graphic,,
and use any old graphic you make?
You can also use Quartz2D for the drawing.

Code: 
UIButton buttonWithType:UIButtonTypeCustom
 
Links aren't normally placed in rounded rectangles yet users know to click on them. It's just a matter of having a distinct style to the text that says "something happens when you tap me."

In your specific case, I would say that adding a rectangle around it makes sense. I'm pretty sure I've seen Apple's own iOS 7 apps place borders around buttons within cells.
 
ArtOfWarfare said:
UIButtons makes adding various states (pressed, highlighted, etc.) easy.
Click to expand...

UIButton includes these properties as part of being a subclass of UIControl. That doesn't really answer my question, though. For Duncan C's solution, is it necessary to subclass UIButton? Isn't an instance of UIButton sufficient?
 
dejo said:
UIButton includes these properties as part of being a subclass of UIControl. That doesn't really answer my question, though. For Duncan C's solution, is it necessary to subclass UIButton? Isn't an instance of UIButton sufficient?
Click to expand...

dejo,

Instead of subclassing UIButton you can add custom code that grabs a button and manipulates it's layer. However you then need to do it for every button that you want to customize.

You can also use "User Defined Runtime Attributes" on each button in IB to change most of those settings on a button-by-button basis. (Select the button. Select the "identity inspector." Open the "User Defined Runtime Attributes" section if it isn't already, click the "+" button underneath, and add "layer.borderwidth" as a key, make it a number, and enter a value of 1, enter a key of "layer.cornerRadius" and a value of 8.) The only thing you can't do directly with "User Defined Runtime Attributes" is adjust the border color to the light gray color that Apple's buttons use. That doesn't work because IB's "color" setting specifies a UIColor, and layers want a CGColor. I added a category called CALayer+setUIColor. It adds a method to CALayer called setBorderUIColor. The setBorderUIColor method takes a UIColor as input and uses it to change the CGColor on a layer. With that category in place, you CAN set the border color of a layer from IB as described above.

However, for customizations like this I prefer to create a subclass of UIButton. That way I just use that button type when I want custom behavior and it just works.
 
Thanks for the help, Duncan C's solution worked perfectly.

dejo, yes, it is possible to just have an instance but that is not good coding practice, code should easily be re-usable. Subclassing is the way to go, especially if you want to use this elsewhere in your project.
 
Sean7512 said:
Thanks for the help, Duncan C's solution worked perfectly.

dejo, yes, it is possible to just have an instance but that is not good coding practice, code should easily be re-usable. Subclassing is the way to go, especially if you want to use this elsewhere in your project.
Click to expand...

"Bad coding practice" is an overstatement. I would advise picking the right approach to solve the problem at hand.

If your want to be able to customize the appearance of a button in IB, adding borders and what not in IB (using User Defined Runtime Attributes, as described in my previous post) is a good way to go.

If you have a one-off button that needs a custom look, doing it in code is fine.

If you think you might need that same look elsewhere, then creating a custom subclass makes sense.
 
Duncan C said:
If you have a one-off button that needs a custom look, doing it in code is fine.

If you think you might need that same look elsewhere, then creating a custom subclass makes sense.
Click to expand...

If you're acting like you won't need it again, you're acting wrong. I can't think of any exception.
 
Actually some Apple posters on the Apple iOS forum have said that UIButton shouldn't be subclassed. Although they don't explain why it appears that UIButton is a class cluster. I've been using a UIButton subclass since iOS 2.0 without problems though.
 
PhoneyDeveloper said:
Actually some Apple posters on the Apple iOS forum have said that UIButton shouldn't be subclassed. Although they don't explain why it appears that UIButton is a class cluster. I've been using a UIButton subclass since iOS 2.0 without problems though.
Click to expand...

I've never heard that, and like you've I've created lots of subclasses of UIButton without a problem.

Were these posters Apple employees, or other 3rd party developers? Plenty of people offer "expert advise" who have no business doing so. To put it another way, on the internet there are a lot of people talking out of orifices other than their mouths.

If you read the docs on UIButton it makes specific reference to subclassing and things that will and will not happen automatically.

Apple is quite good about documenting system classes that should not be subclassed.
 
Duncan C said:
Sure it's possible, but I would advise against it. Apple is moving away from buttons with rounded rectangle borders. Any place you use them is going to look out of place in an iOS 7 app, and you will start to get dinged for it.

As for why iTunes Radio still has a rounded button, I suspect 1 of 2 things: It's a vestige that they haven't updated yet, or there is a holdout for the old look in the iTunes team. If there is a holdout on the iTunes Radio team that likes the old style, they will likely get smacked around and forced to update to follow the new UI Guidelines.
Click to expand...

Yes. Even though Apple features bordered, rounded corner buttons it in at least 8 of their redesigned apps, Apple is "moving away" and you will look out of place if you make your app match Apple's iOS7 style.

zady3aga.jpg
 
Menel said:
Yes. Even though Apple features bordered, rounded corner buttons it in at least 8 of their redesigned apps, Apple is "moving away" and you will look out of place if you make your app match Apple's iOS7 style.

Image
Click to expand...

It's true that Apple isn't entirely consistent.

However, what they changed is their rounded rectangle style buttons. Two of your examples are (new style) segmented controls, and three are special-purpose circular buttons. I only count 3 actual examples of rounded rectangle buttons in your post.
 
@Duncan, An Apple employee. He said

As I mentioned in your other post from yesterday, subclassing UIButton isn't supported and is rather difficult in practice, because we don't expose the actual designated initializer for UIButton (that is, calling -initWithFrame: doesn't do what you expect).
Click to expand...

https://devforums.apple.com/message/671148#671148

In my case I need a two line button and there's not a good way to do this with the stock button. As it happens my subclass calls initWithFrame: (because what else should it call?) and it seems to work fine as a custom button.
 
This is an old thread but I stumbled upon this thread figuring how to make button with the round border style.
I noticed there are more people like myself so I made a small library which is 100% identical (if not, please let me know) to the button that Apple uses.

https://github.com/yhpark/YHRoundBorderedButton

I hope this helps anyone who sees this thread in future.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back