一、UISlider
UIslider滑块控件在IOS开发中会常用到,可用于调节音量,字体大小等UI方面的交互;UISlider实例提供一个控件,让用户通过左右拖动一个滑块(可称其为“缩略图”)来选择一个值。默认情况下,滑块的最小值为0.0,最大值为1.0。当然可以在属性面板中通过设置minimumValue和maximumValue来进行定制这两个值。如果要为控件两端设置样式,可以添加一对相关图像(minimumValueImage和maximumValueImage属性)来加强该设置,也可在代码中通过setMimimumTrackImage: forState: 和setMaximumTrackImage: forState: 方法来添加设置两端图片。
UISwitch对象提供一个简单的开/关切换,允许用户选择一个布尔值。
常见属性:
1、value:
这个值是介于滑块的最大值和最小值之间的,如果没有设置边界值,默认为0-1;
2、minimumValue:
设置滑块最小边界值(默认为0)
3、maximumValue:
设置滑块最大边界值(默认为1)
4、minimumValueImage:
设置滑块最左端显示的图片
5、maximumValueImage
设置滑块最右端显示的图片
6、continuous(BOOL)
设置滑块值是否连续变化(默认为YES)
7、minimumTrackTintColor
设置滑块左边(小于部分)线条的颜色
8、maximumTrackTintColor:
设置滑块右边(大于部分)线条的颜色
9、thumbTintColor
设置滑块颜色(影响已划过一端的颜色),注意这个属性:如果你没有设置滑块的图片,那个这个属性将只会改变已划过一段线条的颜色,不会改变滑块的颜色,如果你设置了滑块的图片,又设置了这个属性,那么滑块的图片将不显示,滑块的颜色会改变。
常用方法:
手动设置滑块的值:
- (void)setValue:(float)value animated:(BOOL)animated;
设置滑块的图片:
- (void)setThumbImage:(UIImage *)image forState:(UIControlState)state;
设置滑块划过部分的线条图案
- (void)setMinimumTrackImage:(UIImage *)image forState:(UIControlState)state;
设置滑块未划过部分的线条图案
- (void)setMaximumTrackImage:(UIImage *)image forState:(UIControlState)state;
对应的几个get方法
- (UIImage *)thumbImageForState:(UIControlState)state;
- (UIImage *)minimumTrackImageForState:(UIControlState)state;
- (UIImage *)maximumTrackImageForState:(UIControlState)state;
对应的设置当前状态的响应属性的方法
@property(nonatomic,readonly) UIImage* currentThumbImage;
@property(nonatomic,readonly) UIImage* currentMinimumTrackImage;
@property(nonatomic,readonly) UIImage* currentMaximumTrackImage;
//初始化 mySlider = [[UISlider alloc] initWithFrame:(CGRect){10,80,100,20}]; //最小边界值 mySlider.minimumValue = 10; //最大边界值 mySlider.maximumValue = 100; //这个值是介于滑块的最大值和最小值之间的,如果没有设置边界值,默认为0-1 mySlider.value =0.5; //设置滑块值是否连续变化(默认为YES) mySlider.continuous= YES; //设置滑块最左端显示的图片 mySlider.minimumValueImage = [UIImage imageNamed:@""]; //设置滑块最右端显示的图片 mySlider.maximumValueImage = [UIImage imageNamed:@""]; //设置滑块左边(小于部分)线条的颜色 mySlider.minimumTrackTintColor = [UIColor blueColor]; //设置滑块右边(大于部分)线条的颜色 mySlider.maximumTrackTintColor = [UIColor greenColor]; //设置滑块颜色(影响已划过一端的颜色) mySlider.thumbTintColor = [UIColor grayColor]; //加入视图 [self.view addSubview:mySlider]; //添加点击事件 [mySlider addTarget:self action:@selector(sliderAction:) forControlEvents:UIControlEventValueChanged];
二、UIProgressView
//初始化 progressView = [[UIProgressView alloc] initWithProgressViewStyle:UIProgressViewStyleDefault]; //加入视图 [self.view addSubview:progressView]; //设置位置,尺寸 progressView.frame = (CGRect){20,100,200,50}; //设置进度条颜色 progressView.trackTintColor = [UIColor blueColor]; //设置进度默认值,这个相当于百分比,范围在0~1之间,不可以设置最大最小值 progressView.progress = 0.1; //设置进度条上进度的颜色 progressView.progressTintColor = [UIColor yellowColor]; //设置进度条的背景图片 progressView.trackImage = [UIImage imageNamed:@""]; //设置进度条上进度的背景图片 progressView.progressImage = [UIImage imageNamed:@""]; //设置进度值并动画显示 [progressView setProgress:0.7 animated:YES];
如图:
三、UISwich
UISwitch 的作用是给用户提供开关,在系统的设置界面很常见,控件也很简单。
常见属性:
1、onTintColor
开关开启状态时的颜色
2、tintColor
开关风格颜色
3、thumbTintColor
开关按钮颜色
4、BOOL on
开关的状态
1 //初始化 2 swicthView = [[UISwitch alloc] initWithFrame:(CGRect){50,50,100,30}]; 3 swicthView.on = YES; 4 //设置开关开启状态时的颜色 5 swicthView.onTintColor = [UIColor yellowColor]; 6 //设置开关风格颜色 7 swicthView.tintColor = [UIColor blueColor]; 8 //设置开关按钮颜色 9 swicthView.thumbTintColor = [UIColor purpleColor]; 10 //设置开关开启状态时的图片 11 swicthView.onImage = [UIImage imageNamed:@"pic1"]; 12 //设置开关关闭状态时的图片 13 swicthView.offImage = [UIImage imageNamed:@"pic2"]; 14 //加入视图 15 [self.view addSubview:swicthView];
添加监听事件:
1 [swicthView addTarget:self action:@selector(swicthAction:) forControlEvents:UIControlEventValueChanged]; 2 3 - (void)swicthAction:(UISwitch *)mySwicth{ 4 UILabel *lastLabel = (UILabel*)[self.view viewWithTag:100]; 5 [lastLabel removeFromSuperview]; 6 7 UISwitch *switchButton = mySwicth; 8 BOOL isButtonOn = [switchButton isOn]; 9 10 UILabel *switchLabel = [[UILabel alloc] initWithFrame:(CGRect){70,100,100,30}]; 11 switchLabel.font = [UIFont systemFontOfSize:25]; 12 switchLabel.tag = 100; 13 [self.view addSubview:switchLabel]; 14 if (isButtonOn) { 15 switchLabel.text = @"是"; 16 }else 17 switchLabel.text = @"否"; 18 }