I'm trying (everything in XCode with Interface Builder) to create a UIButton with image adding it to UIToolbar, which makes it UIBarButtonItem (when click twice it shows the UIButton properties).
I have a image#2x.png image with size 64x88 (height is 88, because in Retina it's the toolbar height). I'm not interested in non-retina screens. I added this image to UIButton setting Mode in View properties to Center (or Aspect Fit, it shouldn't really matter here; tried both, aswell).
Set its size to 32x44 (44 height in builder). Then, dragged it to UIToolbar.
Now, I want to change the width of my button to make it larger, because I want to give user some more space to tap, also, I planned the toolbar background for that. And I want the image on this button to remain the same, but centered. But, when I try to resize the UIBarButtonItem, it actually scales the image, no matter what Mode is set.
That's what happens (I'm showing an actual dragging process):
However, if I change image real size to height 44, it works well. But 44 height looks ugly in Retina devices, so, what should I do?
I've seen this happen. For the sake of argument, create two images, image.png and image#2x.png, and when setting the image of the button, select image.png in Xcode.
Alternatively, you can create a UIView-based UIBarButtonItem and have a UIImageView and a UIButton. This way, you have a more precise control over the image sizing.
Related
I have a UITabBarController.
I added images to the bar buttons. On the ViewController the image size is fine, but on the TabBarController it looks all messed up.
Furthermore, when I fire up the app, and click the tabs - the images change size. I read online that I need to set the inset to be, for example:
Top: 5, Bottom: -5
But then the image isn't the size I want it to be, and it overlaps the text I want it to also have.
See image please.
How do I fix that? I am using Swift.
As per Apple Human Interface Guidelines, Tab Bar Icon size varies for different size glyphs and for portage and landscape mode, refer the guide below and check if the icon size is matching the size given. Make sure to verify #2x and #3x image icon sizes and add them if missing the proper size.
You should set images with correct size - 32x32, because UITabBarController does not fit images automatically.
For resizing images you can use something like this: https://github.com/ymedialabs/UIImageCategories/blob/master/UIImage%2BvImage.swift
I am trying to set the backgroundImage of a UIButton to an image that could be any size. The way I want to display tall images is for the images to expand to fill the button horizontally, and only show the top part of the image. So for a button with dimensions 100x200 and an image of 80x400, I want to scale the image to 100x500 and only show the top 200 pixels of that scaled image.
I am wondering if there is some way to alter how the background image fills the uibutton (right now it would not preserve the aspect ratio of the image). I tried setting the contentMode of the button and the button's imageView (note I set the button to a Custom Type, not System) to .ScaleAspectFill but that did not do anything.
The closest I came was by ditching the background image entirely and using setImage instead. This code was able to fill the button horizontally, but it shows the middle of the image, not the top. It also had odd functionality where if the scaled image was the same height as the button, it was not showing the full image (about 5 px were cut from the bottom and top). Here is that code:
imagesButton.imageView?.contentMode = .ScaleAspectFill
imagesButton.contentHorizontalAlignment = .Fill
imagesButton.setImage(image, forState: .Normal)
I have looked at about 5 stack overflow posts regarding image resizing in UIButtons, but I can't find the right set of settings that solve my particular need.
I don't know if this solution is an option for you, but the best way to achieve what you're trying to do, and give you pretty as much flexibility as you'd like with positioning and scaling the image, it to use a UIImageView (maybe even with a UIView that wraps it, for more image processing options) with a transparent custom button on top of it.
The upside to this approach is that you'll be able to do pretty much anything you want with the image and the way you display it. The downside is that you lose some of the default UIButton features (such as automatically altering the image when touched). But you can achieve these features programmatically if you want.
I want my background to be an image, so in IB I set a UIImageView with the constraints to be the same size as the its UIView. However, when I select "back" on the UINavigationBar, when the NavControl pops to the previous VC, this is what's there, briefly, before it disappears:
That is, the UIImageView is so big that it is almost double the width of the UIView, so as it slides off-screen to the right, the UIImageView's image drags on before finally disappearing.
I have also tried to do this programmatically, but even if I set the UIImageView's frame to be CGRectMake(0, 0, 100, 100), it still goes off to the left side of the UIView, as if the UIView's origin weren't at the top left corner, but slightly off the screen. Is this possible? How do I make it so the image fits the screen and doesn't go off?
If it's at all relevant, the jpg I'm using is in Images.xcassets and, although I can select it in IB and it appears, the UIImageView's image is white/blank, so in my viewDidLoad method I need to specify self.imageView.image = [UIImage imageNamed:#"hockeyIce.jpg"].
go to Main.storyboard
select the view in question
click Attributes Inspector
scroll down to View, select Mode: Scale To Fill
OK, the solution was to add [self.imageView setClipsToBounds:YES] to my viewDidLoad. It turns out that this is a common problem with aspectFill.
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 have a UIBarButtonItem which is just an image, I wanted to use this image as the background image of a bar item with an empty string title.
But the width didn't work out correct, in order to have the correct dimensions, I made a UIBarButtonItem with a custom view which was a UIButton with the image set.
The problem I have is that in landscape mode this custom view doesn't resize to fit correctly the smaller navigation bar.
I tried making my button autoresize by allowing flexible height, but it's preserving the top and bottom margins of the portrait and now my button is very squashed.
The reason I originally wanted to use a bar item with empty title was to use the appearance protocol to set the background image for bar metrics default and landscape to bypass this problem.
How can I make my UIBarButtonItem support portrait and landscape sizes with a custom view?
I have a dedicated landscape image so that it's just smaller, not distorted which I want to use.
Portrait:
Landscape:
Landscape with autoresizing, note the margins from portrait are causing an exaggerated squashing of the bar button.
The best answer is to provide two images one for portrait mode and the other is for the landscape mode and your code will be like
UIBarButtonItem *barBtnLeft= [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:#"yourImg.png"] landscapeImagePhone:[UIImage imageNamed:#"yourImg_Landscape.png"]style:UIBarButtonItemStyleBordered target:self action:#selector(yourSelector:)];
I know this post is old, but it luck the right answer, I hope newcomer, like me, will get the help with this solution.
I should mention here that landscape image should be smaller by 0.75f scale.
Is the image you're using resizable? Did you create it with - (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets?
If you just want it to maintain it's aspect ratio, and the custom view you've used is a UIImageView (which I assume it is), you can set the contentMode property of the image view to make it scale while maintaining aspect ratio. You're probably gonna want to use UIViewContentModeScaleAspectFit.