UISlider

1、UISlider 的创建与设置

• 1.1 基础创建

// 创建
UISlider *slider = [[UISlider alloc] init];
// 设置位置尺寸：高度不起作用，但不能为 0 ，为 0 时滑块无法滑动
slider.frame = CGRectMake(20, 200, 300, 20);
// 将 slider 添加到 view
[self.view addSubview:slider];

// 设置最小和最大值
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 添加触发事件
	UISlider作为进度条一直为我们所使用，如果想获取变化的值，通过UIControlEventValueChanged即可获取，但是如果想获取滑动开始和结束的事件需要另外两个事件: */
[slider addTarget:self action:@selector(sliderProgressChange:) forControlEvents:UIControlEventValueChanged]; 
[slider addTarget:self action:@selector(sliderTouchDown:) forControlEvents:UIControlEventTouchDown]; 
[slider addTarget:self action:@selector(sliderTouchUpInSide:) forControlEvents:UIControlEventTouchUpInside];

// 值发生变化
- (void)sliderProgressChange:(UISlider *)gc_slider {
	
}

// 手指按下
- (void)sliderTouchDown:(UISlider *)gc_slider {
	
}

// 手指离开
- (void)sliderTouchUpInSide:(UISlider *)gc_slider {
	
}

• 1.2 透明化处理

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

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

• 1.3 自定义

  • Basic_SeekBar