[slider setMaximumTrackTintColor: color]
has unexpected results in iOS 7.1 (the slider bar changes its position appearing at top instead of vertical center or disappears completely), while working fine with prior versions.
[slider setMinimumTrackTintColor: color]
does render the expected result.
This question might be related: UISlider setMaximumTrackTintColor,
but no answer so far.
Update:
I get this: instead of:
Update #2:
Using setMaximumTrackImage might work, but the solution I'm looking for is a way to set any random color and not a preexisting image.
Update #3:
This issue is still present in iOS 7.1.1.
Found this workaroud:
Create a 1x1px UIImage from a UIColor on the fly:
CGRect rect = CGRectMake(0, 0, 1, 1);
UIGraphicsBeginImageContextWithOptions(rect.size, NO, 0);
[color setFill];
UIRectFill(rect);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
and then
[slider setMaximumTrackImage:image forState:UIControlStateNormal];
Looks like an expensive solution but it gets the job done.
Try this out:
UIImage *sliderLeftTrackImage = [[UIImage imageNamed:#"LeftImage.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
UIImage *sliderRightTrackImage = [[UIImage imageNamed:#"RightImage.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
[sliderName setMinimumTrackImage: sliderLeftTrackImage forState: UIControlStateNormal];
[sliderName setMaximumTrackImage: sliderRightTrackImage forState: UIControlStateNormal];
If you want to change thumb image the following code will work:
[sliderName setThumbImage:[UIImage imageNamed:#"ThumbImgName.png"] forState:UIControlStateNormal];
[sliderName setThumbImage:[UIImage imageNamed:#"ThumbImgName.png"] forState:UIControlStateHighlighted];
In same way, you can also use color instead of images.
I've created 2px images with the colour of slider track.
And then I set they as tracking images (here's with thumb image for iPad and iPhone)
UIImage *thumbImage = [UIImage imageNamed:#"slider"];
UIImage *trackImage;
if (isiPad) {
[[UISlider appearance] setThumbImage:thumbImage forState:UIControlStateNormal];
[[UISlider appearance] setThumbImage:thumbImage forState:UIControlStateHighlighted];
trackImage = [UIImage imageNamed:#"menu-bar-ipad"];
}
else {
[[UISlider appearance] setThumbImage:[self imageWithImage:thumbImage scaledToSize:CGSizeMake(27, 27)] forState:UIControlStateNormal];
[[UISlider appearance] setThumbImage:[self imageWithImage:thumbImage scaledToSize:CGSizeMake(27, 27)] forState:UIControlStateHighlighted];
trackImage = [UIImage imageNamed:#"menu-bar"];
}
[[UISlider appearance] setMinimumTrackImage:trackImage forState:UIControlStateNormal];
[[UISlider appearance] setMaximumTrackImage:trackImage forState:UIControlStateNormal];
And that's all. Same solution as msmq I guess. And you can see both ways how to make a large image - two images way and scaling way.
Update
Reported this bug and it's already well known. Hopefully they will fix it soon...
Maybe a little bit late, but - here is the answer
You should read description of setter:
The color used to tint the standard maximum track images. Setting this
property removes any custom maximum track images associated with the
slider.
Also this applicable only for maximum color, because minimum setter just change titntColor:
The color used to tint the standard minimum track images.
This mean that slider use some image for maximum track and if u just set tint color nothing will be changes (nothing can't be tinted).
Solution (thanks to #user623396):
UIImage *currentSliderMaximumImage = self.slider.currentMaximumTrackImage;
CGRect rect = CGRectMake(0, 0, currentSliderMaximumImage.size.width, currentSliderMaximumImage.size.height);
UIGraphicsBeginImageContextWithOptions(rect.size, NO, 0);
[[[DynamicUIService service] currentApplicationColor] setFill];
UIRectFill(rect);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[self.slider setMaximumTrackImage:image forState:UIControlStateNormal];
As result u will get
Related
I've been trying to customizing the looks of a UIStepper object added over Interface Builder. In reference to a topic here and others, I've added a few lines of code to viewDidLoad.
- (void)viewDidLoad {
[[UIStepper appearance] setIncrementImage:[UIImage imageNamed:#"stepperupImage.tif"] forState:UIControlStateNormal];
[[UIStepper appearance] setDecrementImage:[UIImage imageNamed:#"stepperdownImage.tif"] forState:UIControlStateNormal];
}
The result is the blue rectangles of death as shown below. UIStepper doesn't have a property like UIButtonTypeCustom for UIButton. Does anybody know how to fix this problem? My deployment target is iOS 8.0.
Thanks.
To render images that don’t have transparency as they originally were, either:
Change the “Render As” setting to “Original Image”(.xcasset files only):
— or —
Change the rendering mode in code (docs):
UIImage *image;
image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
In your case,the code would look like this:
[[UIStepper appearance] setIncrementImage:[[UIImage imageNamed:#"stepperupImage.tif"] imageWithRenderingMode: UIImageRenderingModeAlwaysOriginal] forState:UIControlStateNormal];
[[UIStepper appearance] setDecrementImage:[[UIImage imageNamed:#"stepperdownImage.tif"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal] forState:UIControlStateNormal];
UIImage *incrementImageFromFile = [UIImage imageNamed:#"plus.png"];
UIImage *incrementImage = [incrementImageFromFile imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIImage *decrementImageFromFile = [UIImage imageNamed:#"minus.png"];
UIImage *decrementImage = [decrementImageFromFile imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
// For Normal state
[stepper setIncrementImage:incrementImage forState:UIControlStateNormal];
[stepper setDecrementImage:decrementImage forState:UIControlStateNormal];
// For Highlighted state
[stepper setIncrementImage:incrementImage forState:UIControlStateHighlighted];
[stepper setDecrementImage:decrementImage forState:UIControlStateHighlighted];
I've subclassed UISlider and increased the width by doing this:
-(CGRect)trackRectForBounds:(CGRect)bounds {
bounds.size.height = 50;
return bounds;
}
And changed the thumb image:
- (void)drawRect:(CGRect)rect {
// Drawing code
[self setThumbImage:[UIImage imageNamed:#"icon_circle"] forState:UIControlStateNormal];
}
But this is happening:
The minimum track image starts from the center. I want to make it start from the thumb end. So initially, till the thumb it should be blue and when I drag it till the end the whole slider should be blue but at the end of the slider, the slider is not curved. It has got sharped edges. What should I do to get this right?
Couldn't find much help so I made my own custom one instead. It's also available on GitHub. https://github.com/bhavukjain1/SlideToActionSlideriOS
Are you setting the following properties?
UIImage *minImage = [[UIImage imageNamed:#"slider_minimum.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 0)];
UIImage *maxImage = [[UIImage imageNamed:#"slider_maximum.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 5)];
UIImage *thumbImage = [UIImage imageNamed:#"sliderhandle.png"];
[[UISlider appearance] setMaximumTrackImage:maxImage forState:UIControlStateNormal];
[[UISlider appearance] setMinimumTrackImage:minImage forState:UIControlStateNormal];
[[UISlider appearance] setThumbImage:thumbImage forState:UIControlStateNormal];
}
if so, take a look at this tutorial of how to create a custom slider, it comes with a sample project, may be it's easier for you to find your error by comparing your implementation against a working one.
To solve the rectangular corners issue, in drawRect
self.layer.cornerRadius = 25;
self.clipsToBounds = YES;
To show the correct image while dragging, you need to set this as well:
[self setThumbImage:[UIImage imageNamed:#"icon_circle"] forState:UIControlStateHighlighted];
I would like to display the progress like the image(except the black background that is screen color). I am using progress view for this. Here user doesn't have chance to change the progress manually.
Please help me on this.
This might help someone. I have implemented this behaviour with UISlider instead of UIProgressView. UISlider solves the problem.
UIImage *minImage = [[UIImage imageNamed:#"slider_minimum.png"]
resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 0)];
UIImage *maxImage = [[UIImage imageNamed:#"slider_maximum.png"]
resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 0)];
UIImage *thumbImage = [UIImage imageNamed:#"thumb.png"];
[self.uisliderObj setMaximumTrackImage:maxImage
forState:UIControlStateNormal];
[self.uisliderObj setMinimumTrackImage:minImage
forState:UIControlStateNormal];
[self.uisliderObj setThumbImage:thumbImage
forState:UIControlStateNormal];
source is from this link
You will find a lot of simple codes on WWW.COCOACONTROLS.COM . You can check it.
If you want to customise on own you can also subclass UIPROGRESSBAR class
and change the trackImage and progressImage of the UIProgressView.
I am using:
[pageSlider setThumbImage:[UIImage imageNamed:#"UISliderThumb.png"] forState:UIControlStateNormal];
It works alright in iOS6 but for iOS7, the thumb image is under the progress bar, like so:
How do I get the thumb image to appear on the top like it should?
Bump: Anything?
I think you are adding the thumb image first then u are adding minimum and maximum image for slider. You should first add minimum and maximum image for the slider then add Thumb image for the slider, See my below code.
UIImage *trackLeftImage = [[UIImage imageNamed:#"greenvolume-slide.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 14, 0, 14)];
[_globalSlider setMinimumTrackImage:trackLeftImage forState:UIControlStateNormal];
UIImage *trackRightImage = [[UIImage imageNamed:#"volume-slide.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 14, 0, 14)];
[_globalSlider setMaximumTrackImage:trackRightImage forState:UIControlStateNormal];
UIImage *ball = [UIImage imageNamed:#"volume-dragger.png"];
[_globalSlider setThumbImage:ball forState:UIControlStateNormal];
Thanks.
Try the below code can help you :)
[pageSlider setThumbImage:[[UIImage imageNamed:#"UISliderThumb.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal] forState:UIControlStateNormal];
I've been able to have a custom UIBarButtonItem with an embedded uibutton through story board. It's the map button.
see parameters on this screenshot, I had to use background property instead of Image.
But when I tried to customize some uibarbuttons programmatically, then the buttons get smaller. I had the same result with the map button when I was using Image property.
Here the code i'm writing for the back button,
UIImage *backButtonImage = [[UIImage imageNamed:#"Retour.png"]resizableImageWithCapInsets:UIEdgeInsetsMake(21, 21, 21, 21)] ;
backButtonImage = [backButtonImage stretchableImageWithLeftCapWidth:0 topCapHeight:0];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(0, 0, backButtonImage.size.width, backButtonImage.size.height);
[button setBackgroundImage:backButtonImage forState:UIControlStateNormal];
[button setBackgroundImage:backButtonImage forState:UIControlStateHighlighted];
[button addTarget:self action:#selector(back) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *backBarButton = [[UIBarButtonItem alloc] initWithCustomView:button] ;
self.navigationItem.leftBarButtonItem = backBarButton;
I tried with or without resizableImageWithCapInsets, stretchableImageWithLeftCapWidth with the same result below (the back button should have the same size as the map button)
I tried also iOS 5 setBackButtonBackgroundImage methods but the button was not customized at all.
If you don't find an answer to your problem, I can suggest you this function :
- (UIImage *)imageWithImage:(UIImage *)image scaledToSize:(CGSize)newSize
{
//UIGraphicsBeginImageContext(newSize);
UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0);
[image drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
It returns an image scaled to the specified size.
So you can resize your image at the desired size and then set it as a background image.
Well the problem was that I had overwritten the Retour#2x.png for retina display with Retour.png -__-'