Is there a way to assign a stretchable image to a UIButton from Xcode's Interface Builder? and not from code? I mean, to set an image and stretch it only on certain parts (like 9-patch for android)
I am using the properties of image, and background and the stretching section of the view but nothing seems to work to stretch the image on the edges I place.
Yes, I think what you are looking for is slicing. In the asset catalog, when you select an image, on the bottom right corner you can find the Show Slicing button. When you click this button Xcode will display the slicing editor. By using it, you can define which parts of an image should stretch and which should stay unchanged.
The editor should display something like this.
You can find another example here
Related
I have a custom UI Button (just regular button but with image), within the navigation bar, but when I choose my image it looks like this in designer:
As you can see here, it's over my provider and status labels, and also when I run application it's over the WebView (which is bellow), so definitely out of navigation bar. I tried to find in storyboard some property where I can adjust this but I couldn't find any. I'm using swift and storyboards.
Appreciate any help, iOS newbie :)
Based on your description I think your issue is that you are trying to add a button for navigation. What you need is a NavigationBar with a NavigationItem/BarButtonItem in it. If you look in the object library you will be able to find these.
Just drag them onto your story board. Once there select the button and in the side menu you will be able to select the Image for that Item. Now it is in the navigation bar up top. Let me know if there are still issues. 👱🏼
You have to make sure your 1x image is to the specified size (and then your 2x etc, or just use a PDF at the 1x size.
Icon sizes are here: iOS Human Interface Guidelines: Icon and Image Sizes
I made my pdf 22x22 and added it to .xcassets with scale factor "single vector"
I want a customized button with my own background. The thing is, though I've set the background of the PNG file to transparent, the transparent part was still included in xcode, showing the bigger border. Any idea to solve this problem? In this simple demo I need the black part only. I created this button in xib, and imageView has this problem too. Thanks.
When you set the background image of the button, it took the PNG file you chose and made that the background image. If you have alpha (transparent) space on your PNG file, it still counts as pixels adding to the size of your image. They're just clear pixels. You'll need to edit your PNG file to be just the black part that you want, removing the alpha.
A tip, when making custom buttons with background images, click off of the button to deselect it, then click the button to select it again (Just to make sure. After you select a file, even though the button looks selected, your hotkeys are affecting the attribute inspector, not the button), then hit cmd + =. This will auto size the button to be the size of the image that you added as the background image. If you don't do this, you'll probably see distorted images, since the default is to change the aspect to fill the button's image view.
Set the opaque flag on the button to false.
Alright, this is struggling me by now. I have a PNG image which has the size of 10x36px.
When I try to use that in any of my views it gets resized. Not the frame property, this one remains intact. But visually the image is not the same.
The real image is like this . (Sorry if you can barely see it. That's because it has a white background on a white foreground).
But when I am in the simulator (it happens on a device too) it looks like this.
.
I'm not using contraints(I turned off AutoLayout in order to find the bug).
I printed the frame of that button and it's width, height, x and y values are just as they are in the interface builder. And I printed them everywhere and in response to different events too(I know, that's not the reason. I'm just desperate).
This happens only with this PNG specifically cause other UIButton I have in the very same view, but with differents Images, are working just fine.
What could be the cause of this error?
EDIT:
Trying as a background image it got better. But still not perfect.
Place the png image inside an empty 36x36 png image in Photoshop/Pixelmator to stop it resizing and preserve the original ratio.
Or try setting the views content mode to "aspect fit" in Interface Builder or programmatically:
yourImageView.contentMode = UIViewContentModeScaleAspectFit;
The cause could be that UIBarButtons treat images differently than UIButtons. UIBarButtons are typically used in UINavigationBars or UIToolbars while UIButtons are used typically in the View.
Make sure you are using Button background image and not Button image.
Button background image covers the whole button background.
Button image places the images on a portion of the background.
Also, use xcassets. It comes with the project template. If you don't have it (deleted it), add a new one and create an image set. Once you do that, add your images. Make sure to select "Render as original image" for each image in your image set.
The PNG image you linked to isn't 10x36 pixels, but 10x30. Oops?
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.