Summary of UISlider slider component usage in iOS

  • 2020-06-07 05:22:06
  • OfStack

The slider on PC is ugly because we can only drag it with the mouse. But when Jobs ported it to IOS the 1 shear became cool because we could drag it with our fingers, which was nice.
The slider provides the user with a visible way to adjust the range, by dragging a slider to change its value, and by configuring it to fit different ranges. You can set a range of slider values, add images to both ends, and make various adjustments to make it look better. Sliders are ideal for representing choices over a wide (but not precise) range of values, such as volume Settings, sensitivity controls, and the like.
1. Create
The slider is a standard UIControl. We can create it in code, just as the width and height of the switch (UISwitch) will be ignored, so will the height of the slider (but not the width) :


UISlider* mySlider = [ [ UISlider alloc ] initWithFrame:CGRectMake(20.0,10.0,200.0,0.0) ];// Height is set to 0 It is good    

2. Set the range and default values
We'll set the slider's range when we're done. If you don't, we'll use the default values between 0.0 and 1.0. UISlider provides two properties to set the scope: mininumValue and maxinumValue:

mySlider.mininumValue = 0.0;// The lower limit  
mySlider.maxinumValue = 50.0;// ceiling  

You can also set a default value for the slider:

mySlider.value = 22.0; 

3. Add pictures to both ends
The slider can display an image in any 1 segment. Adding an image causes the slider to shorten, so remember to increase the width of the slider as you create it to fit the image.

[ mySlider setMininumTrackImage: [ UIImage applicationImageNamed:@"min.png" ] forState: UIControlStateNormal ]; 
[ mySlider setMaxinumTrackImage: [ UIImage applicationImageNamed:@"max.png" ] forState: UIControlStateNormal ]; 

You can display different images according to different states of the slider. The following is the available status:

UIControlStateNormal
UIControlStateHighlighted
UIControlStateDisabled
UIControlStateDisabled
UIControlStateSelected

4. Display controls

[ parentView addSubview:myslider ];// Add to the superview  

or

[ self.navigationItem.titleView addSubview:myslider ];// Add to navigation bar

5. Read control values

float value = mySlider.value; 

6. Notice
To be notified when the slider value changes, add an action to the UIControlEventValueChanged event using the addTarget method of the UIControl class.

[ mySlider addTarget:self action:@selector(sliderValueChanged:) forControlEventValueChanged ]; 

As soon as the slider is parked (notice that it is parked, if you want to trigger it in the drag, see below) to the new location, your action method will be called:

- (void) sliderValueChanged:(id)sender{ 
        UISlider* control = (UISlider*)sender; 
        if(control == mySlider){ 
                  float value = control.value; 
                   /* Add your own processing code */ 
         } 


If you want to trigger it in a drag, you need to set the continuos property of the slider:

mySlider.continuous = YES ; 

The simplest example of this notification is the real-time display slider value. The odd Apple display slider value is a private API (setShowValue). We can display the value with 1 UILabel and change the value of label every time the above method is triggered. Of course we can do more than that, there are many more cool things that can be done, depending on your means and imagination.

7. UISlider solution with gaps on both sides
I have made a player before, with space on both sides of the volume bar. During the interview at Sina, the interviewer mentioned this knowledge point. After climbing stackoverflow for a long time, I finally found a way to share it with iOS beginners.
Override this method for UISlider


- (CGRect)thumbRectForBounds:(CGRect)bounds trackRect:(CGRect)rect value:(float)value
{
    rect.origin.x = rect.origin.x - 10 ;
    rect.size.width = rect.size.width +20;
    return CGRectInset ([super thumbRectForBounds:bounds trackRect:rect value:value], 10 , 10);
}

Of course there are several other ways UISlider can be rewritten

-(CGRect)trackRectForBounds:(CGRect)bounds
{
    bounds.origin.x=15;
    bounds.origin.y=bounds.size.height/3;
    bounds.size.height=bounds.size.height/5;
    bounds.size.width=bounds.size.width-30;
    return bounds;
}
- (CGRect)minimumValueImageRectForBounds:(CGRect)bounds;
- (CGRect)maximumValueImageRectForBounds:(CGRect)bounds;


Related articles: