No Round Rect Button in Xcode 5? - ios

Is drag and drop of round rect button no longer available in Xcode 5? I can't seem to find it in the Interface Builder. I was guessing that this is one of the changes in iOS 7, but I just wanted to make sure.

Can also make the rounded rect within the storyboard.

The Round Rect button from Xcode 4 and previous versions appears to have been replaced with the System Default button, which also happens to be clear. I.e. by default there is no white background with rounded corners, only the text is visible.
To make the button white (or any other colour), select the attributes inspector and scroll down to the View section:
Select Background and change it to White:
If you want rounded corners you can do so with a little bit of code.
Just ctrl-drag from the button to your .h file, call it something like roundedButton and add this in your viewDidLoad:
CALayer *btnLayer = [roundedButton layer];
[btnLayer setMasksToBounds:YES];
[btnLayer setCornerRadius:5.0f];

This was too long for a comment in #Robert's answer, but I just wanted to add regarding the statement: "The Round Rect button from Xcode 4...appears to have been replaced...".
Confirming that it definitely has been replaced:
The rounded rectangle button is deprecated in iOS 7. Instead, use a
system button—that is, a UIButton object of type UIButtonTypeSystem.
iOS 7 system buttons don’t include a bezel or a background appearance.
A system button can contain a graphical symbol or a text title, and it
can specify a tint color or receive its parent’s color.
...
If you need to display a button that includes a bezel, use a button of
type UIButtonTypeCustom and supply a custom background image.
Apple iOS 7 Transition Guide, p. 45, "Rounded Rectangle Button"
So, Apple's recommendation is to use a background image.

Actually in ios 7 the total UI has been changed for basic controls.
If still you want to have a rounded rect button, you have to go for the coregraphical property of UIView subclasses i.e; layer property.
buttonObj.layer.cornerRadius = 5.0f;//any float value
to show the effect you have to give some background color to buttonObj
if you want to set the border width
buttonObj.layer.borderWidth = 2.0f;//any float value
you can also give the color for border
buttonObj.layer.borderColor = [[UIColor greenColor]CGColor];
Note: Here we have to use CGColor for the layers because layers are the core graphical properties of UIViews

Related

How to remove rounded corners in PopoverView?

I built a custom Popoverview, but fail to remove the content's rounded corners.
Tried to set .layer.cornerRadius = 0.0 in almost every view in found, with no success.
Image Link: Custom Popover
Red border is of UIViewController used to init the UIPopoverController with, green is background of custom UIPopoverBackgroundView.
Answer from this thread: UIView default styling has rounded corners?
There is no supported way to make the view inside of your UIPopoverController not have rounded corners. The internal code of the UIPopoverController adds your view to a view with rounded corners that clips to bounds.
There may be a hackish way to do it, i.e. waiting until the UIPopoverController is shown and then traversing through all of the parent's of your view and setting them all to have cornerRadius = 0; and clipsToBounds = NO;, but even if you find a solution it might not be compatible with all versions of iOS and if Apple changes some internal code of UIPopoverController in the future then your solution could break.
If you really want to do this then the best way to go is to create your own class that mimics the UIPopoverController functionality.

UIColor noColor, but not clearColor

How can I get the UIColor for no color? Y'know, the color represented as a white square with a red diagonal line through it.
TLDR
I'm trying to set the tint color of a UIButton in interface builder, but it's not playing nice, so I'm trying to do it programatically. If I set the button's tint color to [UIColor clearColor], the button disappears. The button only has an image, no text.
This property not available for all types of UIButton
You need to Use another buttonType.you can find this link useful.
the documentation also does not provide information that which specific button types support this property.
so..in general use custom button type
Create your button as custom...
[UIButton buttonWithType:UIButtonTypeCustom]
This will remove your red corner problem since i think your button is created as default (rounded rect) type.
You can set this in interface builder too (not necessarily create it programmatically).

Customising UISlider (without coding a custom one)

