Resolved iOS 7 button with border (Apple uses it)

Discussion in 'iOS Programming' started by Sean7512, Sep 30, 2013.

  1. Sean7512, Sep 30, 2013
    Last edited: Oct 2, 2013

    Sean7512 macrumors 6502a

    Joined:
    Jun 8, 2005
    #1
    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?
     

    Attached Files:

  2. Duncan C macrumors 6502a

    Duncan C

    Joined:
    Jan 21, 2008
    Location:
    Northern Virginia
    #2
    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).
     
  3. Sean7512 thread starter macrumors 6502a

    Joined:
    Jun 8, 2005
    #3
    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....
     
  4. Duncan C macrumors 6502a

    Duncan C

    Joined:
    Jan 21, 2008
    Location:
    Northern Virginia
    #4

    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.
     
  5. MattInOz macrumors 68030

    MattInOz

    Joined:
    Jan 19, 2006
    Location:
    Sydney
    #5
    Could you do this with a UISegmentedControl ans only one segment?
     
  6. larswik macrumors 68000

    Joined:
    Sep 8, 2006
    #6
    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.
     
  7. xArtx macrumors 6502a

    Joined:
    Mar 30, 2012
    #7
    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
    
     
  8. Duncan C macrumors 6502a

    Duncan C

    Joined:
    Jan 21, 2008
    Location:
    Northern Virginia
    #8

    The behavior of a segemented control is all wrong. That wouldn't work. I already posted the solution. It's tested and it works.
     
  9. ArtOfWarfare macrumors 604

    ArtOfWarfare

    Joined:
    Nov 26, 2007
    #9
    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.
     
  10. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #10
    Question: is it necessary to subclass UIButton?
     
  11. ArtOfWarfare macrumors 604

    ArtOfWarfare

    Joined:
    Nov 26, 2007
    #11
    UIButtons makes adding various states (pressed, highlighted, etc.) easy.
     
  12. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #12
    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?
     
  13. Duncan C macrumors 6502a

    Duncan C

    Joined:
    Jan 21, 2008
    Location:
    Northern Virginia
    #13
    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.
     
  14. xStep macrumors 68000

    Joined:
    Jan 28, 2003
    Location:
    Less lost in L.A.
    #14
    No.

    Yes, it is sufficient.
     
  15. Sean7512 thread starter macrumors 6502a

    Joined:
    Jun 8, 2005
    #15
    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.
     
  16. Duncan C macrumors 6502a

    Duncan C

    Joined:
    Jan 21, 2008
    Location:
    Northern Virginia
    #16
    "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.
     
  17. ArtOfWarfare macrumors 604

    ArtOfWarfare

    Joined:
    Nov 26, 2007
    #17
    If you're acting like you won't need it again, you're acting wrong. I can't think of any exception.
     
  18. PhoneyDeveloper macrumors 68030

    PhoneyDeveloper

    Joined:
    Sep 2, 2008
    #18
    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.
     
  19. Duncan C macrumors 6502a

    Duncan C

    Joined:
    Jan 21, 2008
    Location:
    Northern Virginia
    #19
    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.
     
  20. Menel macrumors 603

    Menel

    Joined:
    Aug 4, 2011
    Location:
    ATL
    #20
    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.

    [​IMG]
     
  21. Duncan C macrumors 6502a

    Duncan C

    Joined:
    Jan 21, 2008
    Location:
    Northern Virginia
    #21
    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.
     
  22. PhoneyDeveloper macrumors 68030

    PhoneyDeveloper

    Joined:
    Sep 2, 2008
    #22
    @Duncan, An Apple employee. He said

    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.
     
  23. yhpark macrumors newbie

    Joined:
    Apr 14, 2014
    #23
    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.
     

Share This Page