[英]Adding UIImage's as “Tick Marks” to UISlider
预先总结一下我的问题:我试图根据仅了解UISlider的持续时间,并有一系列的时间循环遍历,从而将图像放置在滑块上的相应位置。
我一直在阅读UISlider上的Apple文档,并且似乎没有基于本机浮点数在UISlider上添加“刻度线”的本地方法。 “刻度线”是指滑块上的线条,例如用于在洗涤器上放置广告的线条。 这是可视化效果:
现在,我有一个充满浮点数的数组; 我将用来根据UISlider的值删除刻度线的浮动对象。 数组中的float值每次都会不同。 我想遍历UISlider的.value属性,相应地删除UIImages。 UIImage是仅由我创建的png资产的刻度线。 我无法弄清楚的是循环遍历UISlider的.value属性并根据UISlider的未来位置放置UIImage的逻辑。 数组中的float值每次都会不同,因此我不能将其静态放置。 有人知道从哪里开始吗? 我对Objective-C编程还是有点陌生。
我知道有可能利用检索屏幕上滑块的起始X坐标,如下所示:
- (float)xPositionFromSliderValue:(UISlider *)aSlider;
{
float sliderRange = aSlider.frame.size.width - aSlider.currentThumbImage.size.width;
float sliderOrigin = aSlider.frame.origin.x + (aSlider.currentThumbImage.size.width / 2.0);
float sliderValueToPixels = (((aSlider.value-aSlider.minimumValue)/(aSlider.maximumValue-aSlider.minimumValue)) * sliderRange) + sliderOrigin);
return sliderValueToPixels;
}
也许我可以在for循环中添加一个计算,以根据该图像放置图像。 我只是不太确定从哪里开始...
提供了trackRectForBounds和thumbRectForBounds方法用于对UISlider进行子类化,但是您可以直接调用它们,它们会将刻度中心放在前面。
- (float)sliderThumbCenter:(UISlider *)slider forValue:(float)value{
CGRect trackRect = [slider trackRectForBounds:slider.bounds];
CGRect thumbRect = [slider thumbRectForBounds:slider.bounds trackRect:trackRect value:value];
CGFloat centerThumb = CGRectGetMidX(thumbRect);
return centerThumb;
}
而且,使用自定义视图绘制轨迹比绘制图像视图更容易,然后只需将滑块放在其顶部并隐藏轨迹即可。 只需使滑块框等于TickView的边界即可。 我真的认为UISlider子类会更好,但这可行!
@interface TickView : UIView
@property UIColor *tickColor;
@property int tickCount;
@property CGFloat tickHeight;
@property (weak) UISlider *slider;
@property float *ticks;
-(void)setTicks:(float *)ticks count:(int)tickCount;
@end
@implementation TickView{
__weak UISlider *_slider;
}
-(instancetype)initWithFrame:(CGRect)frame{
self = [super initWithFrame:frame];
if (self) {
self.tickColor = [UIColor grayColor];
self.backgroundColor = [UIColor clearColor];
self.tickCount = 7;
self.ticks = malloc(sizeof(float) * self.tickCount);
self.tickHeight = 10;
}
return self;
}
- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetStrokeColorWithColor(context, self.tickColor.CGColor);
CGContextBeginPath(context);
CGFloat centerY = rect.size.height / 2;
CGContextMoveToPoint(context, 0, centerY);
CGContextAddLineToPoint(context, rect.size.width, centerY);
CGFloat tickTop = centerY - self.tickHeight / 2;
CGFloat tickBottom = centerY + self.tickHeight / 2;
CGFloat tickX = 0;
if (self.slider) {
for (int i = 0; i < self.tickCount; i++) {
tickX = [self sliderThumbCenter:self.slider forValue:self.ticks[i]];
CGContextMoveToPoint(context, tickX, tickTop);
CGContextAddLineToPoint(context, tickX, tickBottom);
}
}
else{
CGFloat tickSpacing = rect.size.width / (self.tickCount - 1);
for (int i = 0; i < self.tickCount; i++) {
CGContextMoveToPoint(context, tickX, tickTop);
CGContextAddLineToPoint(context, tickX, tickBottom);
tickX += tickSpacing;
}
}
CGContextStrokePath(context);
}
-(void)setTicks:(float *)ticks count:(int)tickCount{
free(_ticks);
_ticks = malloc(sizeof(float) * tickCount);
memcpy(_ticks, ticks, sizeof(float) * tickCount);
_tickCount = tickCount;
[self setNeedsDisplay];
}
- (float)sliderThumbCenter:(UISlider *)slider forValue:(float)value{
CGRect trackRect = [slider trackRectForBounds:slider.bounds];
CGRect thumbRect = [slider thumbRectForBounds:slider.bounds trackRect:trackRect value:value];
CGFloat centerThumb = CGRectGetMidX(thumbRect);
return centerThumb;
}
-(void)setSlider:(UISlider *)slider{
_slider = slider;
}
-(UISlider *)slider{
return _slider;
}
-(void)dealloc{
free(_ticks);
}
@end
我认为您很难定位刻度线。 但是,如果UISlider的父视图是“视图”,则可以添加一个子视图,如下所示:
[view addSubView:myTickView];
添加的子视图的位置由其frame属性确定,该属性位于父视图的坐标空间中。 要删除视图,请执行以下操作:
[myTickView removeFromSuperView];
您也可以遍历刻度视图并更改其中的帧,但是这些更改将被动画化,因此,除非您关闭动画,否则刻度将显示为滑动。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.