iOS 借助stretchableImageWithLeftCapWidth方法对UISlider画圆角

公司有一个需求 通过滑动条控制设备 滑动条要求带圆角具体需求如下:

iOS 借助stretchableImageWithLeftCapWidth方法对UISlider画圆角_第1张图片
带圆角滑动条

右侧的圆角比较简单 可通过一张带圆角的背景图模拟滑动条的圆角 然后滑动条右边设置为透明即可,左边部分 由于滑条长度不确定 没法直接切对应的图片只能自己想办法处理。


滑动条背景图

后来发现滑动条设置完左右的图片后,在滑动过程中是对图片进行自动拉伸的,没有圆角且为纯色的情况下直接设置图片是没有任何问题的。

但是遇到圆角的需求以后 圆角会随着图片被拉伸,达不到理想效果:
iOS 借助stretchableImageWithLeftCapWidth方法对UISlider画圆角_第2张图片
被拉伸后的圆角效果

后来找到这个方法:
- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight 

这是UIImage的一个实例函数,用image的实例调用,并返回处理后的新image实例。它的功能是创建一个内容可拉伸,而边角不拉伸的图片,需要两个参数,第一个参数是左边不拉伸区域的宽度,第二个参数是上面不拉伸的高度。
根据设置的宽度和高度,将接下来的一个像素进行左右扩展和上下拉伸。

可拉伸的范围都是距离leftCapWidth后的1竖排像素,和距离topCapHeight后的1横排像素。

参数的意义是,如果参数指定8,0。那么,图片左边8个像素,上边0个像素。不会被拉伸,x坐标为9和一个像素会被横向复制,y坐标为1的一个像素会被纵向复制。

只是对一个像素进行复制到一定宽度。而图像后面的剩余像素也不会被拉伸。

使用此方法完美解决问题。
全部的代码实现如下:

UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake(90, 12 + 60 * i, iPhoneWidth - 200, 15)];
        UIView *sliderBgV = [[UIImageView alloc] initWithFrame:CGRectMake(92, 12 + 60 * i, iPhoneWidth - 202, 15)];
        sliderBgV.backgroundColor = kColor_themeWithAlpha;
        sliderBgV.layer.cornerRadius = 7.5;
        sliderBgV.layer.masksToBounds = YES;
        sliderBgV.layer.borderColor = WhiteColor.CGColor;
        sliderBgV.layer.borderWidth = 0.5;
        sliderBgV.userInteractionEnabled = YES;
        [self.view addSubview:sliderBgV];
        //设置已滑动位置背景图片
        UIImage *image = [UIImage imageNamed:@"7-5"];
        //设置左边的圆角不被拉伸
        UIImage *image1 = [image stretchableImageWithLeftCapWidth:7.5 topCapHeight:0];
        [slider setMinimumTrackImage:image1 forState:UIControlStateNormal];
        //设置未滑动位置背景图
        [slider setMaximumTrackImage:[UIImage imageWithColor:ClearColor size:slider.size] forState:UIControlStateNormal];
        //设置滑块图标图片
        [slider setThumbImage:[UIImage imageNamed:@"滑动条白色小圆点"] forState:UIControlStateNormal];
        //设置点击滑块状态图标
        [slider setThumbImage:[UIImage imageNamed:@"滑动条白色小圆点"] forState:UIControlStateHighlighted];
        //设置起始位置
        slider.value=0.00;
        //设置最小数
        slider.minimumValue=0;
        //设置最大数
        slider.maximumValue=100;
//        slider.minimumTrackTintColor = WhiteColor;
//        slider.maximumTrackTintColor = kColor_themeWithAlpha;
        slider.tag = 100 + i;
        //设置委托事件
        [slider addTarget:self action:@selector(alphaSliderMoved:) forControlEvents:UIControlEventValueChanged];
        [self.view addSubview:slider];

附上参考链接

你可能感兴趣的:(iOS 借助stretchableImageWithLeftCapWidth方法对UISlider画圆角)