前言
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 | 高亮
-