文章: 阅读:

UISlider 滑块

iOSUIKit

前言

  • Objective-C

    1
    NS_CLASS_AVAILABLE_IOS(2_0) __TVOS_PROHIBITED @interface UISlider : UIControl <NSCoding>

  • Swift

    1
    @available(iOS 2.0, *) public class UISlider : UIControl, NSCoding

1、UISlider 的创建

  • Objective-C

    1
    2
    3
    4
    5
    // 高度不起作用，但不能为 0 ，为 0 时滑块无法滑动
    UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake(20, 200, 300, 20)];

    // 将 slider 添加到 view
    [self.view addSubview:slider];

  • Swift

    1
    2
    3
    4
    5
    // 高度不起作用，但不能为 0 ，为 0 时滑块无法滑动
    let slider: UISlider = UISlider(frame: CGRectMake(20, 200, 300, 20))

    // 将 slider 添加到 view
    self.view.addSubview(slider)

2、UISlider 的设置

  • Objective-C

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    // 设置最小和最大值
    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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    // 设置最小和最大值
    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

    1
    2
    3
    4
    5
    6
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(1, 1), NO, 0.0f);
    UIImage *transparentImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    [slider setMinimumTrackImage:transparentImage forState:UIControlStateNormal];
    [slider setMaximumTrackImage:transparentImage forState:UIControlStateNormal];

  • Swift

    1
    2
    3
    4
    5
    6
    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 场景中设置

4.1 Slider 设置

Slider1

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

4.2 Control 设置

Slider2

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

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2016-08-20 06:21


评论


文章目录
  1. 1. 前言
  2. 2. 1、UISlider 的创建
  3. 3. 2、UISlider 的设置
  4. 4. 3、UISlider 透明化处理
  5. 5. 4、Storyboard 中设置
    1. 5.1. 4.1 Slider 设置
    2. 5.2. 4.2 Control 设置
隐藏目录