I have Created my customized slider like this
UIImage *image = [UIImage imageNamed:#"thumb.png"];
CGRect frame = CGRectMake(22.5, 220.0, 280.0, 20.0);
UISlider *myslider = [[UISlider alloc] initWithFrame:frame];
[myslider addTarget:self action:#selector(sliderChanged:) forControlEvents:UIControlEventValueChanged];
[myslider setBackgroundColor:[UIColor clearColor]];
[myslider setThumbImage:image forState:UIControlStateNormal];
UIImage *stetchLeftTrack = [[UIImage imageNamed:#"leftLineImage.png"]
stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0];
UIImage *stetchRightTrack = [[UIImage imageNamed:#"SlideRight.png"]
stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0];
[myslider setMinimumTrackImage:stetchLeftTrack forState:UIControlStateNormal];
[myslider setMaximumTrackImage:stetchRightTrack forState:UIControlStateNormal];
myslider.minimumValue = 0.0;
myslider.maximumValue = 100.0;
myslider.continuous = YES;
myslider.value = 5.0;
[self.view addSubview:myslider];
In this slider i have taken slider left track image and slider right track image the size of both images are same i have done this by adjust size of preview but still I am getting my left track image is bigger how can I solve this problem.
and my second question
i have call the event on slider value change but i need to call a event when the slider get slide-fully or slider value get 100 how can I do this also.
Hi for your first question refer UICatalog app example provided in developer.
http://developer.apple.com/library/ios/#samplecode/UICatalog/Introduction/Intro.html
For second answer you can try this:-
- (void)sliderChanged:(id)sender
{
if (sender.value==100) {
//do your code
}
else {
//do nothing
}
}
I have to place a slider and want to place an imge on slider. the slider i want is this
CAn any body help me?
See the UISlider class reference. You want to set setThumbImage:forState: as well as setMinimumTrackImage:forState: and setMaximumTrackImage:forState:. Use the same images for the minimum and maximum track images, and use UIControlStateNormal for the state.
Below code will be in ViewWillAppear...
-(void)viewWillAppear:(BOOL)animated
{
slider.backgroundColor = [UIColor clearColor];
UIImage *stetchLeftTrack = [[UIImage imageNamed:#"yellowslide.png"]
stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0];
UIImage *stetchRightTrack = [[UIImage imageNamed:#"yellowslide.png"]
stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0];
[slider setThumbImage: [UIImage imageNamed:#"1.PNG"] forState:UIControlStateNormal];
[slider setMinimumTrackImage:stetchLeftTrack forState:UIControlStateNormal];
[slider setMaximumTrackImage:stetchRightTrack forState:UIControlStateNormal];
slider.minimumValue = 1.0;
slider.maximumValue = 3.0;
slider.continuous = YES;
slider.value = 0.0;
}
I'm implementing UISlider. I want to show images to the extreme end of the slider(eg. volume control images of mute and full sound). I'm using
UIImage *maximumValueImage = [UIImage imageNamed:#"speaker_plus.png"];
UIImage *minimumValueImage = [UIImage imageNamed:#"speaker_minus.png"];
slider.maximumValueImage = maximumValueImage;
slider.minimumValueImage = minimumValueImage;
How to implement the following method?
-(CGRect)maximumValueImageRectForBounds:(CGRect)bounds;
-(CGRect)minimumValueImageRectForBounds:(CGRect)bounds;
I did same for one of my app. Below is code.
UIImage *stetchLeftTrack = [[UIImage imageNamed:#"leftslide.png"]
stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0];
UIImage *stetchRightTrack = [[UIImage imageNamed:#"rightslide.png"]
stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0];
[slider setThumbImage:[UIImage imageNamed:#"imgSlider.png"] forState:UIControlStateNormal];
[slider setMinimumTrackImage:stetchLeftTrack forState:UIControlStateNormal];
[slider setMaximumTrackImage:stetchRightTrack forState:UIControlStateNormal];
Hope this Help.
These are the images I used.
Black image is leftside.png
White image is rightside.png
Black Circle is imgSlider.png
Im my app, i need a slider with no bar initially. And as the user changes it, it should be visible.
As the user slides the thumb of the slider to the right the slider bar should start appearing on the left side.
Please share anything you have in your mind.
Thanks,
I've never tried this but I suppose it's possible. It sounds like a bad idea from a user-experience perspective, but that's outside the scope of this answer.
You can change the min and max images for a slider using the code below. You could add in some logic to hide these images initially (or set these images to transparent PNGs). Add a method called - (void)sliderAction:(id)sender which will be called when the slider is changed. Add logic there to change the images to something visible, or un-hide the images.
UIImage *minImage = [UIImage imageNamed:#"min.png"];
UIImage *maxImage = [UIImage imageNamed:#"max.png"];
UIImage *thumbImage= [UIImage imageNamed:#"thumb.png"];
minImage=[minImage stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0];
maxImage=[maxImage stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0];
UISlider* customSlider = [[UISlider alloc] initWithFrame:CGRectMake(30, 100, 200, 50)];
[customSlider setMinimumTrackImage:minImage forState:UIControlStateNormal];
[customSlider setMaximumTrackImage:maxImage forState:UIControlStateNormal];
[customSlider setThumbImage:thumbImage forState:UIControlStateNormal];
customSlider.minimumValue = 0.0;
customSlider.maximumValue = 100.0;
customSlider.continuous = YES;
customSlider.value = 50.0;
[customSlider addTarget:self action:#selector(sliderAction:) forControlEvents:UIControlEventValueChanged];
[self.view addSubview:customSlider];
[customSlider release];
I have a transparent image which ("hold_empty.png", below) which I want to turn into a button. Inside the button there will be a view with a colored background which is slightly smaller size than the actual image to hold the background color.
The reason for this is because the image has rounded corners and so I cannot simply put a background color on the image as it will appear to be bigger than the image.
The image is a transparent square with "rounded corners". The effect I am trying to create should be like layers.
Background color layer (red, green, etc)
The "hold_empty.png" picture (above)
The whole object (including bg color layer) should be clickable.
The problem I am experiencing is that only the image (and its borders) appears to be clickable, and not the whole object.
The code follows below.
// x,y,w,h
CGRect frame = CGRectMake(10, 10, 72, 72);
CGRect frame2 = CGRectMake(5, 5, 60, 60); // I know this is not filling the image, its just a test
UIView *bgColorView = [[UIView alloc] initWithFrame:frame2];
[bgColorView setFrame:frame2];
bgColorView.backgroundColor = [UIColor redColor];
UIImage *image = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:#"hold_empty" ofType:#"png"]];
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
[btn addSubview:bgColorView];
[btn setImage:image forState:UIControlStateNormal];
btn.frame = frame;
[btn addTarget:self action:#selector(btnSelectColor:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:btn];
[bgColorView release];
So, to summarize: How do I make a transparent image button with a background color clickable?
Thanks.
The clickable area is generally the frame of the button which would not be clipped by its super-views, if you would let them clip contents.
The fact that you see something on screen doesn't mean it's "visible" in the sense that you can touch it. If you let every view clip its subviews (through IB, or by setting view.clipsToBounds = YES;) then any problems in that respect will show up clearly.
(Note that any UIButton, UIImageView, etc is a view and can be set to clip its contents)
Do you need to maybe enable user interaction on the subview?
bgColorView.userInteractionEnabled = YES;
I think I may have an answer that is working, but would like your comments/suggestions.
I created an UIImageView and put my background color layer and image layer inside that and then put the UIImageView inside the btn.
The only problem is now the button does not look like it is being pressed.
When I add the "setShowsTouchWhenHighlighted" option it has what looks like a big white star in the middle of the button when the user clicks ont he button.
// x,y,w,h
CGRect frame = CGRectMake(10, 10, 72, 72);
CGRect frame2 = CGRectMake(5, 5, 62, 62); // This fits, but may not be 100% accurate
// View
UIView *bgColorView = [[UIView alloc] initWithFrame:frame2];
[bgColorView setFrame:frame2];
bgColorView.backgroundColor = [UIColor redColor];
bgColorView.userInteractionEnabled = YES;
[bgColorView setNeedsDisplayInRect:frame2];
// Image
UIImage *image = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:#"hold_empty2" ofType:#"png"]];
UIImageView *imgView = [[UIImageView alloc] initWithImage:image];
[imgView insertSubview:bgColorView atIndex:0];
// Btn
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
[btn setFrame:frame];
[btn addSubview:imgView];
[btn setShowsTouchWhenHighlighted:YES];
[btn setUserInteractionEnabled:YES];
[btn addTarget:self action:#selector(btnSelectColor:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:btn];
[imgView release];
[bgColorView release];
I've cracked it now. One of the problems I was having was that it was not working with avatars (sometimes it would appear behind the layer, othertimes it would not show at all).
This is my solution.
UIImage *image = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:#"some_avatar" ofType:#"png"]];
UIImageView *imgView = [[UIImageView alloc] initWithImage:image];
CGRect fullFrame = CGRectMake(25, 10, 70,72);
CGRect frame = CGRectMake(28, 13, 63,65);
UIButton *h=[UIButton buttonWithType:UIButtonTypeCustom];
[h setFrame:fullFrame];
[[h layer] setMasksToBounds:YES];
//[h setBackgroundImage:image forState:UIControlStateNormal];
//[h setImage:image forState:UIControlStateNormal];
[h setShowsTouchWhenHighlighted:YES];
[h setClipsToBounds:YES];
CAGradientLayer *gradientLayer = [[CAGradientLayer alloc] init];
[gradientLayer setBounds:frame];
[gradientLayer setPosition:CGPointMake([h bounds].size.width/2, [h bounds].size.height/2)];
[gradientLayer setColors:[NSArray arrayWithObjects:
(id)[[UIColor darkGrayColor]CGColor],(id)[[UIColor blackColor] CGColor], nil]];
[[h layer] insertSublayer:gradientLayer atIndex:0];
[h insertSubview:imgView atIndex:1];
[h addTarget:self action:#selector(btnSelectColor:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:h];
[imgView release];