How do I use a non-stretchable, but repeating background image for UISlider track? - iphone

Is it possible to set a track image for the UISlider which does not strech, but repeats itself?
I have a background image with small position points (the attached image is exmaple... mine is horizontal). So if the UISlider is longer than the image itself, it starts to stretch it and the position points are not symmetrical any more. Would be really nice that if the slider or the thumb exceeds track image width, then it just repeats itself.
Something similar to css background-repeat: repeat-x;

You can use - (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets.
It only works on iOS 5 and later though.

Related

How to add effects to UILabel

I've been searching for that many time ago and I can't find a solution. I have a animated label that crosses the screen of the iPhone (like the title of a song does in the Music app.Well, I'd like to add the "fade in/out" effect like the music app has. The easy solution is open Photoshop and create this simple image and then add it up to the label. Well, under the label I have an image with black backgroud. The image can be zoomed in and then the image with the fade in/out effect can be seen, and it doesn't look well. Is there any possibility to do this programatically? Thanks
PD: if there's another possibility rather than doing this programatically, I'll apreciate the answer as well.
Edit: Here's the image capture of the problem
I'll approach it in a non-programming way.
The image reference you gave us for the Music app you seem to be emulating has a different gradient than the one you drew in the second image.
If you notice in the image, the gradient has not fully completed its transition from clear to black before the words are cut off. I would say in photoshop run the gradient from clear to 80% alpha black and then draw a 100% alpha black rectangle to finish it off as per image. The white is just showing you what it looks like without the black background.
Now as for the zooming. Correct me if I am wrong, but it sounds like you want a viewing window for the image so that once you have zoomed into it, it will fade to either side, but still be viewable/movable in the center. This means that the image has to be zoom-able, but once you have zoomed the "fade in/out" should not be zoom-able.
Just make sure you aren't scaling the fader by keeping it separate from the scrollView of your background image.

iphone - how to extend a button touch area?

I have 5 round buttons in a row, each one, 40x40 pixels. Between each one, I have 20 pixels.
40x40 pixels is too small to touch, but as I have 20 pixels of space between each button I can extend the button touch area to 60x60 pixels, making it easy to touch. I could simply using the dirty solution of creating a square 60x60 pixels transparent image, put this over the button and make this touchable, but I know it is possible to extend a button touch area by creating a custom class and changing a parameter.
I know this is possible because I saw this done before (but I cannot find the URL). I know it is something related to hitTest.
How can this be done?
Thanks.
Eiko is absolutely right. Here's some simple code you can use that is independent of the button's location that somebody gave me for expanding the Info button frame.
CGRect newInfoButtonRect = CGRectMake(infoButton.frame.origin.x - 25,
infoButton.frame.origin.y - 25,
infoButton.frame.size.width + 50,
infoButton.frame.size.height + 50);
[infoButton setFrame:newInfoButtonRect];
You might want to watch out if you're using a background image as opposed to an image ( button setBackgroundImage: vs button setImage: forState:) because a background image will stretch with the frame while a normal image will not.
You can always make its frame bigger, i.e. yourButton.frame = CGMRectMake(0,0,60,60);
I usually do this when adding one of the info buttons.

UIImageView and UIImage of equal size

I came across a weird scenario in my code the other day:
I have a UIImageView that loads an image with setImage:. The UIImageView is prior initialized with a frame having the exact size of the image (41*41 px). I also set the content mode to UIViewContentModeCenter, which should ensure my image is never scaled.
Now when I look at my image view I see that the image is a bit cropped horizontally and it appears a little blurred (this is a telltale sign that some rescaling is happening in the background). If instead I initialize my image view with 1 extra pixel in width, all works perfectly (however my image view is now one pixel wider than my image).
Also if I initialize my UIImageView with initWithImage: that seems to work fine too. I checked this view's frame after initialization and I found it to be of the same size: 41*41.
So bottom line is I have a few workarounds for this issue, but I'm trying to understand what's happening here. The only explanations I can think of are:
There is a bug in the framework
The rendering of images doesn't work well for images of a particular size. I know that for examples textures are always powers of 2, though I doubt this has much significance for UIImageView.
For the record I'm compiling for OS 3.0 and the issue happens on both simulator and device.
Is the UIImageView contained inside any other views? One thing I've had before is blurred controls caused by fractional pixel offsets. i.e. if you calculate a frame using division and end up with a non-integer float value then UIKit can add some strange blurring at certain offsets and sizes.
So the image view may have an integer size, but it's absolute frame when taking the parent(s) into consideration may not be.

UIImageView renders image differently to original

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.

iPhone - UIButton background image is cut off sometimes

I am using a custom image as the background image for my buttons. I have noticed that the edges of the buttons are cut off sometimes. My buttons vary in size but the behavior doesn't seem to be dependent on the button size. I am creating the buttons programatically. The image I am using is pretty large to cover the entire background.
Can someone please let me know what could be the issue?
More info
Setting the content mode to UIViewContentModeScaleToFill still cuts of the images. Also tried resizing the image but doesn't make a difference.
Thanks.
Did you try setting the button's dimensions to fit exactly the image?
Is the image just cropped or also blurry (cause it's being resized)? Have you toyed around with UIView's contentMode property for the button?
If you did, did you try increasing/decreasing the width or height by a pixel? I sometimes had blurry buttons even though its dimensions were exactly the image's. Adding or removing an extra pixel sometimes helped.
I finally resolved this by creating a 3x3 px image with the background color as the button's color and a 1 px border surrounding the image. Then used the UIImage method stretchableImageWithLeftCapWidth:topCapHeight: to create an image with the desired border size of 1 px.