问题描述
我想知道如何将平移手势 y 转换为等效于滚动视图内容 y 的偏移量。
因此，在此我可以通过平移手势转换来滚动我的滚动视图，从而再现自然滚动视图滚动的相同效果。
let scrollYOffset: CGFloat = panGesture.translation(in: view).y
当我这样做时，由于scrollYOffset值从0更改为54，然后在拖动时变为124，因此滚动非常混乱。
我想要的是使用平移手势流畅自然地滚动滚动视图。
您可能会问为什么我不使用自然的滚动视图及其委托-
func scrollViewDidScroll(_ scrollView: UIScrollView)
答案是我正在尝试构建一个应用程序，使用户可以在屏幕上拖动对象，并且其后面的滚动视图应该滚动那么多。
任何人都可以帮助我将平移手势 y 转换为滚动视图 y 内容偏移。
任何帮助将不胜感激。谢谢。
解决方法
方法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
}
}
有多种方法可获取“平滑的可拖动视图” ---但出于您的目的，可能的选择是使用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,scrollView.trailingAnchor.constraint(equalTo: g.trailingAnchor,constant: -20.0),scrollView.heightAnchor.constraint(equalToConstant: 120.0),slider.topAnchor.constraint(equalTo: scrollView.bottomAnchor,slider.leadingAnchor.constraint(equalTo: g.leadingAnchor,slider.trailingAnchor.constraint(equalTo: g.trailingAnchor,stack.topAnchor.constraint(equalTo: svCLG.topAnchor,constant: 8.0),stack.leadingAnchor.constraint(equalTo: svCLG.leadingAnchor,stack.trailingAnchor.constraint(equalTo: svCLG.trailingAnchor,constant: -8.0),stack.bottomAnchor.constraint(equalTo: svCLG.bottomAnchor,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,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,sliderBKG.bottomAnchor.constraint(equalTo: slider.bottomAnchor,constant: -6.0),scrollContentView.topAnchor.constraint(equalTo: svCLG.topAnchor,scrollContentView.leadingAnchor.constraint(equalTo: svCLG.leadingAnchor,scrollContentView.trailingAnchor.constraint(equalTo: svCLG.trailingAnchor,scrollContentView.bottomAnchor.constraint(equalTo: svCLG.bottomAnchor,scrollContentView.heightAnchor.constraint(equalTo: svFLG.heightAnchor,stack.topAnchor.constraint(equalTo: scrollContentView.topAnchor,stack.leadingAnchor.constraint(equalTo: scrollContentView.leadingAnchor,stack.trailingAnchor.constraint(equalTo: scrollContentView.trailingAnchor,stack.bottomAnchor.constraint(equalTo: scrollContentView.bottomAnchor,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
}
}