I want to implement a blue background around a couple of words to group them together -- looks just like the email address in the default iPhone email client. (see attachment).
Does anybody know how to do that?!
You can try the JSTokenField it looks very cool.
Take a screen shot of the background image and make a image.png you needed, and use the following method
UIImage *backgroundImage = [[UIImage imageNamed:#"image.png"] stretchableImageWithLeftCapWidth:7.0 topCapHeight:0.0];
7.0 and 0.0 is depending on your image.png size.
Apple's sample code UICatalog.app is for your reference. search "stretchableImageWithLeftCapWidth" in that project. It's an example for a button background image. good luck!
Related
I have this app with one whole set of images, but I would like to add for example personalized set of graphics. Is there an easy way to organize and develop source code and not to get lost while switching between these sets of images?
One way I see it is to have on my hard drive two folders with graphics and before releasing replace in project current images with personalized set... is there a better way?
I'm using Xcode 4.2 and iOS 5.0 for this app.
Probably the easiest and most reliable in terms of maintainance is to write your own image access function or marco, that is controlled in one place globally. Then use this in all cases where you want to have the flexibility for differnt images for example like this. I just got used to this way of assigning an image with stretchableImageWithLeftCapWidth because it adjusts the size nicely.
Of course you may use any other way to assign your images, like directly without use of stretchableImageWithLeftCapWidth
Anyway, this is my suggestion:
NSString *s = [NSString stringWithFormat:#"%s%i",#"imageName",CONST_VERSION];
UIImage *theImage = [UIImage imageNamed:s];
myImageView.image = [theImage stretchableImageWithLeftCapWidth:12 topCapHeight:0];
and you can do
#define CONST_VERSION 1 // or 2
Then name your images like:
myImage1.png
and
myImage2.png
I am working on an iphone app and targeting iOS 4.0 or later. I am trying to add an image to UIImageView, and image is in jpeg format. This is what I have done so far..
UIImageView *bgImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, 320.0, 246.0)];
bgImageView.image = [UIImage imageNamed:#"background"];
[self.view addSubview:bgImageView];
[bgImageView release];
I have added two images,
background.jpg (as normal 1x image)
background#2x.jpg (for 2x / retina
display).
But when I build and run, everything runs fine, except there is no background. All my other widgets are there, but there is a white background and image is not showing.
Next I created two png images for my background, added it to the project and ran. This time my background was shown. I was perplexed because according to documentation jpg image can be used in iphone with UIImage.
I tried again with my jpg images and changed the code above to this
UIImageView *bgImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, 320.0, 246.0)];
bgImageView.image = [UIImage imageNamed:#"background.jpg"]; //added extension
[self.view addSubview:bgImageView];
[bgImageView release];
When I run the above code, background image is showing, but 2x images are not loaded. That shows my jpg image is fine, and it is not the culprit. So when I just give image name without extension, png files (both 1x and 2x)are loaded on respective devices, jpg files are not loaded at all.
Looks like a bug (either in sdk or documentation). iOS 4 is here for a good year. why no one noticed it? Also is there any option for me other than to convert all my images to png?
EDIT :
Well, two days in to the question, zero answers. I have already converted all my images to png, and that part of my project is done (as my project couldn't wait..). Still, for my own sake and for sake of everyone who faces this in future, I would like to know more about this problem. At least someone can confirm that this is indeed an apple bug. I am starting a bounty so that more people can see this thread.
EDIT AGAIN
2 days remaining for this bounty to end. Thanks for everyone who responded. But let me clarify one thing. I have already said that I have converted all my images to png and I moved along. I just wanted some confirmation that imageNamed treats jpg and png files same way. Documentation certainly says it will(unless Apple has written it somewhere other than UIImage documentation). If documentation is correct then my code failed me because of two possible reasons
It is a bug in imageNamed. If this is the reason, then I dont have too much option other than file a bug report, change my images to png or write a wrapper(like Chandan has said in his answer) and move on..
There is some problem with the jpeg image I used. Well I am not a photoshop guy. But I used
RGBA jpg image. If image does matter I am ready to ask my designer
friend and provide more info.
One more thing. This post also just tells about this problem. But he dont know the reason behind. So I am not alone.
EDIT : THE END
Well it is something related to the image itself. I googled and downloaded some sample jpeg images and played with it. Some of them shown up correctly and some doesn't. Since the boundy time is up, I am giving the boundy to PengOne who tried to reproduce the bug and successfully loaded jpg image without extension, there by making me to work with more images. Thanks for everyone who tried to help.
According to the UIImage Class Reference:
Discussion
This method looks in the system caches for an image object with the
specified name and returns that object if it exists. If a matching
image object is not already in the cache, this method loads the image
data from the specified file, caches it, and then returns the
resulting object.
On a device running iOS 4 or later, the behavior is identical if the
device’s screen has a scale of 1.0. If the screen has a scale of 2.0,
this method first searches for an image file with the same filename
with an #2x suffix appended to it. For example, if the file’s name is
button, it first searches for button#2x. If it finds a 2x, it loads
that image and sets the scale property of the returned UIImage object
to 2.0. Otherwise, it loads the unmodified filename and sets the scale
property to 1.0. See iOS Application Programming Guide for more
information on supporting images with different scale factors. Special
Considerations
On iOS 4 and later, the name of the file is not required to specify
the filename extension. Prior to iOS 4, you must specify the filename
extension.
Since you're targeting iOS 4.0 and later, you should not need the filename extension. I tried to reproduce this potential bug, but it worked as expected for me without the filename extensions.
Here are some ideas for what may have gone wrong to create this effect in your app:
It's possible that the problem comes from the cache if you changed your images at some point.
If you choose not to use the filename extensions, and you have both "background.jpg" and "background.png" as options, the preference appears to be to use the ".png" file.
If you set the target to iOS 4.0 and later after first running the app, then the filename extension would have been required and the image may have been cached blank, which leads back to theory 1.
That's the best I can make of this.
Write a wrapper to get the image like
-(UIImage*) getImage:(NSString*)imageName{
UIImage *image;
if ([[UIScreen mainScreen] respondsToSelector:#selector(scale)] == YES && [[UIScreen mainScreen] scale] == 2.00) {
// RETINA DISPLAY
NSString *jpegFile = [imageName stringByAppendingString:#"#2x.jpg"];
image = [UIImage imageNamed:jpegFile];
}
else{
NSString *jpegFile = [imageName stringByAppendingString:#".jpg"];
image = [UIImage imageNamed:jpegFile];
}
return image;
}
And from your code call
bgImageView.image = getImage(#"background");
With the dawn of Xcode 6 I have found that JPG images might not render at all on certain iOS7 devices (they may work on some but not on others, or they may not work on any, and you may see a different result on a different developers machine, there doesn't seem to be any consistency). This is regardless of whether the image is just referenced in UIImageView in a XIB or programmatically with [UIImage imageNamed:] (which returns nil).
After scratching my head for a long time, the solution was to rename the *.jpg file extension to *.png (whilst obviously leaving the file contents as JPG data).
HTH
You just need to provide the full name of image.
bgImageView.image = [UIImage imageNamed:#"background.jpg"];
don't leave off the extension.
As for the #2x, it is not necessary to call it out anywhere in the code. If you code correctly there is no need to test for a retina display as some here have suggested.
You can use jpgs, just tried it myself and it worked. Only suggestion is how you are instantiating it.
Try it this way:
stockImage = [[UIImageView alloc]initWithImage:[UIImage imageNamed:#"Morbo.jpg"]];
stockImage.frame = CGRectMake(0,0, self.view.bounds.size.width, self.view.bounds.size.height) ;
[self.view addSubview:stockImage];
This is the image I used:
http://futurama.wikia.com/wiki/File:Morbo.jpg
I've run into the issue of using a UIBarButtonItem with a custom color. Everything out on the 'net seems to indicate that the only way around this lack of official API support revolves around the use of images. This is all fine and dandy when developing for pre-iOS 4 devices, except when using the new iPhone 4. Creating an image for iPad and pre-iOS 4 devices is straightforward enough, but the images developed for those devices look absolutely horrid on iPhone 4. I suspect that this problem will be exacerbated further with the introduction of next generation devices.
Consider the example below. Notice how the default colored button is nice and smooth, but the iPhone 3GS image looks terrible. It does not seem very scalable (pun intended) to have to include multiple images for different resolution devices.
In the absence of an official API for changing the color of a UIBarButtonItem, what strategies are out there for creating images that scale well against differing resolution devices? This problem is hardly unique to UIBarButtonItems, how is the community adapting to other UI elements that are bitmapped? Is there a better solution for this particular case than using an image (such as using Quartz to draw it)?
If at all possible, please offer concrete code examples.
You can list any image as Image#2x.png along with Image.png and the system will select the appropriate image at runtime.
If you look at the source for Three20 you can see how they draw custom buttons and shapes that will scale well, regardless of resolution.
Give Opacity (for Mac) a try. Draw your button in it with vector elements and effects, and it'll spit out the necessary Quartz code to reproduce it, drawing natively in your iOS application. You get Retina (#2x) support automatically.
Been over a year since I posted this question, but ran into a use case where I wanted to be able to do this, so instead of having to draw or otherwise create the buttons, I decided to write an open source application to create them. This application uses private APIs to change the colors of the UIBarButtonItem objects and then uses a graphics context to save them to a determined location on your computer's file system. This way you can have pixel perfect UIBarButtonItem images to use in your UIToolbars.
The app creates both the standard and #2x resolution images.
UIBarButtonItem-Generator # GitHub
Any vector drawing app may work, but I would also consider povray, which allows you to create in a C-like scripting 3D language, then export any pixel size you choose.
http://povray.org
I have the same problem with navigation bar so solve as the following:
first i subclass my navigation bar
inside this class
- (void)drawRect:(CGRect)rect
{
UIImage *image=[UIImage imageNamed:#"MyImage.png"];
self.frame=CGRectMake(0, 0, image.size.width, image.size.height);
self.backgroundImage =image;
}
finally save the same image with different resolution With #2x at the end
Good day all;
I am not sure what has changed to prevent this from working. On iOS 3 SDK, the following code worked fine in a CATiledLayer class:
- (void)drawInContext:(CGContextRef)context {
UIImage* image = [[ResourcesManager sharedResourcesManager] getUIImageFromArray:Image_Cell_Background Index:[mazeCell zone]];
UIColor* color = [[UIColor alloc] initWithPatternImage:image];
[self setBackgroundColor:[color CGColor]];
[color release];
However, compiling for iOS 4 and executing on simulator fails to render the image. I am baffled especially since images added as sublayers render just fine. Only the background doesn't render.
OK after spending a few days on this I have come up with a work-around.
Firstly, I tried doing this in a UIView and still had the same issues. I then tried other types of GUI components that have a backgroundColor property.
They all produced the same issue. From what I can tell, this appears to be a bug and something to do with the new image loading / caching process implemented that interprets whether or not to use HD or SD graphics.
Basically, the workaround it to load the background image as subview or sublayer (depending on your implementation) and either send it to the back (bottom of the hierarchy) or load it first before any other subview/sublayer.
Perhaps backgournd images in IOS 3 wherey doing this within the view/layer and that perhaps Apple decided not double handle the background image versus subview/sublayer and removed support for it.
However, at least you can set the background to a color or even a transparent color. I have verified this.
At any rate, use this workaround until either apple explains why they made this decision or fix the SDK so that it does handle it. I am keen to learn what the apple developer forums have said about this issue (I am certain it has been raised). I am not part of the program just yet as I am still in the alpha stage, once I get to beta, I will register.
I am trying to draw an image that has some transparent regions.
I load the image using
image = [UIImage imageNamed:#"testimage.png"];
and draw it using
[image drawAtPoint:CGPointMake(0,0)];
The UIView on which I draw the image is not opaque (and it has a transparent background color).
The problem is that everything works fine on the simulator, but when I run the app on my iPhone the transparent color becomes black! Can anyone pinpoint my error?
I had the same problem today with a picture of mine. I've created the picture my self in GraphicConverter.
My solution was to add an alpha channel to the picture. I did this with GraphicConverter using the command found in Picture => Alpha Channel => Create Alpha Channel with transparency . It could be that the command has a different name for you as I use the app with a german language setting.
Hope this helps.
The correct answer to this problem is the .PNG format you are saving your image with. If you save as PNG-8, you will run into this problem more often that not, since it only supports 1 transparent color. If you open your .PNG file and then re-save it as a 24-bit format, you will gain genuine transparency.
Reference this thread for discussion and clarification.
EDIT: Just to be clear, .PNG does not have an 'alpha channel', so Chris' answer is misleading. Just be sure to save in 24-bit format with transparency enabled.
I solved my problem by loading it into colorsync and then saving it.