I'm trying to change the appearance of my UIButtons int the view as well as UIBarButtonItems in the NaviBar or toolBar or SegControl.
And here are 2 questions.
NO.1. How can I set customed background pictures to the buttons I mentioned while I can change their titles programmaticly? I mean I found that if I set the background of a button, the title seems to be concealed by the background image?
NO.2. I tried to add the text of the title directly on the png, ( which is actually a imperfect way since I need to change the title during the runtime). Anyway it works out both the image and the text, but the resolution seems to be reduced because the text became sort of blurred.
Can anyone give me some advices how to achieve it? Thanks a lot!
NO.1 The button title should not be obscured by the background image. Are you setting the button's image in code like this:
[btn setBackgroundImage:image forState:UIControlStateNormal];
? You may be instead setting the button's image property (which is different from its background image).
NO.2 You really don't want to be adding text to the button PNG, for the exact reason you mention. Buttons in iOS are designed to display images and text the way you want - put your energy into getting the built-in buttons working the way they should. There are umpteen billion tutorials out there about how to do this.
Related
I have a circular custom menu with several buttons (with image and text). To not cut title, I had to unlarge button size, but the background of few buttons overlay partially the image or title of other button. That why I'd like to disable the background of buttons, or make image and/title only active.
How can I do?
Thanks
As others have mentioned, you could change the background color quite easily with the following:
Swift 3.0
buttonName.backgroundColor = UIColor.clear
Swift 2.2 and prior
buttonName.backgroundColor = UIColor.clearColor()
Are your buttons overlapping because they're crowded? If so then from a design point of view I'd look at redesigning that aspect. Users may be misclicking if you have a number of overlapping crowded buttons.
I let backgroungColor to gray just to show you. I create buttons with a specific width in order the title is well writen. Maybe I can calculate the exact width of the title and attribute it to the button. That would solve partially the problem.
I've got a button created in photoshop which is already the exact size to use for displaying.
In IB I created a RRB and set the background image to the button .png. However this doesn't display properly - there is a white boarder between my .png button and the button provided by IB, especially at the corners which must have a different radius. I've tried playing with all the various setting in IB but couldn't get it to go away.
However if instead of setting the .png to the background image I set it to the image then it looks perfect (what is the difference between the image and the background image?).
However I simply cannot get the button text to appear when the .png is set to the image as opposed to the background, though it does when the .png is set to the background image. Again I've tried setting all various settings in IB but cannot get the text to appear.
WHat am I doing wrong, what should I be doing to get it to work?
I know I could create the button and text programatically, but I want to understand why I can get it to work using IB.
EDIT:
I've changed the type to custom but it still doesn't appear properly. See the images I've posted, the one without the text is how it should appear and what it looks like if I set the .png to the image rather than the background. The second one is what it looks like if I set the background image to the .png and set the type of button to custom. THe 3rd one is the background image set to the .png and the type as rounded rect.
Use button type = UIButtonTypeCustom
It looks like your button background image doesn't have the same dimensions as your UIButton.
iOS supports something called "strechable images", allowing you to define which part of the image should be streched. Unfortunately, this can't be done in Interface Builder. In code, you can do it like this:
-(void)viewDidLoad
{
[super viewDidLoad];
UIImage *stretchableImage = [[someButton backgroundImageForState:UIControlStateNormal] stretchableImageWithLeftCapWidth:5 topCapHeight:5];
[someButton setBackgroundImage:stretchableImage forState:UIControlStateNormal];
}
IMPORTANT: stretchableImageWithLeftCapWidth:topCapHeight: is deprecated in iOS 5, but the only solution if you need to support iOS 4 as well. If you can go iOS 5 only, use resizableImageWithCapInsets:.
Rather than using a Rounded Rectangle button type, set the button type to UIButtonTypeCustom.
This will do as you want, in that it will wrap the button around the image you provide it.
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.
How do I achieve the "Find My Friends" button look using iOS 5? it is as if the buttons are stamped into the leather.
I like the look of the Find My Friends app, it looks like leather and the buttons look like they are stamped into the leather. So, I was wondering how do I achieve this stamped in effect. I know how to set the background image in iOS 5 on a UINavigationBar, and I can set the tint color of a UIBarButton.
But, how do I get the image on the UINavigationBar to bleed through to the UIBarButton?
Everything I've tried leads to a black button and no bleeding of the background image.
I was thinking that there must be a way to set the transparency of the UIBarButton.
Does anyone know if this possible in iOS 5?
Or, do I need to do this?
Create a custom button image that is in the shape of the button image : rounded corners , 3D button effect and a transparent color in the middle.
This way the leather will show through where it is transparent in the middle of the button.
Thanks in advance! Brian.
Get your artist to draw the stamped button for you. The system is not going to offer any help.
I'm pretty sure you'll need to go with building a custom button image that has a translucent background colour for the leather to show through.
As you've mentioned, you can set the tintColor property on UIBarButtonItem, but this doesn't seem to respect the alpha of the colour you set. The image seems the best way to go.
I'm trying to use the standard highlighting logic for a UIButton but set the background image for the Normal state. When do this programmatically everything works fine, but when my button is set in Interface Builder I get the following results:
Has anyone run in this where the standard highlighting is changing the way the background image looks? Just to be clear I want the color change, just not the squared off corners on the left.
Figured it out. Apparently if my button size is smaller than the background image it scales appropriately for Normal State, but the highlighted state causes this strangeness. Good to know since I'm attempting to use a single image and just scale it for all of my various buttons.
In this case my IB button was set as 77pt wide, but my image is 97pt wide. It finally looks correct with my IB button set at 90pt wide or larger.