屏幕快照 2017-07-05 下午5.37.48.png
屏幕快照 2017-07-05 下午5.40.42.png
微信或者QQ冶伞，大家都見過類似字體大小選擇，那么字體選擇分段怎么來做呢步氏，微信QQ响禽，可以左右滑動選擇，還可以點擊到哪選擇分段荚醒，我們可以考慮用手勢寫芋类，界面自己畫。
那么今天用UISlider 來做一下這個效果界阁。
首先侯繁，我們先創(chuàng)建一個UISlider
屏幕快照 2017-07-06 下午3.36.11.png
將顏色清除掉
[self.slider setMaximumTrackTintColor:[UIColor clearColor]];
[self.slider setMinimumTrackTintColor:[UIColor clearColor]];
它有分段選擇的分段線和下面的直線，我們可以用貝塞爾來畫這個線條
UIBezierPath *path = [UIBezierPath bezierPath];
使用UIBezierPath創(chuàng)建多邊形---在path下面添加直線條形成多邊形,多邊形是一些簡單的形狀,這些形狀是由一些直線線條組成,我們可以用moveToPoint: 和 addLineToPoint:方法去構(gòu)建泡躯。
方法moveToPoint:設(shè)置我們想要創(chuàng)建形狀的起點贮竟。從這點開始，我們可以用方法addLineToPoint:去創(chuàng)建一個形狀的線段较剃。
我們可以連續(xù)的創(chuàng)建line咕别，每一個line的起點都是先前的終點，終點就是指定的點写穴。
moveToPoint 添加起點位置
[path moveToPoint:CGPointMake(0, 0)];
// lineWith 線條長度
[path addLineToPoint:CGPointMake(0, 6)];
[path addLineToPoint:CGPointMake(lineWith, 6)];
[path addLineToPoint:CGPointMake(lineWith, 0)];
將繪制路徑交于layer 繪制
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.frame = CGRectMake(11, 4, lineWith, 6);
shapeLayer.path = path.CGPath;
shapeLayer.strokeColor = [UIColor grayColor].CGColor;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
[self.slider.layer insertSublayer:shapeLayer atIndex:0];
效果如下：
屏幕快照 2017-07-06 下午3.48.56.png
兩邊的線條和直線有了惰拱，那么還有中間的分段線，怎么來做啊送？其實跟之前繪制的一樣的偿短，其實就是起點加要繪制的形狀的線段
//循環(huán)創(chuàng)建（自己加個循環(huán)就好了） offset 計算每個分段的距離
UIBezierPath *linePath = [UIBezierPath bezierPath];
[linePath moveToPoint:CGPointMake(offset * i , 0)];
[linePath addLineToPoint:CGPointMake(offset * i , 6)];
CAShapeLayer *lineLayer = [CAShapeLayer layer];
lineLayer.path = linePath.CGPath;
lineLayer.strokeColor = [UIColor grayColor].CGColor;
lineLayer.fillColor = [UIColor clearColor].CGColor;
[shapeLayer insertSublayer:lineLayer atIndex:0];
來看效果：
屏幕快照 2017-07-06 下午3.57.10.png
基本上這個線條分段就做好了，下面可以在線條分段上面加label 來展示信息馋没，這里就不介紹怎么加label了昔逗，下面我們來做滑動是怎么分段的
給slider 添加方法監(jiān)聽滑動值得變化
[_slider addTarget:self action:@selector(sliderChangeAction:) forControlEvents:UIControlEventValueChanged];
[_slider addTarget:self action:@selector(sliderAction:) forControlEvents:UIControlEventTouchUpInside];
[_slider addTarget:self action:@selector(sliderAction:) forControlEvents:UIControlEventTouchUpOutside];
在這些方法中做滑動值的變化處理，來達(dá)到滑動分段是整數(shù)的效果
//四舍五入
NSNumberFormatter *formatter = [[NSNumberFormatter alloc] init];
[formatter setPositiveFormat:@"0"];
NSString *value = [formatter stringFromNumber:[NSNumber numberWithFloat:num]];
[_slider setValue:[[value floatValue] animated:YES];
//這里就不貼方法了篷朵，基本計算就是這樣纤子，大家可以寫成方法，slider 添加的監(jiān)聽方法中做處理款票。
滑動的效果基本完成控硼，有滑動，點擊呢艾少？
添加點擊手勢
_tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(actionTapGesture:)];
[_slider addGestureRecognizer:_tapGesture];
在點擊事件里面的處理就跟slider 里面的方法處理基本一樣無非就是獲取點擊的位置判斷位置卡乾，這里就不說了。
ps:另外加了點擊手勢之后缚够，可能有時候會出現(xiàn)閃一下的bug幔妨，原因是滑動會觸發(fā)點擊手勢的方法，那么我們可以在滑動的時候禁止手勢點擊谍椅，松開滑動解開手勢點擊
基本效果完成误堡，大家可以自己選擇封裝等，還有選中的時候?qū)⑦x中的選項放大雏吭，也可隱藏上面的所有標(biāo)題信息锁施，滑動到哪顯示哪個
給大家一個gif的效果：
截圖.gif
有需要demo的 可以留言！
