寫在前面
弄了下個人站...防止內(nèi)容再次被鎖定...所有東西都在這里面
welcome~
個人博客
效果
- 自定義一個功能簡單的分段的滑桿 可顯示分段名
- 為了顯示效果嫂易，我們將滑塊和節(jié)點都設置為不規(guī)則
- 這里只實現(xiàn)了分段的slider，未分段的沒有實現(xiàn)祭钉，有興趣的可以定義另一種類型做個判斷修改下
效果.gif
需求分析
我們需要的是一個可分段slider
主要元素有
- 滑桿視圖
- 滑桿上的節(jié)點
- 節(jié)點名稱
- 當前滑塊
由于要設定節(jié)點和滑塊的frame剔氏，size又是可變的酗宋，最死腦細胞的就是滑塊和節(jié)點frame的計算了Ｍ铡Ｆ沸铡！箫措！
代碼部分
查看UISlider控件發(fā)現(xiàn)這個類是繼承自UIControl腹备，那么就自定義一個UIControl來實現(xiàn)UISlider沒有的效果。
公開的變量中都是一些通用的參數(shù)斤蔓，無非就是顏色植酥、圖片之類的，我這里使用比較少弦牡，有興趣的可以自行添加友驮。
- 公開變量
#import <UIKit/UIKit.h>
@interface CustomSlider : UIControl
//當前值
@property (nonatomic,assign)NSInteger value;
//選擇點個數(shù) >2
@property (nonatomic,assign)NSInteger numberOfPart;
//當前滑塊圖片
@property (nonatomic,strong)UIImage *thumbImage;
//當前滑塊尺寸
@property (nonatomic,assign)CGSize thumbSize;
//分段點尺寸
@property (nonatomic,assign)CGSize partSize;
//slider height
@property (nonatomic,assign)CGFloat sliderBarHeight;
//分段名
@property (nonatomic,strong)NSArray<NSString*> *partNameArray;
//分段名偏移位置 初始在slider上
@property (nonatomic,assign)CGPoint partNameOffset;
@end
- 設置非公開的全局變量
@interface CustomSlider()
@property(nonatomic,assign)CGRect thumbRect; //滑塊fram
@property(nonatomic,assign)CGRect sliderRect; //sliderFrame
@property(nonatomic,strong)NSMutableArray *partRectArray; //節(jié)點frame數(shù)組
@property(nonatomic,assign)BOOL isFirst; //首次運行
@property(nonatomic,strong)NSDictionary *textAttributesDict;//文本字體信息
@end
- 一些初始化
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
self.partRectArray = [NSMutableArray array];
self.numberOfPart = 2;
self.sliderBarHeight = 20;
self.thumbSize = CGSizeMake(self.sliderBarHeight, self.sliderBarHeight);
self.partNameOffset = CGPointZero;
self.partSize = self.thumbSize;
}
return self;
}
- 設置一個set方法
//節(jié)點必須>1
- (void)setNumberOfPart:(NSInteger)numberOfPart {
_numberOfPart = numberOfPart > 1 ? numberOfPart: 2;
}
- 設置文本屬性，用于繪制文字
//設置文本屬性
- (NSDictionary*)textAttributesDict {
if (!_textAttributesDict) {
NSMutableDictionary *dict = [NSMutableDictionary dictionary];
dict[NSForegroundColorAttributeName] = [UIColor blackColor]; // 文字顏色
dict[NSFontAttributeName] = [UIFont systemFontOfSize:14]; // 字體
_textAttributesDict = dict;
}
return _textAttributesDict;
}
- 重繪主要是畫帶節(jié)點的slider和滑塊
//重繪
- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
//畫slider
[self loadSliderWithContext:context];
//畫滑塊
[self loadThumWithContext:context];
}
//畫滑塊
- (void)loadThumWithContext:(CGContextRef)context {
//當前滑塊
if (!self.isFirst) {
//滑塊初始化
self.thumbRect = [self.partRectArray[0] CGRectValue];
self.isFirst = YES;
}
//有背景圖則用背景圖 沒有就畫圓
if (self.thumbImage) {
[self.thumbImage drawInRect: self.thumbRect];
} else {
CGContextAddEllipseInRect(context, self.thumbRect);
[[UIColor blueColor] set];
CGContextFillPath(context);
}
}
//畫滑桿內(nèi)容
- (void)loadSliderWithContext:(CGContextRef)context {
//設置滑桿的frame
CGFloat tmp = self.thumbSize.width > self.partSize.width ? self.thumbSize.width : self.partSize.width;
CGFloat tmpHeight = self.thumbSize.height > self.partSize.height ? self.thumbSize.height : self.partSize.height;
CGFloat sliderHeight = self.sliderBarHeight;
CGFloat sliderMargin = sliderHeight/2 + tmp/2;
CGFloat sliderY = CGRectGetHeight(self.frame)/2;
CGFloat sliderWidth = CGRectGetWidth(self.frame) - 2 * sliderMargin - tmp;
self.sliderRect = CGRectMake(sliderMargin + self.partSize.width/2, sliderY-tmpHeight/2, sliderWidth+tmp, tmpHeight);
//畫slider滑桿
CGPoint starPoint = CGPointMake(sliderMargin + tmp/2, sliderY);
CGPoint endPoint = CGPointMake(CGRectGetWidth(self.frame)-sliderMargin- tmp/2, sliderY);
CGContextMoveToPoint(context, starPoint.x, starPoint.y);
CGContextAddLineToPoint(context, endPoint.x, endPoint.y);
CGContextSetLineWidth(context, sliderHeight); // 線的寬度
CGContextSetLineCap(context, kCGLineCapRound); // 起點和重點圓角
CGContextSetStrokeColorWithColor(context, [UIColor greenColor].CGColor);
CGContextStrokePath(context);
//畫分段點
CGFloat partPointWidth = self.partSize.width;
CGFloat partPointHeight = self.partSize.height;
CGFloat y = CGRectGetHeight(self.frame)/2 - self.partSize.height/2;
[self.partRectArray removeAllObjects];
for (int i = 0; i < self.numberOfPart; i++) {
CGFloat x = i * sliderWidth/(self.numberOfPart-1) + starPoint.x-partPointWidth/2 ;
CGContextAddEllipseInRect(context, CGRectMake(x, y, partPointWidth, partPointHeight));
[[UIColor blackColor] set];
CGContextFillPath(context);
//計算滑塊位置
CGRect fram = CGRectMake(x+partPointWidth/2-self.thumbSize.width/2, y+partPointHeight/2-self.thumbSize.height/2, self.thumbSize.width, self.thumbSize.height);
[self.partRectArray addObject:[NSValue valueWithCGRect:fram]];
}
//畫分段點名稱
for (int i = 0; i < self.partNameArray.count; i++) {
NSString *partName = self.partNameArray[i];
CGRect parRect = [self.partRectArray[i] CGRectValue];
//根據(jù)字體屬性 計算出size
CGSize size = [partName sizeWithAttributes:self.textAttributesDict];
CGFloat nameX = parRect.origin.x + parRect.size.width/2 - size.width/2 + self.partNameOffset.x;
CGFloat nameY = parRect.origin.y + self.partNameOffset.y;
CGRect nameFrame = CGRectMake(nameX, nameY, size.width, size.height) ;
[partName drawInRect:nameFrame withAttributes:self.textAttributesDict];
}
}
- 最后設置拖動滑塊和滑塊最后停留的位置
//開始拖動
- (BOOL)beginTrackingWithTouch:(UITouch *)touch withEvent:(nullable UIEvent *)event {
CGPoint point = [touch locationInView:self];
//可滑動范圍
if (!CGRectContainsPoint(self.sliderRect, point)) {
return NO;
}
int index = [self getCurrentXWithOffset:point.x];
self.thumbRect = [self.partRectArray[index] CGRectValue];
[self setNeedsDisplay];
return YES;
}
//持續(xù)拖動
- (BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(nullable UIEvent *)event {
CGPoint point = [touch locationInView:self];
CGFloat thumbImageX = point.x - self.thumbSize.width/2;
self.thumbRect = CGRectMake(thumbImageX, self.thumbRect.origin.y, self.thumbRect.size.width, self.thumbRect.size.height);
[self setNeedsDisplay];
return YES;
}
//拖動結(jié)束
- (void)endTrackingWithTouch:(nullable UITouch *)touch withEvent:(nullable UIEvent *)event {
CGPoint point = [touch locationInView:self];
int index = [self getCurrentXWithOffset:point.x];
self.thumbRect = [self.partRectArray[index] CGRectValue];
[self setNeedsDisplay];
NSLog(@"point = %f",point.x);
//增加控制事件
[self sendActionsForControlEvents:UIControlEventValueChanged];
}
//計算滑到一半時根據(jù)占比選擇對應位置
- (int)getCurrentXWithOffset:(CGFloat)x {
CGFloat tmpX = x - [self.partRectArray[0] CGRectValue].origin.x;
//超出邊界
if (tmpX > [self.partRectArray[self.numberOfPart-1] CGRectValue].origin.x) {
tmpX = [self.partRectArray[self.numberOfPart-1] CGRectValue].origin.x;
}
//計算總長度
CGFloat firstx = [[self.partRectArray firstObject] CGRectValue].origin.x;
CGFloat lastx = [[self.partRectArray lastObject] CGRectValue].origin.x;
CGFloat wid = lastx - firstx;
CGFloat part = wid/(self.numberOfPart-1) ;
//減去滑塊占比
CGFloat per = self.thumbSize.width/2/part;
int count = tmpX / part - per + 0.5;
self.value = count;
return count;
}
寫的思路比較簡單喇伯，就是計算frame很傷喊儡。
滑塊可以設定為圖片拨与。
當然slider背景也可以設置成圖片稻据，這個我沒寫進去，相信也是很好修改的。
