前言

    NS_CLASS_AVAILABLE_IOS(2_0) __TVOS_PROHIBITED @interface UISlider : UIControl <NSCoding>
    @available(iOS 2.0, *)                         public class UISlider : UIControl, NSCoding

1、UISlider 的创建

• Objective-C

      // 高度不起作用，但不能为 0 ，为 0 时滑块无法滑动
      UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake(20, 200, 300, 20)];
  
      // 将 slider 添加到 view
      [self.view addSubview:slider];

• Swift

      // 高度不起作用，但不能为 0 ，为 0 时滑块无法滑动
      let slider:UISlider = UISlider(frame: CGRectMake(20, 200, 300, 20))
  
      // 将 slider 添加到 view
      self.view.addSubview(slider)

2、UISlider 的设置

• Objective-C

      // 设置最小和最大值
      slider.minimumValue = 0;
      slider.maximumValue = 100;
  
      // 设置当前值
      slider.value = 50;
      [slider setValue:50 animated:YES];
  
      // 获取当前值
      float value = slider.value;
  
      // 设置滑块的颜色
      /*
          默认为白色
      */
      slider.thumbTintColor = [UIColor orangeColor];
  
      // 设置滑过的进度条的颜色
      /*
          默认为蓝色
      */
      slider.tintColor = [UIColor redColor];
  
      // 设置滑过的和未划过的进度条的颜色
      /*
          minimumTrackTintColor：滑过的进度条颜色，默认为蓝色
          maximumTrackTintColor：未划过的进度条颜色，默认为灰色
      */
      slider.minimumTrackTintColor = [UIColor greenColor];
      slider.maximumTrackTintColor = [UIColor redColor];
  
      // 设置滑块的图片
      [slider setThumbImage:[UIImage imageNamed:@"hehe"] forState:UIControlStateNormal];
      [slider setThumbImage:[UIImage imageNamed:@"hihi"] forState:UIControlStateHighlighted];
  
      // 设置滑过的和未划过的进度条的图片
      [slider setMinimumTrackImage:[UIImage imageNamed:@"pic1"] forState:UIControlStateNormal];
      [slider setMaximumTrackImage:[UIImage imageNamed:@"pic2"] forState:UIControlStateNormal];
  
      // 设置左右两端的图片
      slider.minimumValueImage = [UIImage imageNamed:@"volum-"];
      slider.maximumValueImage = [UIImage imageNamed:@"volum+"];
  
      // 设置为纵向
  
          // 顺时针旋转 90 度，90/180 * M_PI，1 度 ＝ PI/180 弧度
          slider.transform = CGAffineTransformMakeRotation(0.5 * M_PI);
  
          // 逆时针旋转 90 度，270/180 * M_PI，1 度 ＝ PI/180 弧度
          slider.transform = CGAffineTransformMakeRotation(1.5 * M_PI);
  
      // 获取当前值
      UIImage *thumbImage = slider.currentThumbImage;                  // 获取当前滑块的图片值
      UIImage *minimumTrackImage = slider.currentMinimumTrackImage;    // 获取当前滑过的进度条的图片值
      UIImage *maximumTrackImage = slider.currentMaximumTrackImage;    // 获取当前未滑过的进度条的图片值
  
      // 添加点击触发事件
      /*
          UISlider 继承于 UIControl，可以对 UISlider 添加触发事件
      */
      [slider addTarget:self action:@selector(sliderClick:) forControlEvents:UIControlEventValueChanged];

• Swift

      // 设置最小和最大值
      slider.minimumValue = 0
      slider.maximumValue = 100
  
      // 设置当前值
      slider.value = 50
      slider.setValue(50, animated: true)
  
      // 获取当前值
      let value:Float = slider.value
  
      // 设置滑块的颜色
      /*
          默认为白色
      */
      slider.thumbTintColor = UIColor.orangeColor()
  
      // 设置滑过的进度条的颜色
      /*
          默认为蓝色
      */
      slider.tintColor = UIColor.redColor()
  
      // 设置滑过的和未划过的进度条的颜色
      /*
          minimumTrackTintColor：滑过的进度条颜色，默认为蓝色
          maximumTrackTintColor：未划过的进度条颜色，默认为灰色
      */
      slider.minimumTrackTintColor = UIColor.greenColor()
      slider.maximumTrackTintColor = UIColor.redColor()
  
      // 设置滑块的背景图片
  
          // 按钮未点击时的图片
          slider.setThumbImage(UIImage(named: "hehe"), forState: UIControlState.Normal)
  
          // 按钮点击时的图片
          slider.setThumbImage(UIImage(named: "hihi"), forState: UIControlState.Highlighted)
  
      // 设置滑过的和未划过的进度条的图片
      slider.setMinimumTrackImage(UIImage(named: "pic1"), forState: UIControlState.Normal)
      slider.setMaximumTrackImage(UIImage(named: "pic2"), forState: UIControlState.Normal)
  
      // 设置左右两边的图片
      slider.minimumValueImage = UIImage(named: "volum-")
      slider.maximumValueImage = UIImage(named: "volum+")
  
      // 设置为纵向
  
          // 顺时针旋转 90 度，90/180 * M_PI，1 度 ＝ PI/180 弧度
          slider.transform = CGAffineTransformMakeRotation(0.5 * CGFloat(M_PI))
  
          // 逆时针旋转 90 度，270/180 * M_PI，1 度 ＝ PI/180 弧度
          slider.transform = CGAffineTransformMakeRotation(1.5 * CGFloat(M_PI))
  
      // 获取当前值
      let thumbImage:UIImage? = slider.currentThumbImage                 // 获取当前滑块的图片值
      let minimumTrackImage:UIImage? = slider.currentMinimumTrackImage   // 获取当前滑过的进度条的图片值
      let maximumTrackImage:UIImage? = slider.currentMaximumTrackImage   // 获取当前未滑过的进度条的图片值
  
      // 添加点击触发事件
      slider.addTarget(self, action: #selector(UiSlider.sliderClick(_:)), 
                   forControlEvents: .ValueChanged)

3、UISlider 透明化处理

• 经过处理后的 UISlider 就只能看到中间的 ThumbImage 了，而 ThumbImage 左右的颜色都变成透明的。之后可以再设置上颜色等。

• Objective-C

      UIGraphicsBeginImageContextWithOptions(CGSizeMake(1, 1), NO, 0.0f);
      UIImage *transparentImage = UIGraphicsGetImageFromCurrentImageContext();
      UIGraphicsEndImageContext();
  
      [slider setMinimumTrackImage:transparentImage forState:UIControlStateNormal];
      [slider setMaximumTrackImage:transparentImage forState:UIControlStateNormal];

• Swift

      UIGraphicsBeginImageContextWithOptions(CGSizeMake(1, 1), false, 0.0)
      let transparentImage:UIImage = UIGraphicsGetImageFromCurrentImageContext()
      UIGraphicsEndImageContext()
  
      slider.setMinimumTrackImage(transparentImage, forState: .Normal)
      slider.setMaximumTrackImage(transparentImage, forState: .Normal)

4、Storyboard 中设置

• 在 Storyboard 场景中设置

  • Slider 设置

    Value	最小值/最大值/当前值
    Min Image	最小值图片
    Max Image	最大值图片
    Min Track Tint	滑过的颜色
    Max Track Tint	未滑过的颜色
    Thumb Tint	滑块颜色
    Events
    -- Continuous Updates

  • Control 设置

    Alignment	文字对齐方式
    Content
    -- Selected	选中
    -- Enable	可用
    -- Highlighted	高亮