I understand how you can have a minimum track and maximum track image, and how it can be stretchable. However, for my needs, that might not be enough control.
I have a situation where on the left hand side (minimum track) I need to display two different colors, based on data. The left hand side actually represents two pieces of data, but yet there still exists only a single thumb between minimum and maximum.
so how can i do this???
Any sample code??
i actually want like this
photo link
On left hand side it is of grinish color but when it exceeds the thumb image it becomes red..
In your .h file
IBOutlet UISlider *slide;
in your .m file
UIImage *minImage = [UIImage imageNamed:#"unselected.png"];
UIImage *maxImage = [UIImage imageNamed:#"selected.png"];
UIImage *tumbImage= [UIImage imageNamed:#"thumb.png"];
minImage=[minImage stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0];
maxImage=[maxImage stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0];
[slide setMinimumTrackImage:minImage forState:UIControlStateNormal];
unselected.png and selected.png are the images that act as bar and thumb.png which slide over the bar.
Put your image swapping code in your slider value-reading method, which is usually:
-(IBAction)sliderChanged:(id)sender; {}
Swap your custom green image with a custom red image whenever your slider value reaches some predefined value. See example below.
// Switches the -thumbImage between an ivar named highImage and lowImage
// when the slider passes the halfway point
if (sliderValue > 0.5) {
[self updateSliderThumbWithImage:self.highImage];
} else {
[self updateSliderThumbWithImage:self.lowImage];
}
define the slider image update method like this:
-(void)updateSliderThumbWithImage:(UIImage *)image;
{
[self.slider setThumbImage:image forState:UIControlStateNormal];
[self.slider setThumbImage:image forState:UIControlStateHighlighted];
}
// You have to set thumb images for both states
// or your image will vanish when user slides it.
// Not sure if you have to do the same with the track image, though.
Hope this helps somebody.
I'm not sure if I can visualize what you need (any chance you can post a sketch?), but do a search for UISlider and you can find some pretty creative uses. Otherwise you can create your own custom UIControl.
(source: texlege.com)
Related
I have two UISliders in the same view.My requirement is,when user change the value of 1st slider,the 2nd slider value should be change according to it.So,in 2nd slider I want to invisible its thumb.Although I have clear the color of its thumb,It is visible to the user.How can I solve it ?
Easy One :
[_slider setThumbImage:[UIImage new] forState:UIControlStateNormal];
Simply set the image for the thumb to be nil
UIImage *empty = [UIImage new];
[theSlider setMinimumTrackImage:[UIImage alloc] forState:UIControlStateNormal];
[theSlider setMaximumTrackImage:[UIImage alloc] forState:UIControlStateNormal];
Simply go to xib select slider --> Utilities --> show attributes Inspectors --> Thumb Tint Colour (Clear Thumb tint colour)
I would like to truncate one end of a UIImageView by changing the size of the frame dynamically. Of course, if it autoresizes it won't look 'truncated', but will look shrunk. The former is the effect I would like, the latter not.
So far I've set up the UIImageView in IB and then hooked it up programmatically using IBOutlet. I then placed this in ViewDidLoad, but still get the autoresizing:
[self.stringImageView setAutoresizingMask:UIViewAutoresizingNone];
self.stringImageView.frame = CGRectMake(9.0f, 508.0f, 500.0f, 26.0f);
Any ideas how I can clip my UIImageView instead of having it resize?
EDIT 1
It should also be noted that in IB I have deselected Clip Subviews and Autoresize Subviews.
Use : stringImageView.contentMode = UIViewContentModeCenter; so the image you add to the UIImageView always keeps the same size and the same position in your view.
You need to clip the UIImage object first according to imageview's frame and then set it as image for image view. See also Cropping an UIImage
#implementation UIImage (Resize)
// Returns a copy of this image that is cropped to the given bounds.
// The bounds will be adjusted using CGRectIntegral.
// This method ignores the image's imageOrientation setting.
- (UIImage *)croppedImage:(CGRect)bounds {
CGImageRef imageRef = CGImageCreateWithImageInRect([self CGImage], bounds);
UIImage *croppedImage = [UIImage imageWithCGImage:imageRef];
CGImageRelease(imageRef);
return croppedImage;
}
In Interface Builder set Mode in the View Tab to "Top" or whatever it should be.
Another more efficient way to go if you only wish to make part of the image visible,
or for example animate its appearance,
is to set the content mode of the UIImageView to UIViewContentModeCenter (or any other alignment) and include it in a UIScrollView.
You will only need to change the frame of the scroll view and your image will be visually cropped without you having to create the cropped image (which would be a very high price if it is for animation purpose).
Its a very basic question - but i could not find the answer to it anywhere.
I would like a back button like the default one that shows up in a navigation bar, but with a image in the background.
Even with customization, how to calculate the size/length of the button as per the title?
Thanks a ton for the help,in advance!
UPDATE:
Thanks guys! but the answer that i finally implemented was this:
#implementation UINavigationBar (UINavigationBarCategory)
-(void)drawRect:(CGRect)rect
{
UIColor *color = [UIColor colorWithRed:(13.0/255.0) green:(183.0/255.0) blue:(255.0/255.0) alpha:1.0];
// use a custom color for the back button which i got using the digital color meter on my nav bar image :P
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColor(context, CGColorGetComponents( [color CGColor]));
CGContextFillRect(context, rect);
self.tintColor = color;
// use a custom background image for my navigation bar
UIImage *img = [UIImage imageNamed: Navigation_img];
[img drawInRect:CGRectMake(0,0,img.size.width,img.size.height)];
}//worked satisfactorily for me
#end
Create a UIButton using your own UIImage to mimic the shape you want.
The UIImage must be a stretchable type, that is, you would set the leftCapWidth to be the size of your back arrow
Set the UIButton's title to whatever you like
Create a new UIBarButtonItem using your new button as a custom view
Set this to your navigationItems leftBarButtonItem property.
The button will automatically size to fit your title.
Use sizeWithFont: NSString method to calculate the size of the title.
See NSString UIKit Additions Reference
To find out the width of specific text, you may use following methods.
NSString *str=#"Back";
CGSize sizeOfBack = [str sizeWithFont:[UIFont systemFontOfSize:14] constrainedToSize:CGSizeMake(30, CGFLOAT_MAX) lineBreakMode:UILineBreakModeWordWrap];
Let me explain above two statements.
the text that you want to have in your string.
sizewithfont method will allow you to calculate the size.
Here, sizeOfBack.width will give me the width acquired by 14System sized string.
Hope it helps to you. let me know by comments, if you have yet doubts regarding this.
I want to overlay an image over a button. the button has a background image. If i want to overlay a semi transparent image over the button, suppose i overlay a red color image, which is semi transparent. Can any one suggest how to do that? Suggest some documentation.
UIImageView *overlay = [[UIImageView alloc] initWithImage:...];
[overlay setAlpha:0.5];
UIButton *button = [[UIButton alloc] initWithType:UIButtonTypeRoundedRect];
[button setBackgroundImage:...];
[button addSubview:overlay];
[overlay release];
UIButton also has an image property as well as a backgroundImage property, although I'm unsure how transparency would work with it.
http://developer.apple.com/iphone/library/documentation/uikit/reference/UIButton_Class/UIButton/UIButton.html
Following dc answer, note that changing the button alpha will affect also the overlay transparency, so check that button alpha is 1.0f (default value).
Note also that you should release the overlay variable after adding it as subview to button, otherwise, you'll get a memory leak.
I built a UIButton subclass that is a very basic checkbox. Everything is working (e.g. I'm getting the events I expect, the drawRect method is called when I expect, etc), but my image isn't drawing. I've checked that my image is not nil and that my images are different.
Code:
-(void)awakeFromNib {
[super awakeFromNib];
[self addTarget:self action:#selector(buttonClick) forControlEvents:UIControlEventTouchUpInside];
self.state=YES;
}
-(void) buttonClick {
self.state = !self.state;
[self setNeedsDisplay];
}
-(void)drawRect:(CGRect)rect {
UIImage *img = nil;
if (self.state) {
img = [self backgroundImageForState:UIControlStateSelected];
}
else {
img = [self backgroundImageForState:UIControlStateNormal];
}
[img drawInRect:rect];
}
Checking the value of 'img' before it is drawn:
Printing description of img:
<UIImage: 0x52a710>
(gdb) continue
Printing description of img:
<UIImage: 0x52a5d0>
The background images are being set in the NIB. If I change the selected state in IB, I see the proper image show up. I'm also getting a valid image back from the call (which I don't if I try to get imageForState, which is not set in the NIB).
The reason for the subclass is that I need a checkbox. UIButton doesn't do that and UISwitch is hideously ugly for all but the most utilitarian views.
Thoughts?
Thanks.
tj
Edit: Added all the code for the subclass
Where are you setting backgroundImageForState? Are you sure it's the correct image? iPhone OS might be giving you a transparent (blank) image as a default.
Second, I wouldn't use the passed-in "rect" param to draw the image. That's just telling you the area it wants you to redraw, not necessarily anything else. Instead use
CGRectMake(0, 0, img.size.width, img.size.height)
or something similar.
Finally, why are you doing custom drawing? I've done something very similar, and you absolutely don't need to subclass and implement drawRect. UIButton has an extremely rich set of options built in for images, including "highlighted" and "selected" images that will draw automatically with user interaction. Let us know what you need to accomplish.
Just because the UIImage isn't nil doesn't mean it contains image data.
Check the case of your file name.
I've done this several times:
#"CheckBox.png" and #"checkbox.png" are 2 different names to the iPhone.
It seems you may be doing a little premature optimizing as well.
I wouldn't dive into drawRect: for my first option.
Use a UIButton subclass (you only need to subclass to track state). Set the button up in IB and position it where you want it. Connect the button to the method below and simply swap the images on the click:
- (IBAction)toggle:(id)sender{
MyButtonSubClass *aButton = (MyButtonSubClass*)sender;
[aButton toggleChecked];
if(aButton.checked)
[aButton setImage:checkedImage forState:UIControlStateNormal];
else
[aButton setImage:uncheckedImage forState:UIControlStateNormal];
}
optionally you can not subclass UIButton and track state in the controller