iOS
前言
1、UISlider 的创建
2、UISlider 的设置
3、UISlider 透明化处理
4、Storyboard 中设置

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

iOS 前言 1、UISlider 的创建 2、UISlider 的设置 3、UISlider 透明化处理 4、Storyboard 中设置

1、UISlider 的创建

2、UISlider 的设置

3、UISlider 透明化处理

4、Storyboard 中设置

相关推荐