In an app I'm working on, I've got a few UIImages which for some reason come out really blurry. This specifically applies to two icons I use which are fairly small (80x15 and 65x15).
(Update: added iPad Simulator output as well -- it is blurry just as the iPad output)
Top left and right are original images, bottom left and right are how they come out on the iPad. I actually got complaints about these being awfully blurry from users, so it's not just me.
The code where one of these is put in place looks like this (can show code for other one at request):
UIButton *bWeb = [[UIButton alloc] initWithFrame:
CGRectMake(attriboffset, height - 20.f, 65.f, 15.f)];
[bWeb addTarget:self action:#selector(clickWebLink:)
forControlEvents:UIControlEventTouchUpInside];
bWeb.userInteractionEnabled = YES;
[bWeb setImage:[UIImage imageNamed:#"button-weblink-65x15.png"]
forState:UIControlStateNormal];
[bWeb setImage:[UIImage imageNamed:#"button-weblink-highlighted-65x15.png"]
forState:UIControlStateHighlighted];
[self addSubview:bWeb];
[bWeb release];
The original images are (in case you think it might be a formatting issue with the actual PNG files): ,
Make sure that all numbers in UIButton's frame are rounded/truncated to integers.
What is attriboffset?
Like hoha says, if the numbers are not integers, you will end up with fractional offsets, and devices will do some blurry antialiasing to compensate for that. The numbers should not have fractions.
I think that for some reason the image is being rendered with some kind of unnecessary processing that is causing the quality loss.
Try changing the contentMode property of your UIButton to UIViewContentModeCenter. The default is UIViewContentModeStretch.
Open your images in preview and resave them.
Related
I'm losing my mind over this one. I have UIButton connected as Outlet. I want to change it's image. In the viewDidLoad function, I try to set the image like so:
[button1 setImage:[UIImage imageNamed:#"house.png"] forState:UIControlStateNormal];
Nothing happens. However, if I use ImagePicker, it somehow works. In the ImagePickers function "didFinishPickingImage", I repeat the exactly same command as above for setting image and it works, the image is displayed normally.
I've been thinking that maybe the button's image is not refreshing itself, but trying to call [button1 setNeedsDisplay], or [button1.imageView setNeedsDisplay] or even [button1.imageView.image setNeedsDisplay] does nothing.
Does anyone have any idea about this? I've wasted two hours by now and I'm really getting frustrated, because I'm certain that the reason must be so stupid it's unbelivable.
Please check your button type.
If your button type is "System" you should change it to "Custom"
Two things to do here:
#1, change your code to:
[button1 setImage:[UIImage imageNamed:#"house.png"] forState:UIControlStateNormal];
and #2
make sure your UIImage returns a valid image.
In other words,
UIImage * imageToSet = [UIImage imageNamed: #"house.png"];
if(imageToSet)
{
[button1 setImage:[UIImage imageNamed:#"house.png"] forState:UIControlStateNormal];
} else {
// if you see this line in your console, then you know where to look for a problem
NSLog( #"why is my image object nil?");
}
For anyone who will find themselves in a similar situation; I was using the mentioned button inside a custom cell for table view. However, the cells aren't loaded right away (i.e. inside viewDidLoad/viewWillAppear etc.), but inside the tableView:cellForRowAtIndexPath function. All my button variables were nil at that point. My solution was to load the image after the cell has been created and it has worked straight away afterwards.
Here are a couple additional notes. UIButton setImage: forState: is the correct method:
[button1 setImage:[UIImage imageNamed:#"house.png"] forState:UIControlStateNormal];
imageNamed is a great convenience method for grabbing the image, but make sure it returns an object. Forgetting to include the image file in the current target gets me all of the time.
[UIImage imageNamed:#"house.png"]
You also don't need the extension. The SDK works this out.
[UIImage imageNamed:#"house"]
And even though UIControlState is a bit mask, you cannot OR the values together. This does not not not work and I must must must remember this because it gets me every time I use the call.
// NO NO NO
[button1 setImage:[UIImage imageNamed:#"house"] forState:UIControlStateNormal|UIControlStateSelected];
// YES
[button1 setImage:[UIImage imageNamed:#"house"] forState:UIControlStateNormal];
[button1 setImage:[UIImage imageNamed:#"house"] forState:UIControlStateSelected];
Was getting the same problem when UIbutton was in UITableViewCell.
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:[UIImage imageNamed:#"detail.png"] forState:UIControlStateNormal];
should work in UITableViewCell
Glad to know that the problem is solved but none of the answers actually addresses the problem.
Generally, if the code is correct, then the error shifts from "syntax error" to the "logical error" category. There is no definite guide to handle it but here is a small checklist that can help anyone to troubleshoot their code.
1) The IBOutlet is not connected or renamed.
2) Make sure that the UIButton type is custom.
3) The image is set (more than once), somewhere else in the code.
4) You are trying to set the Image through any sync method which is not using the main thread. (There are several threads on that alone).
5) If you are nesting the images as subviews, make sure the problem isn't with their parent view.
6) If it is appearing in Simulator but not in the device, It's a lettercase (Uppercase, lowercase difference in the code and the filename.
7) Modern simulators works with very low GPU memory on older machines. You can tweak the simlator options to make it appear. E.g (Command + Right Arrow) twice to change the simulator orientation and your changes will appear.
There are few other but common pitfalls where developers usually overlook
1) The image doesn't exist OR you are making a spelling mistake.
2) The filetype is different than mentioned. (JPG, PNG).
Last thing you'll want to check - make sure you're setting the image on the main thread! Just ran into an issue where I was setting a button image in a callback from ALAssetLibrary (fetching images from photo library). The image wouldn't update until I tapped the button. Turns out the callback was happening off main...
for those having issues with system images not appearing, just use systemName: instead of named
if let starImg = UIImage(systemName: "star.fill") {
button.setImage(starImg, for: .normal)
}
It's for ios13 and later...
For me it was to move the line:
[button1 setImage:[UIImage imageNamed:#"house.png"] forState:UIControlStateNormal];
from awakeFromNib method
to viewDidLoad method
I guess,
don't create like this
UIButton *nextButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
by this create method ,UIButton is create by use default type,so your background image is not work.
try this,
UIButton *nextButton = [[UIButton alloc] initWithFrame:CGRectMake(9, 154, 300, 48)];
or other,except buttonWithType
This is happening because the state of the Button doesn't stays selected once clicked by default.
I solved it by making an IBaction on that button click and toggling the selected state.
-(IBAction) checkButtonClicked:(id)sender{
checkButton.selected = !checkButton.selected;
}
In my case, it is drawn by custom animation code and not set by the image, so it doesn't work by setting any image, it has to change the animation code.
With images, you have to import them into the project not as references but as copies. So when you go to add files to project, choose "Create groups" instead of "Create folder references". Also make sure "Copy items if needed" is checked.
This is confusing because importing as references works when you are using images as textures (e.g. for Sprites). However, it doesn't work when you want to use images for buttons (e.g. for using image name in [UIImage imageNamed:#"house.png"]
I faced this same issue of the image not being shown on the UIButton.
I had to change this line -
myButton.setImage(<my_UIImage_object>, for: [.normal, .focused])
to this -
myButton.setImage(<my_UIImage_object>, for: .normal)
Anyone ever seen the problem of [UIColor initWithPatternImage] ignoring the alpha values of the PNG? If so, what's the best fix?
I am using a png as a background layer to my array of button objects and it contains several pre-set alpha values per pixel in the image that is to be used as a texture background. It loads fine as a pattern/texture-color, but it comes up with all key transparent area as opaque black.
It is important that I get the right alpha values so that the button images shows correctly. The button frames do not include the alpha shadows from the background as that is not the "clickable" portion of the button. Additionally, my button object's images and background images also makes use of transparency, so it really needs to have a clear background directly behind each button to let the proper true current color settings come through (lowest layer UIView will have its background color set to the current user's selected color). Setting just the single alpha value for the UIView layer containing this texture does not work for my needs either.
Any help would be appreciated. My current workaround would be to use fully-blown, repeatedly-programmed layout of several UIImageView using the png, instead of a single UIView with the pattern fill.
Here is a snippet of code, but it's pretty standard for turning a UIImage into a UIColor for use as a pattern/texture color:
UIView *selectorView = [[UIView alloc] initWithFrame:CGRectMake(0,0,320,320)];
UIColor *background = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:#"SelectorViewBackground.png"]];
selectorView.backgroundColor = background;
[mainView addSubview:selectorView]; // pattern background layer. Add UIButtons on top of this selectorView layer
[self addSubview:mainView]; // current user selected color set in mainView.
[selectorView release];
[background release];
I had the same problem with setting a background on a UIView with some transparancy,
this is how I solved it:
theView.backgroundColor = [UIColor clearColor];
theView.layer.backgroundColor = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:#"the_image_with_transparancy.png"]].CGColor;
This is probably related to:
Tiled Background Image: Can I do that easily with UIImageView?
Basically, try setting:
[view setOpaque:NO];
[[view layer] setOpaque:NO];
No I've never had an issue with this. I use code like the above all the time for apps (though often I use it in conjunction with a layer instead of a view but that shouldn't make a difference with transparency being recognized) and always have had transparency work fine.
I'd look into your PNG file. I've noticed iOS sometimes being finicky with certain PNG options/types (like an 8 bit PNG with 8 bit transparency). Make sure your PNG is saved as 24 bit with 8 bit transparency (32 bit total).
Also, stupid question, but have you verified there isn't anything black in the view/layer hierarchy behind your PNG? Sometimes it's the stupid things like that
For those who might need the work-around code where the background patterns can be laid out as rows in a UIScrollView, here it is (adjusted to remove confidentiality concerns, should work if variables properly set prior to call).
Note that there should be ways to reuse just the one allocated instance of UIImageView multiple times to either save memory or load times but time-to-market is my No. 1 driver right now. Enjoy the journey :)
UIImageView *selectorView;
for (int i = 0; i < numRows; ++i) {
selectorView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"SelectorViewBackground.png"]];
selectorView.frame = CGRectMake(0, i * patternHeight, patternWidth, patternHeight);
[mainView addSubview:selectorView];
[selectorView release];
}
I'm trying to emulate Apple's "Slide to Unlock" feature in my application. I get to this point (image below), but as you can see the UISlider's "track" is visible and is covering up my text. Is there a way to change an attribute programmatically that will make the "track" invisible?
Please let me know if you need any of my code.
Thanks in advance!
EDIT: If I change the slider's alpha to 0, it gets rid of my sliding button, so doing that won't work unless I'm doing it wrong. :)
here's an even easier way. No need to create images, just instantiate an empty UIImage class :P
UIImage *clearImage = [[UIImage alloc] init];
[self.slider setMinimumTrackImage:clearImage forState:UIControlStateNormal];
[self.slider setMaximumTrackImage:clearImage forState:UIControlStateNormal];
Actually I just figured it out. Here's what I did:
UIImage *sliderMinimum = [[UIImage imageNamed:#"clearTrack.png"] stretchableImageWithLeftCapWidth:4 topCapHeight:0];
[slider setMinimumTrackImage:sliderMinimum forState:UIControlStateNormal];
UIImage *sliderMaximum = [[UIImage imageNamed:#"clearTrack.png"] stretchableImageWithLeftCapWidth:4 topCapHeight:0];
[slider setMaximumTrackImage:sliderMaximum forState:UIControlStateNormal];
clearTrack.png is just a clear slider image I made.
Now I have this: yay!
There probably isn't a way to hide the track; the "slide to unlock" doesn't behave like a UISlider and is probably a custom control. You might be able to hack the slider control, maybe by setting opacity low (0 will make it hidden and it won't receive touches), but if you go that route you will probably have something break after an OS update. Apple doesn't bend over backwards for compatibility like Microsoft does.
The right way to do this is with a custom control. It may seem like more work than using a UISlider, but it's not if you compare it against all the time you have spent and/or will spend hacking a UISlider.
To do it: subclass UIControl. Write your own drawing code to make it look right (you can probably reuse some of whatever you are doing now). Then register for touch events to move the slider handle:
UIControlEventTouchDown: if it's on the handle, set a "moving" flag
UIControlEventTouchDragInside: if the moving flag is set, move the handle to the touch position; you can just update an instance variable, call setNeedsDisplay to draw it in the new position.
UIControlEventTouchUpInside: if moving flag is set, and handle is at end, unlock
If you want to mimic the real unlock handle, play around with it and see how it behaves. You might need to respond to the events differently (what happens if you drag outside the slider path). But you should be able to get the gist of it.
In Swift:
slider.setMinimumTrackImage(UIImage(), forState: .Normal)
slider.setMaximumTrackImage(UIImage(), forState: .Normal)
In answer to the stated question, you can set a transparent 1px png for the minimum and maximum track images.
Looks like just setting the tint color to clear does it...
[slider setMinimumTrackTintColor:[UIColor clearColor]];
[slider setMaximumTrackTintColor:[UIColor clearColor]];
Answer by #Arjay Waran is the best in my opinion.
Heres the Swift 3.0 Version of it.
slider.minimumTrackTintColor = UIColor.clear
slider.maximumTrackTintColor = UIColor.clear
Cheers
From Story Board:-
select clear color for Min Track and Max Track
If I create a PNG image in Photoshop and lower the opacity so it's 85% opaque, how can I maintain that same level of transparency when I add it to my iOS app?
I'm trying to set the background image of a UILabel to be this image, but the background image for the UILabel is fully opaque in my iOS app. Here's my code...
[lbl setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:#"labelBackground.png"]]];
Am I missing something or is this not possible?
Thanks so much for your wisdom!
If I were you, I'd put an UIImageView containing the image behind your UILabel. Then make sure your UILabel and UIImageView backgroundColors are both set to [UIColor clearColor]. That's how I do it anyway.
Have you tried lbl.opaque = NO;?
From my experience, iOS preserves opacity for PNG images.
I think I have an idea of what MAY be wrong (and pardon me for making any wrong assumptions)...
In photoshop, when saving a PNG image, there's an option to "Save Transparency" or something like that. Make sure that is checked before you save the PNG.
If this is not the problem, you can always use:
UIImageView.opacity = 85.0f/100.0f;
Let me know if this solves your problem :)
I ran into some background issues just like you, but I learned that most UIView subclasses have a backgroundView property which is accessed like this:
[aView backgroundView];
or
aView.backgroundView = someView;
UIImageViews keep the opacity of images. With these two things in mind you can just do:
UIImageView *imageView = [UIImageView initWithImage:[UIImage imageNamed:#"YourImage.png"]];
myLabel.backgroundColor = [UIColor clearColor];
myLabel.backgroundView = imageView;
I hope you find this useful.
I would like to create a UIButton which uses a stretchable image as Background image such as that I can easily resize the button for different labels etc.
So I created the following code which works fine:
UIImage *bgImage = [[UIImage imageNamed:#"Button-Template.png"]stretchableImageWithLeftCapWidth:2 topCapHeight:2];
UIButton *loginButton = [UIButton buttonWithType:UIButtonTypeCustom];
loginButton.frame = CGRectMake(180, 280, 112, 40);
[loginButton setBackgroundImage:bgImage forState:UIControlStateNormal];
// some more stuff
Now here is the catch: The iPhone SDK assumes that the strechable part of the image is exactly one pixel in width, which is not the case in my image as I want to create a pattern, which requires a repetition every two pixels (so 2 Pixels are one pattern unit). I have found no information in the docs whether it is possible to alter the value of the strechable part width (in my case 2 instead of 1), does anybody know how to do this or how I could achieve my goal with a workaround? Writing the stretching part on my own seems a little far fetched right now (though I might have to get back to this).
Thanks!
From iOS 5.0 on you could use resizableImageWithCapInsets:
Check UIImage Class Reference
But this method only works on iOS >= 5.0 devices, so that can be a
turn down for now.
There is no API for using 2 pixels as the stretch width. You'll have to implement this behaviour yourself in a custom view, or use an image with a specific width.