I want to change UISlider background color with slide like this
I have tried this code but it is not like this type view
@property (strong, nonatomic) IBOutlet UISlider *r;
@property (strong, nonatomic) IBOutlet UISlider *g;
@property (strong, nonatomic) IBOutlet UISlider *b;
-(void)blueSlider:(UISlider*)slider {
UIColor *newColor = [UIColor colorWithRed:_r.value green:_g.value blue:_b.value alpha:1];
_b.backgroundColor=newColor;
}
-(void)greenSlider:(UISlider*)slider {
UIColor *newColor = [UIColor colorWithRed:_r.value green:_g.value blue:_b.value alpha:1];
_g.backgroundColor=newColor;
}
-(void)redSlider:(UISlider*)slider {
UIColor *newColor = [UIColor colorWithRed:_r.value green:_g.value blue:_b.value alpha:1];
_r.backgroundColor=newColor;
}
I want particular this look.
in header file import quartzCore and define layer instances as
#import <QuartzCore/QuartzCore.h>
@interface ViewController : UIViewController
{
CAGradientLayer *red_gradient;
CAGradientLayer *green_gradient;
CAGradientLayer *blue_gradient;
}
@property (strong, nonatomic) IBOutlet UISlider *r;
@property (strong, nonatomic) IBOutlet UISlider *g;
@property (strong, nonatomic) IBOutlet UISlider *b;
@property (strong, nonatomic) IBOutlet UILabel *colorLabel;
-(IBAction)sliderValue:(UISlider*)sender;
@end
In implementation file initialize layers and set frames of UISliders as given below
- (void)viewDidLoad
{
red_gradient =[CAGradientLayer layer];
green_gradient =[CAGradientLayer layer];
blue_gradient=[CAGradientLayer layer];
CGRect rect=_r.frame;
rect.size.height=10;
[_r setFrame:rect];
rect=_g.frame;
rect.size.height=10;
[_g setFrame:rect];
rect=_b.frame;
rect.size.height=10;
[_b setFrame:rect];
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
In view did appear method call addLayers method as
-(void)viewDidAppear:(BOOL)animated
{
[self addLayers];
}
On value change slider method call addSubLayers method as
-(IBAction)sliderValue:(UISlider*)sender
{
[self addLayers];
UIColor *newColor = [UIColor colorWithRed:_r.value green:_g.value blue:_b.value alpha:1];
_colorLabel.backgroundColor = newColor;
}
And At last here is your addLayers Method :---
-(void)addLayers
{
UIColor *startColor=[UIColor colorWithRed:0 green:_g.value blue:_b.value alpha:1];
UIColor *endColor=[UIColor colorWithRed:1 green:_g.value blue:_b.value alpha:1];
red_gradient.frame = _r.bounds;
red_gradient.colors = [NSArray arrayWithObjects:(id)[startColor CGColor], (id)[endColor CGColor], nil];
[red_gradient setStartPoint:CGPointMake(0.0, 0.5)];
[red_gradient setEndPoint:CGPointMake(1.0, 0.5)];
[_r.layer insertSublayer:red_gradient atIndex:2];
startColor=[UIColor colorWithRed:_r.value green:0 blue:_b.value alpha:1];
endColor=[UIColor colorWithRed:_r.value green:1 blue:_b.value alpha:1];
green_gradient.frame = _g.bounds;
green_gradient.colors = [NSArray arrayWithObjects:(id)[startColor CGColor], (id)[endColor CGColor], nil];
[green_gradient setStartPoint:CGPointMake(0.0, 0.5)];
[green_gradient setEndPoint:CGPointMake(1.0, 0.5)];
[_g.layer insertSublayer:green_gradient atIndex:2];
startColor=[UIColor colorWithRed:_r.value green:_g.value blue:0 alpha:1];
endColor=[UIColor colorWithRed:_r.value green:_g.value blue:1 alpha:1];
blue_gradient.frame = _b.bounds;
blue_gradient.colors = [NSArray arrayWithObjects:(id)[startColor CGColor], (id)[endColor CGColor], nil];
[blue_gradient setStartPoint:CGPointMake(0.0, 0.5)];
[blue_gradient setEndPoint:CGPointMake(1.0, 0.5)];
[_b.layer insertSublayer:blue_gradient atIndex:2];
}
it would look like :--------
Your code does not achieve the desired look because you are setting the background color of the slider all together.
Take a look at the CGGradient reference to learn how to use gradients.
Also, what you pictured is not looking like a slider at all, but rather like an object within the bounds of a gradient that changes the value through a panGestureRecognizer
.
To learn about that, visit the UIPanGestureRecognizer Class Reference
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.