基于平移手势翻译的滚动scrollview

Question

我想知道如何将平移手势 y 翻译转换为相当于滚动视图内容 y 偏移量。

因此，在此我可以通过平移手势翻译滚动我的滚动视图，再现自然滚动视图滚动的相同效果。

let scrollYOffset: CGFloat = panGesture.translation(in: view).y

当我这样做时，它导致滚动非常不稳定，因为 scrollYOffset 值从 0 变为 54，然后在拖动时变为 124。

我想要的是使用平移手势平滑自然地滚动滚动视图。

你可能会问我为什么不使用自然滚动视图及其委托 -

func scrollViewDidScroll(_ scrollView: UIScrollView)

答案是我正在尝试构建一个应用程序，用户可以在其中拖动屏幕上的对象，并且它后面的滚动视图应该滚动那么多。

谁能帮我将平移手势 y 翻译转换为滚动视图 y 内容偏移量。

任何帮助将不胜感激。谢谢。

Answer 1

方法translation: 返回前一个迭代和当前迭代之间的差异，因此您应该将翻译添加到现有结果中，如下所示。

     @objc private func handleGesture(panGestureRecognizer: UIPanGestureRecognizer) {
         switch panGestureRecognizer.state {
         case .begin:
            break
         case .changed:
            let translation = panGestureRecognizer.translation(in: self.view)
            panGestureRecognizer.setTranslation(.zero, in: self.view)

            let newYOffset = currentOffset + translation.y
         case .ended:
            break
         }
     }

Answer 2

有多种方法可以获得“平滑的可拖动视图” --- 但是，为了您的目的，一个可能的选择是使用UISlider：

如果需要，您可以通过设置拇指和轨迹图像来更改滑块的外观。

示例代码（用于该屏幕截图）：

class SliderScrollViewController: UIViewController, UIScrollViewDelegate {
    
    let scrollView: UIScrollView = UIScrollView()
    let slider: UISlider = UISlider()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        [scrollView, slider].forEach {
            view.addSubview($0)
            $0.translatesAutoresizingMaskIntoConstraints = false
        }

        // horizontal stack view to hold scroll content
        let stack = UIStackView()
        stack.distribution = .fillEqually
        stack.spacing = 8
        stack.translatesAutoresizingMaskIntoConstraints = false

        // add 20 views to the stack view for horizontal scrolling
        for i in 1...20 {
            let v = UILabel()
            v.textAlignment = .center
            v.backgroundColor = .yellow
            v.text = "View \(i)"
            stack.addArrangedSubview(v)
        }
        stack.arrangedSubviews.first?.widthAnchor.constraint(equalToConstant: 120).isActive = true
        scrollView.addSubview(stack)
        
        let g = view.safeAreaLayoutGuide
        let svCLG = scrollView.contentLayoutGuide
        let svFLG = scrollView.frameLayoutGuide
        
        NSLayoutConstraint.activate([

            scrollView.topAnchor.constraint(equalTo: g.topAnchor, constant: 20.0),
            scrollView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
            scrollView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20.0),
            scrollView.heightAnchor.constraint(equalToConstant: 120.0),
            
            slider.topAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: 20.0),
            slider.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
            slider.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20.0),
            
            stack.topAnchor.constraint(equalTo: svCLG.topAnchor, constant: 8.0),
            stack.leadingAnchor.constraint(equalTo: svCLG.leadingAnchor, constant: 8.0),
            stack.trailingAnchor.constraint(equalTo: svCLG.trailingAnchor, constant: -8.0),
            stack.bottomAnchor.constraint(equalTo: svCLG.bottomAnchor, constant: 8.0),

            stack.heightAnchor.constraint(equalTo: svFLG.heightAnchor, constant: -16.0),
            
        ])
        
        slider.addTarget(self, action: #selector(self.sliderChanged(_:)), for: .valueChanged)
        
        // so we can see the frame of the scroll view
        scrollView.backgroundColor = .green
        
        // set scrollView delegate
        scrollView.delegate = self
    }
    
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        // we need to update the slider position when scroll view is manually scrolled
        let w = scrollView.contentSize.width - scrollView.frame.size.width
        let pct = scrollView.contentOffset.x / w
        slider.value = Float(pct)
    }

    @objc func sliderChanged(_ sender: UISlider) -> Void {
        // set scroll view's content offset x based on position of slider
        let w = scrollView.contentSize.width - scrollView.frame.size.width
        let x = w * CGFloat(sender.value)
        scrollView.contentOffset.x = x
    }
    
}

---

编辑

我想我会玩这个多一点...这个例子抓取滚动视图的内容为UIImage，将它用于滑块后面的“背景”图像，并为滑块创建一个轮廓图像拇指：

完整代码：

class SliderScrollViewController: UIViewController, UIScrollViewDelegate {
    
    let scrollView: UIScrollView = UIScrollView()
    let scrollContentView: UIView = UIView()
    let slider: UISlider = UISlider()
    let sliderBKG: UIImageView = UIImageView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        [scrollView, sliderBKG, slider].forEach {
            view.addSubview($0)
            $0.translatesAutoresizingMaskIntoConstraints = false
        }
        
        // horizontal stack view to hold scroll content
        let stack = UIStackView()
        stack.distribution = .fillEqually
        stack.spacing = 8
        stack.translatesAutoresizingMaskIntoConstraints = false
        
