SwiftUI/UIKit：水平滚动视图缩放视图

Posted 2023-02-24

【中文标题】SwiftUI/UIKit：水平滚动视图缩放视图

【英文标题】：SwiftUI/UIKit: Horizontal ScrollView to scale view

【发布时间】：2021-10-03 06:26:22

【问题描述】：

我正在尝试使用UIScrollView 水平缩放视图。 我的代码几乎给了我想要的东西，除了它还垂直缩放视图。 我想要实现的是图像只在水平方向上缩放，ScrollView 负责水平滚动。

当我从hostedView 的autoresizingMask 中删除.flexibleHeight 选项时，图像不再显示。这是为什么？如何获得我想要的行为？

struct ContentView: View 

    var body: some View 
        ZoomableScrollView 
            Image(systemName: "star")
                .resizable()
                .scaledToFit()
          
    


struct ZoomableScrollView<Content: View>: UIViewRepresentable 
  private var content: Content

  init(@ViewBuilder content: () -> Content) 
    self.content = content()
  

  func makeUIView(context: Context) -> UIScrollView 
    // set up the UIScrollView
    let scrollView = UIScrollView()
    scrollView.delegate = context.coordinator  // for viewForZooming(in:)
    scrollView.maximumZoomScale = 20
    scrollView.minimumZoomScale = 1
    scrollView.bouncesZoom = true

    // create a UIHostingController to hold our SwiftUI content
    let hostedView = context.coordinator.hostingController.view!
    hostedView.translatesAutoresizingMaskIntoConstraints = true
      hostedView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    hostedView.frame = scrollView.bounds
    scrollView.addSubview(hostedView)

    return scrollView
  

  func makeCoordinator() -> Coordinator 
    return Coordinator(hostingController: UIHostingController(rootView: self.content))
  

  func updateUIView(_ uiView: UIScrollView, context: Context) 
    // update the hosting controller's SwiftUI content
    context.coordinator.hostingController.rootView = self.content
    assert(context.coordinator.hostingController.view.superview == uiView)
  

  // MARK: - Coordinator

  class Coordinator: NSObject, UIScrollViewDelegate 
    var hostingController: UIHostingController<Content>

    init(hostingController: UIHostingController<Content>) 
      self.hostingController = hostingController
    

    func viewForZooming(in scrollView: UIScrollView) -> UIView? 
      return hostingController.view
    
  

【参考方案1】：

这是在纯 SwiftUI 中完成的：

struct HorizontalScaleView<Content: View>: View 

    @ViewBuilder var content: Content

    @State private var currentAmount: CGFloat = 0
    @State private var finalAmount: CGFloat = 1

    var body: some View 
        GeometryReader  geo in
            ScrollView(.horizontal) 
                content
                    .scaledToFit()
                    .scaleEffect(x: finalAmount + currentAmount, y: 1)
                    .frame(width: (finalAmount + currentAmount) * geo.size.width, height: geo.size.width)
                    .gesture(
                        MagnificationGesture()
                            .onChanged  amount in
                                self.currentAmount = amount - 1
                            
                            .onEnded  _ in
                                if self.finalAmount + self.currentAmount >= 1 
                                    self.finalAmount += self.currentAmount
                                 else 
                                    self.finalAmount = 1
                                
                                self.currentAmount = 0
                            
                    )