I have got this situation:
this is the photo: http://imageshack.us/photo/my-images/826/iconepe.png/
the two images are little 20 pixel x pixel, If I click on them, nothing happens, if I click oh the left on them, the link works. I should make images bigger?
My guess is that you are missing the buttons with your finger.
The comfortable minimum size of tappable UI elements is 44 x 44
points.
According to the iOS Human Interface Guidelines
If you need to keep the images this small, one workaround would be to increase the size (frame) of the button and keep the image (the image must be set as a button image, not background image). This way you'd have a bigger zone that will accept input and still use the same image.
Ask your designer to make the image bigger, by using a transparent space around it.. 20x20 is too small to touch.. Apple says that the avg finger tap is 44x44 (from WWDC). All table rows are recommended to be at least that height. Use a transparent padding to make your image atleast 44 * 44.
Related
I want to make a slider that is a line that is thin at the left (minimum)end and thick at the right (maximum) end and the button which slides between to change sizes between. I have tried setting minimum and maximum track images but this didn't seem to work. I have been able to set the images in IB but they stay the same size. Penultimate has something like I want when you pick the pen size. Any suggestions.
Without the 1136 launch image, apps now run in letterbox mode with black bars on either end.
If you add the Default-568h#2x.png launch image, then the app runs with 1136 pixels (in my case, in landscape mode - 1136x640).
The extra 176 pixels are all getting added to the right side of the screen in landscape mode.
Is there a way that I could have the 176 added pixels distributed 88 to the left and 88 to the right of the screen that I work with in Interface Builder?
To Explain:
If I position an 1136x640 image (to make it work it is actually a 568x320 image with an #2x version in the project) at 0,0 in Interface Builder and run it on an iPhone 5/simulator, the screen shows the entire image even though it's not entirely visible in Interface Builder since it goes off the right side of the screen.
I was hoping to place the 1136x640 image at -88,0 since it is just a background image for my app. If this was possible, I could keep all the menu buttons in their current locations and would just be able to extend my app's background to either end instead of having that area be filled with black bars in letterbox mode.
If that is somehow possible I would love to hear about it... otherwise I better get to repositioning all my buttons and other screen elements! I've recently read about AutoLayout and that is certainly something to strongly consider in any new apps going forward, but I was just hoping for a quick update to my existing apps that would letterbox the apps with additional background art provided by me instead of black bars on either end.
EDIT: Just tried to move buttons around on the screen and it appears that buttons placed on the right-most 176 pixels can't even be clicked on! So I cannot use that extra space on the right even if I reposition everything... =/
AND THEN: I tried AutoLayout, and it too ignored the 176 pixels on the right. If I positioned a button with a constraint of 20 pixels from the right side of the screen, it would show 196 pixels from the right because it's not taking into account the additional screen size that has been added.
Anybody know what is the best way to actually have art fill the entire screen of the new iPhone 5?
Thanks!
I had the same problem of not being able to access the new 176 pixels for the new iPhone. However, this is what I did and now I have access to them.
Open MainWindow.xib with Interface Builder
Select the Window
In Attributes, check Visible at Launch and Full Screen at Launch.
If you hadn't set autoresizing on any of your elements and then enable support for the 4-inch display, indeed you might not have the greatest looking views.
You can use autoresizing to set your views/elements to stretch, center and align, so you should be able to manipulate the resizing mask to do what you'd like.
Autolayout is very fiddly and in most cases overkill if you just want to support the new screen size.
Ended up creating one .xib for for the iPhone 5 size and one .xib for the iPhone 4 size. Both are connected to the same .h/.m file.
I've not much response so am adding some more info.
My buttons are not rectangular, nor organised in a grid so I need a way of creating what looks like a button (and shows that it has been pressed visually, as per a standard UIButton) but where the touchable area is different to the image area.
I am using a transparent PNG and that element works fine. I've added the buttons in Interface Builder and am wondering if that is the problem.
However, if I change imageEdgeInsets, it distorts the image display, which is obviously not what I want.
Bizarrely, if I increase the dimemsions of the button, it doesn't change the image, but if I decrease them it does.
I have tried different combinations of mode (scale to fill etc), but to no avail.
I am aware that there is an image and background image property, but in IB there is only one.
Essentially, I don't understand how the geometry works and the Apple documentation doesn't seem to help.
Surely, I can't be the only person to try to do this. Any help would be warmly welcomed.
Many thanks,
Chris.
Try setting the buttons setting to Aspect Fit. This will fill the button with your image so a smaller image than the button size would leave the space around the image.
Also set the button type to custom.
In the end, I stumbled across Ole Begemann's Non-rectangular buttons class. It just does what I need - to be able to create buttons where the touchable area follows the visible element of a non rectangular image.
#Helium3 - thanks - that allowed me to use a larger touch area, bit not a smaller one.
I have never seen this issue before, its very strange. Just wondering if anyone else has come across this too.
I have added a sprite to my game, its supposed to be the top left corner of a box to put text on to. I want to make it scalable without loosing anything so i have it broken up into sections. In the image above the one on top is the image itself, and then the one on the bottom is the image when its being drawn in the iPhone simulator.
Any idea why the last column of pixels on the right are altered? I have not scaled the image at all.
I don't know about Cocos2D, but in general terms what you've done here is to draw the image at a position that isn't an exact multiple of one pixel.
Consequently even without scaling you have resampled the image across a grid that doesn't coincide with the original image data, causing all pixels to be a bit off. It's just the right-hand edge is the most obvious case, since the resampling leaves you with a partial transparency here. But look at eg the two rows of purple pixels in the border: they're not the same, because your vertical alignment is off as well, causing a small amount of colour from the grey border below it to bleed into the lower row of purple.
Ok I actually figured it out this time. Cocos2D adds a bit of antialiasing to CCTextures. To stop it from doing this you need to call this:
[[mySprite texture] setAliasTexParameters];
to turn it back on you call this:
[[mySprite texture] setAntiAliasTexParameters];
The image on the right is the one that I produced in photoshop. I then stripped all text and put it in an image view, as soon as I did that there was a change in colour and the vertical line lost it sharpness. Has anyone else run into a similar problem? What do I do?
alt text http://grab.by/1DuZ
Are the dimensions correct? Is the position of the image an integer? If these cases antialiasing will slightly blur your image.
One thing to be careful of is that if your image is an odd number of pixels in either dimension then centering it onscreen will cause it to be misaligned. Imagine if you had a 1x1 image (just one pixel) and tried to center it perfectly onscreen. It can't be done because the screen is an even number of pixels wide and high. This is why it's best to always use even dimensioned images whenever possible.