2023年7月13日发(作者：)

UISlider⾃定义、分段式滑动最近⼜在开发⼀个电⼦书阅读器，设计师设计的UI很美观漂亮，但是⽆奈系统⾃带的滑动进度控制器太丑，不好看，不得不进⾏⼆次封装处理达到设计师的要求!下⾯就是系统⾃带的UI展⽰，可以看出很单调，难看！也许是苹果的设计极简主义。奈何对于产品⽽⾔，这样的展⽰太不符合要求，以下将对本次的开发做以记录有兴趣的同学可以参考研究。先看看实现的效果1、2、3！iconSize()是⼀个内联函数，其实现⽬的是在不同设备上输出不同的⾼度⼤⼩，⽐如⼀个⼩图标在320X640的上⼤⼩为34，⽽在1242X2208的设备上显⽰要求是略⼤⼀些的值。内部的具体值你根据你的习惯调整即可CG_INLINE CGFloat iconSize(CGFloat size){ CGFloat ratio = [UIScreen mainScreen].scale; if (ratio == 1) { return size; } else { return size+ratio*1.5; }}weakify、strongify等宏定义函数就不⼀⼀细说了，为了的是避免block的循环引⽤，⽂章中出现的⼀些封装等，可以参考以下⽂章：3、UIButton的点击事件通过block回调(addTargetActionBlock)，封装在NSExtentionSloter.h⽂件中，因为部分内容在其他⽂章中已经提及，这⾥就不再单独拉出来了。1、圆⾓背景及进度指⽰器调整，注意整个进度条是有个⿊⾊的背景的，注意细看哈。参考代码： CGRect rt = CGRectMake(20, 0, -40, iconSize(54)); UIView *tpView = [[UIView alloc] initWithFrame:rt]; [ addSubview:tpView]; [tpView release];

weakify(self) rt = CGRectMake(0, (iconSize(54)-iconSize(24))/2, iconSize(24), iconSize(24)); UIImage *image = [UIImage getImageInMainBundle:@"lArrow"]; UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom]; [btn setFrame:rt]; [btn setBackgroundImage:image forState:UIControlStateNormal]; [btn addTargetActionBlock:^(UIButton *aButton) {

}]; [tpView addSubview:btn];

.x += +20; = - 2*.x; .y = 10; = iconSize(54)-20;

UIView *briew = [[UIView alloc] initWithFrame:rt]; [ setMasksToBounds:YES]; [ setCornerRadius:/2]; [briew setTag:9000]; [briew setBackgroundColor:RGB(217, 205, 184)];

CGFloat icsize = -14; CGFloat x = 0; rt = CGRectMake(x, 0, icsize, icsize); UIImageView *icView = [[UIImageView alloc] initWithFrame:rt]; [briew addSubview:icView]; [icView release];

.x = -x-icsize; icView = [[UIImageView alloc] initWithFrame:rt]; [briew addSubview:icView]; [icView release];

UISlider *slider = [[UISlider alloc] initWithFrame:]; /// 添加Slider [slider setTag:90001]; [briew addSubview:slider];

mValue = 1.0; mValue = ; [slider setContinuous:NO]; mTrackTintColor = RGBA(0,0,0,0); // maximumTrackTintColor: ⼤于滑块当前值滑块条的颜⾊，默认为⽩⾊ mTrackTintColor = RGBA(0,0,0,0); // thumbTintColor : 当前滑块的颜⾊，默认为⽩⾊ intColor = RGBA(70, 70, 70,0.65); [slider addTarget:self action:@selector(sliderReaderValueDidChanged:) forControlEvents:UIControlEventValueChanged]; [slider release];

[tpView addSubview:briew]; [briew release];