        // add 20 views to the stack view for horizontal scrolling
        for i in 1...20 {
            let v = UILabel()
            v.textAlignment = .center
            v.backgroundColor = UIColor(red: 0.0, green: 1.0, blue: 1.0 - (CGFloat(i) * 0.05), alpha: 1.0)
            v.text = "View \(i)"
            stack.addArrangedSubview(v)
        }
        stack.arrangedSubviews.first?.widthAnchor.constraint(equalToConstant: 120).isActive = true
        
        scrollContentView.translatesAutoresizingMaskIntoConstraints = false
        scrollContentView.addSubview(stack)
        scrollView.addSubview(scrollContentView)
        
        let g = view.safeAreaLayoutGuide
        let svCLG = scrollView.contentLayoutGuide
        let svFLG = scrollView.frameLayoutGuide
        
        NSLayoutConstraint.activate([
            
            scrollView.topAnchor.constraint(equalTo: g.topAnchor, constant: 20.0),
            scrollView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
            scrollView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20.0),
            scrollView.heightAnchor.constraint(equalToConstant: 120.0),
            
            slider.topAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: 20.0),
            slider.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
            slider.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20.0),
            slider.heightAnchor.constraint(equalToConstant: 40.0),
            
            sliderBKG.topAnchor.constraint(equalTo: slider.topAnchor, constant: 6.0),
            sliderBKG.leadingAnchor.constraint(equalTo: slider.leadingAnchor, constant: 0.0),
            sliderBKG.trailingAnchor.constraint(equalTo: slider.trailingAnchor, constant: 0.0),
            sliderBKG.bottomAnchor.constraint(equalTo: slider.bottomAnchor, constant: -6.0),
            
            scrollContentView.topAnchor.constraint(equalTo: svCLG.topAnchor, constant: 0.0),
            scrollContentView.leadingAnchor.constraint(equalTo: svCLG.leadingAnchor, constant: 0.0),
            scrollContentView.trailingAnchor.constraint(equalTo: svCLG.trailingAnchor, constant: 0.0),
            scrollContentView.bottomAnchor.constraint(equalTo: svCLG.bottomAnchor, constant: 0.0),
            
            scrollContentView.heightAnchor.constraint(equalTo: svFLG.heightAnchor, constant: 0.0),
            
            stack.topAnchor.constraint(equalTo: scrollContentView.topAnchor, constant: 8.0),
            stack.leadingAnchor.constraint(equalTo: scrollContentView.leadingAnchor, constant: 8.0),
            stack.trailingAnchor.constraint(equalTo: scrollContentView.trailingAnchor, constant: -8.0),
            stack.bottomAnchor.constraint(equalTo: scrollContentView.bottomAnchor, constant: -8.0),
            
        ])
        
        slider.addTarget(self, action: #selector(self.sliderChanged(_:)), for: .valueChanged)
        
        // set slider images to clear images
        slider.setThumbImage(UIImage(), for: [])
        slider.setMinimumTrackImage(UIImage(), for: [])
        slider.setMaximumTrackImage(UIImage(), for: [])
        
        // so we can see the frame of the scroll view
        scrollView.backgroundColor = .green
        scrollContentView.backgroundColor = .orange
        
        // set scrollView delegate
        scrollView.delegate = self
        
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        // after view has appeared (so we know auto-layout has finished)
        // grab the content of the scroll view as a UIImage
        let img = scvSnapshot()
        // set it to the "background" image view behind the slider
        sliderBKG.image = img
        updateThumbImage()
    }
    override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
        super.viewWillTransition(to: size, with: coordinator)
        coordinator.animate(alongsideTransition: { _ in
        }, completion: {
            _ in
            self.updateThumbImage()
        })
    }
    func updateThumbImage() -> Void {
        // generate a proportional width bordered clear image
        let w = self.scrollView.frame.width * (self.scrollView.frame.width / self.scrollView.contentSize.width)
        let rect = CGRect(origin: .zero, size: CGSize(width: w, height: 40.0))
        let renderer = UIGraphicsImageRenderer(size: rect.size)
        let img = renderer.image { rc in
            rc.cgContext.setFillColor(UIColor.clear.cgColor)
            rc.cgContext.setStrokeColor(UIColor.red.cgColor)
            rc.cgContext.setLineWidth(2)
            rc.cgContext.addRect(rect)
            rc.cgContext.drawPath(using: .fillStroke)
        }
        // set the slider's custom thumb image
        self.slider.setThumbImage(img, for: [])
    }
    func scvSnapshot() -> UIImage {
        let renderer = UIGraphicsImageRenderer(bounds: scrollContentView.bounds)
        return renderer.image { rendererContext in
            scrollContentView.layer.render(in: rendererContext.cgContext)
        }
    }
    
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        // we need to update the slider position when scroll view is manually scrolled
        let w = scrollView.contentSize.width - scrollView.frame.size.width
        let pct = scrollView.contentOffset.x / w
        slider.value = Float(pct)
    }
    
    @objc func sliderChanged(_ sender: UISlider) -> Void {
        // set scroll view's content offset x based on position of slider
        let w = scrollView.contentSize.width - scrollView.frame.size.width
        let x = w * CGFloat(sender.value)
        scrollView.contentOffset.x = x
    }
    
}