iOS - UISlider
前言
NS_CLASS_AVAILABLE_IOS(2_0) __TVOS_PROHIBITED @interface UISlider : UIControl <NSCoding>
@available(iOS 2.0, *) public class UISlider : UIControl, NSCoding1、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 设置
![Slider1]()
Value 最小值/最大值/当前值 Min Image 最小值图片 Max Image 最大值图片 Min Track Tint 滑过的颜色 Max Track Tint 未滑过的颜色 Thumb Tint 滑块颜色 Events -- Continuous Updates -
Control 设置
![Slider2]()
Alignment 文字对齐方式 Content -- Selected 选中 -- Enable 可用 -- Highlighted 高亮
-
