自定义UISlider – 增加“热点”大小

我有一个自定义的UISlider,对于大手指的人来说,由于“拇指图像”的大小,抓住并滑动是相对困难的。 有没有办法增加可点击/可拖动区域的大小而不改变图像的大小?

这里是我有创build自定义滑块的代码,如果有帮助的话:

[slider setMaximumTrackImage:[[UIImage imageNamed:@"max.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 20, 0, 20)] forState:UIControlStateNormal]; [slider setMinimumTrackImage:[[UIImage imageNamed:@"min.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 20, 0, 20)] forState:UIControlStateNormal]; [slider setThumbImage:[UIImage imageNamed:@"thumb.png"] forState:UIControlStateNormal]; 

我结束了UISlider的子类化并覆盖了这个方法:

 - (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent*)event { CGRect bounds = self.bounds; bounds = CGRectInset(bounds, -10, -15); return CGRectContainsPoint(bounds, point); } 

这将可触摸区域扩展了左右10个像素以及顶部和底部的15个像素。

这个解决scheme适用于iOS 8:

 class ExtUISlider: UISlider { var thumbTouchSize : CGSize = CGSizeMake(50, 50) override func pointInside(point: CGPoint, withEvent event: UIEvent?) -> Bool { let bounds = CGRectInset(self.bounds, -thumbTouchSize.width, -thumbTouchSize.height); return CGRectContainsPoint(bounds, point); } override func beginTrackingWithTouch(touch: UITouch, withEvent event: UIEvent) -> Bool { let thumbPercent = (value - minimumValue) / (maximumValue - minimumValue) let thumbSize = thumbImageForState(UIControlState.Normal)!.size.height let thumbPos = CGFloat(thumbSize) + (CGFloat(thumbPercent) * (CGFloat(bounds.size.width) - (2 * CGFloat(thumbSize)))) let touchPoint = touch.locationInView(self) return (touchPoint.x >= (thumbPos - thumbTouchSize.width) && touchPoint.x <= (thumbPos + thumbTouchSize.width)) } } 

积分转到这个职位: http : //www.mpatric.com/2009-04-15-more-responsive-sliders-on-the-iphone

Swift 3

UISlider子类增加了触摸面积

 class CustomSlider: UISlider { private var thumbTouchSize = CGSize(width: 40, height: 40) override func point(inside point: CGPoint, with event: UIEvent?) -> Bool { let increasedBounds = bounds.insetBy(dx: -thumbTouchSize.width, dy: -thumbTouchSize.height) let containsPoint = increasedBounds.contains(point) return containsPoint } override func beginTracking(_ touch: UITouch, with event: UIEvent?) -> Bool { let percentage = CGFloat((value - minimumValue) / (maximumValue - minimumValue)) let thumbSizeHeight = thumbRect(forBounds: bounds, trackRect:trackRect(forBounds: bounds), value:0).size.height let thumbPosition = thumbSizeHeight + (percentage * (bounds.size.width - (2 * thumbSizeHeight))) let touchLocation = touch.location(in: self) return touchLocation.x <= (thumbPosition + thumbTouchSize.width) && touchLocation.x >= (thumbPosition - thumbTouchSize.width) } } 

我最终使用这个,它对我来说工作得很好。

发表这个答案,这样可能对某人有所帮助。

 import UIKit class CustomSlider: UISlider { /* // Only override draw() if you perform custom drawing. // An empty implementation adversely affects performance during animation. override func draw(_ rect: CGRect) { // Drawing code } */ // Increase slider height override func trackRect(forBounds bounds: CGRect) -> CGRect { let customBounds: CGRect = CGRect(origin: bounds.origin, size: CGSize(width: bounds.size.width, height: 5.0)) return customBounds } override func thumbRect(forBounds bounds: CGRect, trackRect rect: CGRect, value: Float) -> CGRect { return super.thumbRect( forBounds: bounds, trackRect: rect, value: value) } // Increase Thumb hot spot clickable area override func point(inside point: CGPoint, with event: UIEvent?) -> Bool { var bounds: CGRect = self.bounds bounds = bounds.insetBy(dx: -10, dy: -10); return bounds.contains(point); } override func awakeFromNib() { // Configure Volume slider let thumbImageNormal = UIImage.init(named:"thumb") self.setThumbImage(thumbImageNormal, for: .normal) super.awakeFromNib() } } 

此外,你可以只是increese图像的大小,这将导致滑块拇指大小的增加。

  1. 如果您需要左图像大小不要太大,但调整滑块大小只需在图像内容周围添加透明空间。 在这里输入图像说明

  2. 如果您在UITableViewCell中使用滑块,则问题也是该滑块前面的tableview手柄手势。 要改变这个使用下面的解决scheme: https : //stackoverflow.com/a/37751635/2150954我认为它不是很难将他的代码翻译为客观C.

调整帧大小并将图像alignment更改为所需的图像。 您可以使其alignment居中,左,右,顶部或底部。 这样做:

 CGRect newFrame = sliderHandle.frame; CGRectSetWidth(newFrame, 80); CGRectSetHeight(newFrame, 80); [sliderHandle setFrame:newFrame]; [sliderHandle setContentMode:UIViewContentModeCenter]; 

所以你的触摸框架会更大,图像尺寸将保持不变。