rt = CGRectMake(-iconSize(24), (iconSize(54)-iconSize(24))/2, iconSize(24), iconSize(24)); image = [UIImage getImageInMainBundle:@"rightArrow"]; btn = [UIButton buttonWithType:UIButtonTypeCustom]; [btn setFrame:rt]; [btn setBackgroundImage:image forState:UIControlStateNormal]; [btn addTargetActionBlock:^(UIButton *aButton) {

}]; [tpView addSubview:btn];2、在1的基础上，增加了左右两个icon参考代码： CGFloat iht = iconSize(52); CGRect rt = CGRectMake(0, deviceHeight, deviceWidth, iht); view = [[UIView alloc] initWithFrame:rt]; [view setTag:300]; [view setUserInteractionEnabled:YES]; [ addSubview:view]; [view release];

rt = CGRectMake(20, 0, 60, iconSize(52)); UILabel *label = [[UILabel alloc] initWithFrame:rt]; [label setNumberOfLines:0]; [label setBackgroundColor:[UIColor clearColor]]; [label setTextColor:RGB(70, 70, 70)]; [label setTag:10000]; [label setFont:UINormalFont(12)]; [label setTextAlignment:NSTextAlignmentLeft]; [label setText:@"亮度"]; [label setLineBreakMode:NSLineBreakByTruncatingTail]; [view addSubview:label]; [label release];

.x += ; .y += 10; -= 20; = ( - .x - 20); UIView *briew = [[UIView alloc] initWithFrame:rt]; [ setMasksToBounds:YES]; [ setCornerRadius:/2]; [briew setTag:8000]; [briew setBackgroundColor:RGB(217, 205, 184)];

//左图标 CGFloat icsize = -14; CGFloat x = /6; rt = CGRectMake(x, 7, icsize, icsize); UIImageView *icView = [[UIImageView alloc] initWithFrame:rt]; [icView setImage:[UIImage getImageInMainBundle:@"brightLess"]]; [briew addSubview:icView]; [icView release];

//右图标 .x = -x-icsize; icView = [[UIImageView alloc] initWithFrame:rt]; [icView setImage:[UIImage getImageInMainBundle:@"brightMore"]]; [briew addSubview:icView]; [icView release];

CGFloat value = [[NSUserDefaults standardUserDefaults] floatForKey:@"setBrightnessKey"]; UISlider *slider = [[UISlider alloc] initWithFrame:]; /// 添加Slider [slider setTag:80001]; [briew addSubview:slider]; mValue = 0.0; mValue = 1.0; = value;

// continuous : 如果设置YES，在拖动滑块的任何时候，滑块的值都会改变。默认设置为YES [slider setContinuous:YES]; mTrackTintColor = RGBA(0,0,0,0); mTrackTintColor = RGBA(0,0,0,0); intColor = RGBA(70, 70, 70,0.65); [slider addTarget:self action:@selector(sliderValueDidChanged:) forControlEvents:UIControlEventValueChanged]; [slider release];

[view addSubview:briew]; [briew release];3、因为产品中有语速调整功能，即1.X，1.5X等语速设置，所以，不想增加过多的代码，仍然沿⽤扩展此组件，达到分段式控制。整个组件分为5段，当滑动到某⼩段的中间位置时，指⽰器是不可能停留在中间位置的，要求必须处于某个⼩点上。如滑动到70%处，松开⼿指时，指⽰器需要回归到1.5X处。滑动到77%处，松开⼿指时，指⽰器需要回归到1.75X处。参考代码： CGRect rt = CGRectMake(0, deviceHeight, deviceWidth, iconSize(54)); view = [[UIView alloc] initWithFrame:rt]; [view setTag:3001]; [view setUserInteractionEnabled:YES]; [ addSubview:view]; [view release]; fm = CGRectMake(20, 0, -40, iconSize(54)); UIView *twoView = [[UIView alloc] initWithFrame:fm]; [twoView setBackgroundColor:[UIColor clearColor]]; [view addSubview:twoView]; [twoView release];

rt = CGRectMake(0, 0, 60, ); UILabel *label = [[UILabel alloc] initWithFrame:rt]; [label setNumberOfLines:0]; [label setBackgroundColor:[UIColor clearColor]]; [label setTextColor:RGB(70, 70, 70)]; [label setFont:UINormalFont(12)]; [label setTextAlignment:NSTextAlignmentLeft]; [label setText:@"语速"]; [label setLineBreakMode:NSLineBreakByTruncatingTail]; [twoView addSubview:label]; [label release];

