iOS滑动条UISlider的使用方法

由于项目的需求,学习使用了一下滑动条UISlider的使用方法,这里记录一下。

首先看我们实现出来的效果:

image

如上图所示,在图中有四个内容:滑动条本身、最小值label、最大值label、当前值label。

随着滑动条的左右滑动,中间的当前值label会跟着做出变化。

现在看看怎么实现的:

1.首先我们要创建滑动条,这是肯定的,创建代码如下:

// 滑动条slider  
UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake((SCREENWIDTH - 150) / 2, 200, 150, 20)];  
[self.view addSubview:slider];  

我是用纯代码创建的,当然也可以直接在storyboard中拖一个到界面上,那样其实很简单,就不说了。

宽度我用了一个自定义的屏幕宽度常量。这里要注意的一点是,滑动条的高度,如果设为0,其实还是会正常显示。但是!一旦高度设为0,滑动条将不能左右滑动!我就入过这个坑。。。找了半天没找到原因,最终发现是这里的问题。

当然我们还仅仅定义了滑动条的位置,还有很多属性没有定义,我们接着设置:

    // 滑动条slider  
    UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake((SCREENWIDTH - 150) / 2, 200, 150, 20)];  
    slider.minimumValue = 9;// 设置最小值  
    slider.maximumValue = 11;// 设置最大值  
    slider.value = (slider.minimumValue + slider.maximumValue) / 2;// 设置初始值  
    slider.continuous = YES;// 设置可连续变化  
//    slider.minimumTrackTintColor = [UIColor greenColor]; //滑轮左边颜色,如果设置了左边的图片就不会显示  
//    slider.maximumTrackTintColor = [UIColor redColor]; //滑轮右边颜色,如果设置了右边的图片就不会显示  
//    slider.thumbTintColor = [UIColor redColor];//设置了滑轮的颜色,如果设置了滑轮的样式图片就不会显示  
    [slider addTarget:self action:@selector(sliderValueChanged:) forControlEvents:UIControlEventValueChanged];// 针对值变化添加响应方法  
    [self.view addSubview:slider];  

如上所示,在代码中,我们设置了最大值、最小值、当前值。也可以改变滑动条左边、右边一集滑块本身的颜色,不过我们这里采用默认的设置,更改方法代码中也写了。除了可以设置颜色外,还可以设置最大最小值处的图片。

现在我们注意一个设置:slider.continuous = YES; 这个设置有什么用呢?设为YES后,我们才能在拖动滑块的过程中持续获取其值变更事件,如果是NO,则只有在滑动停止时才会获取变更事件。

这个变更事件又是什么呢?我们只是对一个按钮设置响应方法的时候,设置的响应事件是Touch up inside。在滑动条中,相对应的就是ValueChanged。所以我们设置响应方法时,也是针对的这个方法。

2.滑动条创建完毕后,接着创建那三个label:

创建labelde代码很常见,这里就直接贴出来了:

// 当前值label  
self.valueLabel = [[UILabel alloc] initWithFrame:CGRectMake((SCREENWIDTH - 100) / 2, slider.frame.origin.y + 30, 100, 20)];  
self.valueLabel.textAlignment = NSTextAlignmentCenter;  
self.valueLabel.text = [NSString stringWithFormat:@"%.1f", slider.value];  
[self.view addSubview:self.valueLabel];  
  
// 最小值label  
UILabel *minLabel = [[UILabel alloc] initWithFrame:CGRectMake(slider.frame.origin.x - 35, slider.frame.origin.y, 30, 20)];  
minLabel.textAlignment = NSTextAlignmentRight;  
minLabel.text = [NSString stringWithFormat:@"%.1f", slider.minimumValue];  
[self.view addSubview:minLabel];  
  
// 最大值label  
UILabel *maxLabel = [[UILabel alloc] initWithFrame:CGRectMake(slider.frame.origin.x + slider.frame.size.width + 5, slider.frame.origin.y, 30, 20)];  
maxLabel.textAlignment = NSTextAlignmentLeft;  
maxLabel.text = [NSString stringWithFormat:@"%.1f", slider.maximumValue];  
[self.view addSubview:maxLabel];  

这里值得注意的是,我们label的值并不是直接定义的,而是获取滑动条的最大、最小、当前值,然后取小数点前一位显示的,因为滑动条是连续变化的,其值是浮点型的连续小数,如果不取小数点后的位数,得到的将是没有规律的小数。

3.现在来看拖动滑动条时的响应方法:

我们要做到的是当前值的label显示的内容随着滑动条的滑动而变化,那么只需要在滑动条的响应方法中设置label的显示内容就可以了,注意同样要取小数点前一位:

// slider变动时改变label值  
- (void)sliderValueChanged:(id)sender {  
    UISlider *slider = (UISlider *)sender;  
    self.valueLabel.text = [NSString stringWithFormat:@"%.1f", slider.value];  
}  

因为我们continuous设为了YES,所以显示的当前值会随着拖动实时改变。

以上,就是滑动条的使用方法了。

这是我的示例工程:https://github.com/Cloudox/SliderDemo


查看作者首页

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,254评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,875评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,682评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,896评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,015评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,152评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,208评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,962评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,388评论 1 304
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,700评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,867评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,551评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,186评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,901评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,689评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,757评论 2 351

推荐阅读更多精彩内容