UIPageViewController with UISlider inside controller - 增加滑块的命中区域答案

【问题标题】：UIPageViewController with UISlider inside controller - increase hit area of sliderUIPageViewController with UISlider inside controller - 增加滑块的命中区域
【发布时间】：2014-12-24 09:35:49
【问题描述】：

我的 PageViewController 中有多个控制器，一个控制器中有几个滑块。现在有一个问题，用户必须准确触摸滑块圆圈（我不确定正确的表达，拇指？-那个移动部分），我想增加反应滑块的区域，而不是整个 PageViewController。我尝试了这些解决方案，但没有帮助：

thumbRectForBounds：

- (CGRect)thumbRectForBounds:(CGRect)bounds trackRect:(CGRect)rect value:(float)value
{
    return CGRectInset ([super thumbRectForBounds:bounds trackRect:rect value:value], 15, 15);
}

增加hitTest区域：

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
    if (CGRectContainsPoint(CGRectInset(self.frame, 200, 200), point) || CGRectContainsPoint(CGRectInset(self.frame, 200, 200), point)) {
         return self;
    }
    return [super hitTest:point withEvent:event];
}

我的自定义滑块类中有这些方法，因为我想重用它。我发现但尚未尝试的最后一件事是在滑块上创建一些对象层，它“采用”手势并禁用 PageViewController 但我不知道该怎么做，我不确定它是否是好的/最佳解决方案。

【问题讨论】：

标签： ios ios7 uigesturerecognizer uislider hittest

【解决方案1】：

我不是 UISlider 组件的忠实拥护者，因为正如您所注意到的，增加实际滑块的点击区域并非易事。我会敦促您复制 UISlider，而不是使用平移手势以获得更好的用户体验：

我。使用带有滑块图像的单独 UIImageView 创建滑块背景。 ii.创建 PanGesture：

UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:);
[imageView addGestureRecognizer:pan];

三。实现handlePan方法：

- (IBAction)handlePan:(UIPanGestureRecognizer *)recognizer {

    //pan (slide) begins
    CGPoint translation = [recognizer locationInView:self.view];
    translation.y = self.slideImage.center.y;
    self.slideImage.center = translation;

    if(recognizer.state == UIGestureRecognizerStateEnded) {
        LTDebugLog(@"\n\n PAN, with spot: %f\n\n", self.slideImage.center.x);
        //do something after user is done sliding
    }
}

这种方法的最大好处是您将获得更好的用户体验，因为您可以将响应式 UIImageView 设置为任意大小。

或者，您可以子类化 UISlider 并增加那里的点击空间，尽管根据我的经验，这会产生好坏参半的结果。

希望对你有帮助

【讨论】：

【解决方案2】：

在您的 CustomSlider 类中覆盖 thumbRectForBounds 方法：

只需根据需要返回 rect 值：

- (CGRect)thumbRectForBounds:(CGRect)bounds trackRect:(CGRect)rect value:(float)value
{
    return CGRectMake (bounds.origin.x, bounds.origin.y, yourWidthValue, yourHeightValue );
}

根据您的要求更改yourWidthValue 和yourHeightValue。然后在使用时

创建如下对象：

CustomSlider *slider  = [[CustomSlider alloc] initWithFrame:CGRectMake(0, 0, 300, 20)];
[slider thumbRectForBounds: slider.bounds trackRect:slider.frame value:15.f]; // change values as per your requirements.

希望这会有所帮助。

【讨论】：

这就是我在第一个方法中尝试做的。我只是使用了 CGRectInset，因为它在这方面效果更好。但是当我在示例中将值设置为大于 15 时，拇指就会丢失。而且这个方法是重写的，所以在控制初始化之后调用它没有帮助，对吧？它没有设置任何东西，你只是不使用返回的 CGRect。

【解决方案3】：

创建一个具有较大空白边距的自定义拇指图像并将其设置在滑块上，如下所示：

[theSlider setThumbImage:[UIImage imageNamed:@"slider_thumb_with_margins"] forState:UIControlStateNormal];

要制作图像，请使用多种 UIKit 艺术品提取器中的任何一种获取系统拇指图像的副本（只需在网络上搜索一个）。在 Photoshop 中打开拇指图像并将画布大小增加两倍您要添加的边距。确保更改画布大小而不是图像大小，因为图像大小会拉伸图像以填充新大小。这将在拇指周围放置空白空间，这将成为命中测试区域的一部分，但由于它是透明的，因此不会改变滑块的外观。

【讨论】：