.x += ; = - .x; .y = 10; = iconSize(54)-20-NSFontHeight(11);

UIView *briew = [[UIView alloc] initWithFrame:rt]; [briew setBackgroundColor:[UIColor clearColor]]; [twoView addSubview:briew]; [briew release];

NSString *sptext = @"0.75x"; CGFloat sptextWidth = [sptext stringSizeWithFont:UINormalFont(10)].width/2; UIView *lview = [[UIView alloc] initWithFrame:CGRectMake(sptextWidth, (-2)/2, -2*sptextWidth, 2)]; [lview setBackgroundColor:RGB(70, 70, 70)]; [briew addSubview:lview]; [lview release];

NSInteger idex = 0; CGFloat gap = (-2*sptextWidth)/5; UIView *cview = [[UIView alloc] initWithFrame:CGRectMake(sptextWidth+(idex++)*gap-4, (-8)/2, 8, 8)]; [ setMasksToBounds:YES]; [ setCornerRadius:4]; [cview setBackgroundColor:RGB(70, 70, 70)]; [briew addSubview:cview]; [cview release];

cview = [[UIView alloc] initWithFrame:CGRectMake(sptextWidth+(idex++)*gap-4, (-8)/2, 8, 8)]; [ setMasksToBounds:YES]; [ setMasksToBounds:YES]; [ setCornerRadius:4]; [cview setBackgroundColor:RGB(70, 70, 70)]; [briew addSubview:cview]; [cview release];

cview = [[UIView alloc] initWithFrame:CGRectMake(sptextWidth+(idex++)*gap-4, (-8)/2, 8, 8)]; [ setMasksToBounds:YES]; [ setCornerRadius:4]; [cview setBackgroundColor:RGB(70, 70, 70)]; [briew addSubview:cview]; [cview release];

cview = [[UIView alloc] initWithFrame:CGRectMake(sptextWidth+(idex++)*gap-4, (-8)/2, 8, 8)]; [ setMasksToBounds:YES]; [ setCornerRadius:4]; [cview setBackgroundColor:RGB(70, 70, 70)]; [briew addSubview:cview]; [cview release];

cview = [[UIView alloc] initWithFrame:CGRectMake(sptextWidth+(idex++)*gap-4, (-8)/2, 8, 8)]; [ setMasksToBounds:YES]; [ setCornerRadius:4]; [cview setBackgroundColor:RGB(70, 70, 70)]; [briew addSubview:cview]; [cview release];

cview = [[UIView alloc] initWithFrame:CGRectMake(sptextWidth+(idex++)*gap-4, (-8)/2, 8, 8)]; [ setMasksToBounds:YES]; [ setCornerRadius:4]; [cview setBackgroundColor:RGB(70, 70, 70)]; [briew addSubview:cview]; [cview release];

CGRect sfm = CGRectMake(sptextWidth-12, 0, -2*(sptextWidth-12), ); CGFloat value = [[NSUserDefaults standardUserDefaults] floatForKey:@"speedPlayKey"]/10.0; UISlider *slider = [[UISlider alloc] initWithFrame:sfm]; /// 添加Slider //[slider setBackgroundColor:RGBA(0,125,0,0.5)]; [slider setTag:90002]; [briew addSubview:slider];

mValue = 0.0; mValue = 1.0; = value; [slider setContinuous:NO]; mTrackTintColor = RGBA(0,0,0,0); // maximumTrackTintColor: ⼤于滑块当前值滑块条的颜⾊，默认为⽩⾊ mTrackTintColor = RGBA(0,0,0,0); // thumbTintColor : 当前滑块的颜⾊，默认为⽩⾊

//image = [UIImage combineImage:image InSize:CGSizeMake(24, 24)]; //intColor = RGBA(70, 70, 70,0.65); [slider setThumbImage:image forState:UIControlStateNormal];