I want to have a UISlider with a uniform green colour (no gradients).
When I try to paint the uislider's track it appears to have a gradient even if I put the line:
slider.backgroundColor = [UIColor clearColor];
(Second slider in the image)
When I try to put an image coloured green (in the picture is blue but ignore it...) I am not able to round the corners of the layer:
slider.layer.cornerRadius = 10;
EDIT:
I ended up customizing it UISlider custom images and thumb height?
Is it possible for me to achieve this without customising a the uislider?
Ray Wenderlich's site actually has a free tutorial about customizing UIKit components. See User Interface Customization in iOS 6.
Note that although this tutorial is titled in iOS 6, the appearance proxy is available starting in iOS 5.0, so most of this tutorial is actually relevant for iOS 5.0+.
EDIT
Unfortunately, the gradient you mentioned is actually an image that's overlaid on top of the tint color by default, and there doesn't appear to be an easy way (such as a property) to disable this.
As rmaddy suggestions in the comments though, you can simply create and use an image with rounded corners to get around this.
You can do through interface build too.Choose whatever colors or images you want to use.
Swift 4
Add this line after slider.layer.cornerRadius = 10
slider.clipsToBounds = true

Rectangular UIButton

I've read that you can make a UIButton rectangular by setting the cornerRadius, but is this only applicable to custom UIButtons? Is there a way to set the cornerRadius to zero on a default UIButton?
RoundedRectangle Button type means that it would be rounded corners, I don't think it is possible to to set radius to 0 for this button according to my experience, however you could set the background image to it or use custom button type it is quite simple as you have mentioned in your question yourself.
To make a UIButtonTypeRoundedRect type of UIButton rectangular, give the button a rectangular background image (e.g. with setBackgroundImage:forState:).

How do I replicate the iOS keyboard appearance?

I have made a custom number pad keypad for my iOS app, but want it to more closely mirror the appearance of the standard keyboard. I am looking for advice on how to make a standard UIButton look and act like the standard keyboard buttons.
Specifically, I need to figure out the following for the iPad and would like to do as much as possible in an xib or storyboard.
The size of the buttons
The color of the keyboard background (or even better, how can I determine this myself?)
The background color of the button
The font and color of the text in the button
How do I add the shadow under the button?
How do I have the button highlight with the grey color instead of blue?
The spacing between the buttons
How do I keep the "group" of buttons centered as a whole when changing the orientation? (all of the resizing options anchor it to a side and not to each other)
Do the standard buttons use images, or do they modify standard UIButton's? Or more appropriately, which is better for us to do?
UPDATE:
I have created a project for the number pad which is a complete working example. However, I have not spent much time on the actual appearance, which is what this question was mainly about. I have posted it on Github and made it an open source project (covered by the MIT licence, so commercial use is allowed as well). Hopefully other people will find it useful, and hopefully others will feel inclined to help make it better and look more like the native keyboard. The Github repository is at:
https://github.com/lnafziger/Numberpad
If you want to do it mostly in IB, then the following can be done:
Size
Colours
Background Color
Font
Text Color
Shadow (to UILabel's not UITextArea)
Spacing
AutoSizing
There is a cool PSD vector kit for all types of iOS elements that should help:
http://www.smashingmagazine.com/2008/11/26/iphone-psd-vector-kit/
Anyway, to the rest of the answers:
Size
Take a screenshot of the buttons and determine the size in Photoshop, or you can use CMD+i on the image file to see the pixel dimensions. Remember to use CMD+Shift+4 and then drag (and then Space to make the screenshot).
Colours
Use the DigitalColor Meter app that's preinstalled on the Mac, it's pretty cool for all kinds of functions.
Background Color for UIButton
The actual UIButton will have a background color of [UIColor clear], however, for the whole keyboard background, it would be best to create something similar in Photoshop and again using color pickers to get the right gradients. Then you could drag this into IB as a background image.
Font
Again, have a look at fonts/try Helvetica
Text Color
[UIColor black]
Shadow:
Programmatically:
[text setShadowOffset:(0,1)]; // One option
[text setShadowOffset:(0,-1); // Another option
[text setShadowColor:[UIColor whiteColor]];
But, you can also set the shadow in the IB inspector for a UILabel.
Button highlight
Look at the UIButton reference
http://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIButton_Class/UIButton/UIButton.html
Spacing & Rotation
If your using IB, then you could just drag on the buttons to whatever location.. IB has some autosizing options that determine where the buttons are spaced according to the TOP, LEFT, RIGHT and BOTTOM. You can also set if they are stretchable or not.

Resources