I set different images for my UIButtons, like so:
[testButton setFrame:CGRectMake(0.0f, 416.0f, 64.0f, 64.0f)];
[testButton setImage:[UIImage imageNamed:#"test.png"] forState:UIControlStateNormal];
(The various images have different dimensions to which I re-size the UIButtons)
This works as expected in iPhone 6.0 simulator, but the images are not displayed on the buttons in an actual iOS 6.0 iPhone; the buttons are invisibly there with correct dimensions locations.
I want the same button behavior on the iPhone device; how to proceed?
Ha ha! SIGH Of course, the filenames were mis-named. Took 2 days to figure that out :(
Related
I am developing an universal app where I have given a background image for a UIView using the following code.
UIImageView *imgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"backImage.png"];
[self.view addSubview:imgView];
[self.view sendSubviewToBack:imgView];
I have created the following images and added to the project,
backImage.png
backImage#2x.png
backImage-Portrait~ipad.png
backImage-Portrait#2x~ipad.png
backImage-Landscape~ipad.png
backImage-Landscape#2x~ipad.png
But it does not seem to take the correct images.
It works fine when I run the app on iphone (I mean it takes the backImage.png and backImage#2x.png accordingly) but when I run the app on ipad it does not use the ipad images, it still uses the iphone images.
Can anyone please tell what must be going wrong.
Thanks in advance.
You need to detect in your code what type of device is being used, and depending on that, choose the appropriate image.
See here: iOS detect if user is on an iPad
I may be wrong, but I don’t think UIImage will know whether to load the ‘portrait' or ‘landscape' version of an image, much less change them dynamically when you rotate your interface. I think you’re expecting a lot more magic then there is.
Those conventions work in the app launch snapshot, but I think that’s the extent of it?
I received couple of screenshots from a user indicating that the CCMenuItemFont and CCLabelTTF do not appear on a Macbook retina device. All the images in the application are correctly shown while the text doesn't appear correctly.
A code sample of one of the labels:
CCLabelTTF *label=[CCLabelTTF labelWithString:answer fontName:#"Helvetica" fontSize:30];
[label setColor:ccc3(255, 255, 255)];
[label setPosition:ANSWER_POSITION];
[self addChild:label];
I am using two languages in the application. The english words appear as a small wave while the others don't appear at all. A screenshot to show an english word:
Unfortunately, I don't have access to a Retina device, and the following method is not working for me to debug the problem: How to simulate a retina display (HiDPI mode) in Mac OS X 10.8 Mountain Lion on a non-retina display?
Any ideas how to solve this problem?
Thanks in advance
The problem was in the version of cocos2d that I was using (2.0V). Either use 2.1 or apply the solution mentioned in this link:
Solution
The solution that worked correctly for both languages was adding the following line in CCTexture2D:
[[NSAffineTransform transform] set];
I am a bit confused on managing the different sized images with retina and non-retina displays.
I add a custom button in Storyboard and add some text and then add the backgroundimage, which is a vector done in Illustrator (Width: 630 / Height:130):
UIImage *img = [UIImage imageNamed:#"iPad1_orange_button.png"];
[myButton setBackgroundImage:img forState:UIControlStateNormal];
the button shows up:
...the button comes out very small.
I have another image with the #2x for retina but that comes out the same size.
My question is how to manage the sizes of the buttons in regards to image size. DO i need to set the size of the button manually?
Also, when i create a button in Illustrator with the same pixel size as the button i use in XCODE and export it as .png, add it to XCODE and drag it into Storyboard it comes out very large.
Just a quick clarification:
The storyboard dimensions are NOT in pixels.
An iPhone 4S has 640x960(x,y) # 326ppi. xCode dimensions are 320by460(x,y). Just take the numbers and convert em to get the appropriate pixel sizes.
IE: If you want a button that that is 100 wide and 100 tall in storyboard you'd to create an image 100*(640/320) px wide and 100*(960/460) px tall (I believe my math is right...).
Depending on what you're building for you'd need different images to cater to the different devices.
On another note, the term retina display doesn't designate a clear-cut standard of px by px. If I recall correctly it's a term Apple coined that basically means that a screen has enough px that the human eye (hence retina) would not be able to see the jaggies.
Similar to Intel's coining of the term Ultrabook; no REAL spec floor/ceiling just a marketing ploy.
Think of dimensions and what you would consider a pixel to be a "density independent pixel". You are always working in the original size when it comes to position and size but it is up to the operating system to handle the different resolutions for you. For now we have the original size and Retina which is X2 the density but this could change. You never need to manually change the resolution for the given device.
This is simple:
make the button frame the size of the normal res image
when you load the image with UIImage imageNamed: do it like this
UIImage *img = [UIImage imageNamed:#"iPad1_orange_button"];
*Note I removed the file extension (.png) - this instructs UIImage to select the resolution appropriate version, the regular or the #2x. iOS will show the 2x version of the image in the same frame size as the normal res image. Pretty simple.
I've been trying to animate an image view to slide upwards on the screen. The views height is also increased whilst the position is moved upwards.
On my iPhone 4S (5.x) the image view behaves as expected, the view only moves upwards as its height is increased, however on my iPhone 3G (4.1), the view moves down a little bit during this animation.
Such a level of accuracy is needed as the image view is used to create a non expensive shadow effect. Its alignment is important for the effect. The image is a resizable graphic.
This is how I change the position and size of the view
CGRect oldShadow = self.shaddowView.frame;
oldShadow.size.height = oldShadow.size.height+200;
oldShadow.origin.y = oldShadow.origin.y - 200;
self.shaddowView.frame =oldShadow;
This is how the image for the view is set up as resizable:
UIImage* shadow = [[UIImage imageNamed:#"shadow.png"] stretchableImageWithLeftCapWidth:20 topCapHeight:20];
self.shaddowView.image = shadow;
Thanks.
I used the following animation, with a border around not only the starting position but also the intended final position, so that I could confirm whether any undesired shifting of the view (other than the obvious upward expansion) took place, but it worked fine on iOS 4.2.1:
[UIView animateWithDuration:2.0
animations:^{
CGRect newImageFrame = imageView.frame;
newImageFrame.origin.y -= stretchBy;
newImageFrame.size.height += stretchBy;
imageView.frame = newImageFrame;
}];
I don't have iOS 4.1 device sitting around (my old 3G test phone is running iOS 4.2.1, the latest supported iOS version for that device), so I can't speak to that, but it's fine with iOS 4.2.1.
I have to confess, though, that I find it very unlikely that when you animate the changing of a frame, that the final frame would not be precisely what you specified it to be. If you NSLog the frame when you're done, it is not the correct value? Or are you saying that it momentarily moves during the animation but then ends up in the correct location? Or that it shifts down during animation and ends up in the wrong position even when the animation is done?
I wonder if there's something else going on (e.g. is your animated view a subview of a scroll view, which itself might be shifting? or is there some code not shown here that is accidentally further adjusting the frame after the animation? etc.). Seems like a little debugging should confirm whether the frame is actually not what you intended, or whether there is some other issue going on.
I originally answered suggesting shouldRasterize option, but if you're trying to support old iPhone 3G devices, then maybe that's not good enough. Definitely stutters a little on these old phones. Anyway, this was my original answer:
I assume you're doing this because the layer shadow feature is a little CPU intensive. But I've heard (but can't speak to it) that if you use the shouldRasterize option, it's a little better:
viewThatNeedsShadow.layer.shadowColor = [UIColor blackColor].CGColor;
viewThatNeedsShadow.layer.shadowOffset = CGSizeMake(3.0, 3.0);
viewThatNeedsShadow.layer.shadowOpacity = 0.5;
viewThatNeedsShadow.layer.shouldRasterize = YES;
viewThatNeedsShadow.clipsToBounds = NO;
I'm writing my first iOS app targeting the iOS 5.0+ platform. I'm using the UIAppearance protocol to customize the applications UI.
I'm trying to change the backgrounds for UIBarButtonItem across the entire application. Due to the fact that my UIBarButtonItem's may change size depending on the text or icon used I'm trying to utilize UIImage resizableImageWithCapInsets: with my background png.
I originally found the code I needed on Ray Wenderlich. Using the same exact code, with an image that's pretty close to the one used in the aforementioned tutorial, I'm getting weird results. Maybe it's just my inexperience with Cocoa Touch.
Here is the code I'm using.
DreamsAppDelegate.m - customizeAppearance:
UIImage *btnBg = [[UIImage imageNamed:#"navBarButton-bg"]
resizableImageWithCapInsets:UIEdgeInsetsMake(0, 6, 0, 6)];
[[UIBarButtonItem appearance] setBackgroundImage:btnBg
forState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];
Here is the png background image I'm trying to use
And here is the result (in the simulator)
The section of your image between the left and right, and between the top and bottom, is tiled to fill the space needed by the image. Try UIEdgeInsetsMake(15, 6, 15, 6).
To generalize, if your image has a continuous gradient, the repeated section should only be 1 pixel high. Since your button image is 31 pixels high, the top and bottom (the first and third arguments to UIEdgeInsetsMake) should add to 30. They don't have to be equal; UIEdgeInsetsMake(8, 6, 22, 6) will move the repeated section up, resulting in a paler background.
Also, is the file you've attached the plain or the retina ('#2x') version of the image? The insets have to be within the size of the plain version.
I have the exact same problem.
Another thing you can do is to set the resizingMode of UIImageResizingModeStretch. It solved my problem.
Hopwever, it's not available in IOS5. So my solution would be to do as everyone else said. Realize that the tileable side should be just one pixel. Most buttons do not change much in the middle anyway.
So, use this code:
-(UIImage *) resizableImageWithCapInsets2: (UIEdgeInsets) inset
{
if ([self respondsToSelector:#selector(resizableImageWithCapInsets:resizingMode:)])
{
return [self resizableImageWithCapInsets:inset resizingMode:UIImageResizingModeStretch];
}
else
{
float left = (self.size.width-2)/2;//The middle points rarely vary anyway
float top = (self.size.height-2)/2;
return [self stretchableImageWithLeftCapWidth:left topCapHeight:top];
}
}