[slider addTarget:self action:@selector(sliderSpeedValueDidChanged:) forControlEvents:UIControlEventValueChanged]; [slider release];

idex = 0; [spView setBackgroundColor:[UIColor clearColor]]; [twoView addSubview:spView]; [spView release];

fm = CGRectMake(0, 0, 2*sptextWidth, ); UIImage *image = [UIImage imageWithStrokeColor:[UIColor clearColor] fillColor:RGBA(70, 70, 70,0.65) size:CGSizeMake(12, 12) borderWidth:0 corner:6 UIView *spView = [[UIView alloc] initWithFrame:CGRectMake(.x, .y+, , N fm = CGRectMake(0, 0, 2*sptextWidth, ); label = [[UILabel alloc] initWithFrame:fm]; [label setNumberOfLines:0]; [label setBackgroundColor:[UIColor clearColor]]; [label setTextColor:RGB(70, 70, 70)]; [label setFont:UINormalFont(10)]; [label setTextAlignment:NSTextAlignmentCenter]; [label setText:@"0.75x"]; [label setLineBreakMode:NSLineBreakByTruncatingTail]; [spView addSubview:label]; [label release];

idex++; .x = idex*gap; label = [[UILabel alloc] initWithFrame:fm]; [label setNumberOfLines:0]; [label setBackgroundColor:[UIColor clearColor]]; [label setTextColor:RGB(70, 70, 70)]; [label setFont:UINormalFont(11)]; [label setTextAlignment:NSTextAlignmentCenter]; [label setText:@"1.0x"]; [label setLineBreakMode:NSLineBreakByTruncatingTail]; [spView addSubview:label]; [label release];

idex++; .x = idex*gap; label = [[UILabel alloc] initWithFrame:fm]; [label setNumberOfLines:0]; [label setBackgroundColor:[UIColor clearColor]]; [label setTextColor:RGB(70, 70, 70)]; [label setFont:UINormalFont(11)]; [label setTextAlignment:NSTextAlignmentCenter]; [label setText:@"1.25x"]; [label setLineBreakMode:NSLineBreakByTruncatingTail]; [spView addSubview:label]; [label release];

idex++; .x = idex*gap; label = [[UILabel alloc] initWithFrame:fm]; [label setNumberOfLines:0]; [label setBackgroundColor:[UIColor clearColor]]; [label setTextColor:RGB(70, 70, 70)]; [label setFont:UINormalFont(11)]; [label setTextAlignment:NSTextAlignmentCenter]; [label setText:@"1.5x"]; [label setLineBreakMode:NSLineBreakByTruncatingTail]; [spView addSubview:label]; [label release];

idex++; .x = idex*gap; label = [[UILabel alloc] initWithFrame:fm]; [label setNumberOfLines:0]; [label setBackgroundColor:[UIColor clearColor]]; [label setTextColor:RGB(70, 70, 70)]; [label setFont:UINormalFont(11)]; [label setTextAlignment:NSTextAlignmentCenter]; [label setText:@"1.75x"]; [label setLineBreakMode:NSLineBreakByTruncatingTail]; [spView addSubview:label]; [label release];

idex++; .x = idex*gap; .x = idex*gap; label = [[UILabel alloc] initWithFrame:fm]; [label setNumberOfLines:0]; [label setBackgroundColor:[UIColor clearColor]]; [label setTextColor:RGB(70, 70, 70)]; [label setFont:UINormalFont(11)]; [label setTextAlignment:NSTextAlignmentCenter]; [label setText:@"2.0x"]; [label setLineBreakMode:NSLineBreakByTruncatingTail]; [spView addSubview:label]; [label release];滑块的事件处理：这⾥才是核⼼，你⾃⼰阅读理解！这⾥就不强⾏给你灌技能了。- (void)sliderSpeedValueDidChanged:(UISlider *)sender{ CGFloat value = *10; NSInteger step = roundf(value/2.0); step *= 2; [sender setValue:step/10.0 animated:YES];}