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.
Related
When configuring a button in IB, I set background image of this button with a 1x1 px image. Since the button has no background color and the color of button title is white, the button is invisible in IB. But it is rendered correctly when running with the tiled image. This issue makes me a little inconvenient when working in IB. The version of Xcode is 7.2. Is it a bug of Xcode? Is there any workaround?
Thank you very much.
I see,I found you set the image but not background so you can't see it.
Check images,are there all resolutions ready?In my storyboard,it works.
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?
Hi every one I want to set my image in xcode TRANSPARENT (1st photo). I just drag and drop the Image to View but after that I retry to redo my thing but can not(2nd photo). Anyone know how to do please help me.
ps: I dont want to write any code, just drag and drop
If I got you right, you must set alpha parameter to the element you want to be transparent in the attribute inspector.
You could just set a transparent background color for your text view. Check its Attributes inspector.-
Oh, do you mean you want the UITextView background to be transparent? If so, set the background color to clear color.
If you want an entire view to be transparent, set the alpha to a number between 0 and 1.
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'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.