Осваиваем скроллинг в SwiftUI: реализация кастомной прокрутки

struct Step0: View {
    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack(spacing: 0) {
                ForEach(0 ..< 20) { page in
                    Text(page, format: .number)
                        .font(.title)
                        // Set the width of each child view to match the ScrollView container's width
                        .containerRelativeFrame(.horizontal, count: 1, span: 1, spacing: 0, alignment: .center)
                        .frame(height: 200)
                        .background(.secondary.opacity(0.3))
                        .border(.red, width: 2)
                }
            }
        }
        .border(.blue, width: 2)
        .scrollTargetBehavior(.paging)
    }
}

struct Step0: View {

    var body: some View {

        ScrollView(.horizontal) {

            LazyHStack(spacing: 0) {

                ForEach(0 ..< 20) { page in

                    Text(page, format: .number)

                        .font(.title)

                        // Set the width of each child view to match the ScrollView container's width

                        .containerRelativeFrame(.horizontal, count: 1, span: 1, spacing: 0, alignment: .center)

                        .frame(height: 200)

                        .background(.secondary.opacity(0.3))

                        .border(.red, width: 2)

                }

            }

        }

        .border(.blue, width: 2)

        .scrollTargetBehavior(.paging)

    }

}

ScrollView {
    .... 
}
.introspect(.scrollView, on: .iOS(.v17), .iOS(.v18)) {
    $0.isPagingEnabled = true
}

xxxxxxxxxx

ScrollView {

    .... 

}

.introspect(.scrollView, on: .iOS(.v17), .iOS(.v18)) {

    $0.isPagingEnabled = true

}

struct Step1: View {
    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack(spacing: 0) {
                ForEach(0 ..< 20) { page in
                    Text(page, format: .number)
                        .font(.title)
                        .containerRelativeFrame(.horizontal, count: 1, span: 1, spacing: 0, alignment: .center)
                        .frame(height: 200)
                        .background(.secondary.opacity(0.3))
                        .border(.red, width: 2)
                }
            }
            // viewAligned requires scrollTargetLayout
            .scrollTargetLayout()
        }
        .border(.blue, width: 2)
        // Limit scrolling to one view at a time
        .scrollTargetBehavior(.viewAligned(limitBehavior: .alwaysByOne))
    }
}

xxxxxxxxxx

struct Step1: View {

    var body: some View {

        ScrollView(.horizontal) {

            LazyHStack(spacing: 0) {

                ForEach(0 ..< 20) { page in

                    Text(page, format: .number)

                        .font(.title)

                        .containerRelativeFrame(.horizontal, count: 1, span: 1, spacing: 0, alignment: .center)

                        .frame(height: 200)

                        .background(.secondary.opacity(0.3))

                        .border(.red, width: 2)

                }

            }

            // viewAligned requires scrollTargetLayout

            .scrollTargetLayout()

        }

        .border(.blue, width: 2)

        // Limit scrolling to one view at a time

        .scrollTargetBehavior(.viewAligned(limitBehavior: .alwaysByOne))

    }

}

@available(iOS 17.0, macOS 14.0, tvOS 17.0, watchOS 10.0, *)
public protocol ScrollTargetBehavior {
    /// Updates the scroll target position
    func updateTarget(_ target: inout ScrollTarget, context: Self.TargetContext)

    /// The context in which a scroll behavior updates the scroll target.
    typealias TargetContext = ScrollTargetBehaviorContext
}

xxxxxxxxxx

@available(iOS 17.0, macOS 14.0, tvOS 17.0, watchOS 10.0, *)

public protocol ScrollTargetBehavior {

    /// Updates the scroll target position

    func updateTarget(_ target: inout ScrollTarget, context: Self.TargetContext)

​

    /// The context in which a scroll behavior updates the scroll target.

    typealias TargetContext = ScrollTargetBehaviorContext

}

struct CustomHorizontalPagingBehavior: ScrollTargetBehavior {
    func updateTarget(_ target: inout ScrollTarget, context: TargetContext) {
        // Current ScrollView width
        let scrollViewWidth = context.containerSize.width

        // Adjust the target position based on scroll direction
        if context.velocity.dx > 0 {
            // Scroll right: target position = starting position + ScrollView width
            target.rect.origin.x = context.originalTarget.rect.minX + scrollViewWidth
        } else if context.velocity.dx < 0 {
            // Scroll left: target position = starting position - ScrollView width
            target.rect.origin.x = context.originalTarget.rect.minX - scrollViewWidth
        }
    }
}

extension ScrollTargetBehavior where Self == CustomHorizontalPagingBehavior {
    static var horizontalPaging: CustomHorizontalPagingBehavior { .init() }
}

// Usage
.scrollTargetBehavior(.horizontalPaging)

xxxxxxxxxx

struct CustomHorizontalPagingBehavior: ScrollTargetBehavior {

    func updateTarget(_ target: inout ScrollTarget, context: TargetContext) {

        // Current ScrollView width

        let scrollViewWidth = context.containerSize.width

​

        // Adjust the target position based on scroll direction

        if context.velocity.dx > 0 {

            // Scroll right: target position = starting position + ScrollView width

            target.rect.origin.x = context.originalTarget.rect.minX + scrollViewWidth

        } else if context.velocity.dx < 0 {

            // Scroll left: target position = starting position - ScrollView width

            target.rect.origin.x = context.originalTarget.rect.minX - scrollViewWidth

        }

    }

}

​

extension ScrollTargetBehavior where Self == CustomHorizontalPagingBehavior {

    static var horizontalPaging: CustomHorizontalPagingBehavior { .init() }

}

​

// Usage

.scrollTargetBehavior(.horizontalPaging)

struct CustomHorizontalPagingBehavior: ScrollTargetBehavior {
    func updateTarget(_ target: inout ScrollTarget, context: TargetContext) {
        // Current ScrollView width
        let scrollViewWidth = context.containerSize.width
        
        // Scroll distance
        let distance = context.originalTarget.rect.minX - target.rect.minX
        // Adjust the target position based on scroll distance
        // If the scroll distance exceeds 1/3 of the ScrollView width, switch to the next page
        if abs(distance) > scrollViewWidth / 3 {
            if distance > 0 {
                target.rect.origin.x = context.originalTarget.rect.minX - scrollViewWidth
            } else {
                target.rect.origin.x = context.originalTarget.rect.minX + scrollViewWidth
            }
        } else {
            // If the scroll distance is less than 1/3, return to the original position
            target.rect.origin.x = context.originalTarget.rect.minX
        }
    }
}

xxxxxxxxxx

struct CustomHorizontalPagingBehavior: ScrollTargetBehavior {

    func updateTarget(_ target: inout ScrollTarget, context: TargetContext) {

        // Current ScrollView width

        let scrollViewWidth = context.containerSize.width

        // Scroll distance

        let distance = context.originalTarget.rect.minX - target.rect.minX

        // Adjust the target position based on scroll distance

        // If the scroll distance exceeds 1/3 of the ScrollView width, switch to the next page

        if abs(distance) > scrollViewWidth / 3 {

            if distance > 0 {

                target.rect.origin.x = context.originalTarget.rect.minX - scrollViewWidth

            } else {

                target.rect.origin.x = context.originalTarget.rect.minX + scrollViewWidth

            }

        } else {

            // If the scroll distance is less than 1/3, return to the original position

            target.rect.origin.x = context.originalTarget.rect.minX

        }

    }

}

struct CustomHorizontalPagingBehavior: ScrollTargetBehavior {
  enum Direction {
    case left, right, none
  }

  func updateTarget(_ target: inout ScrollTarget, context: TargetContext) {
    let scrollViewWidth = context.containerSize.width
    let contentWidth = context.contentSize.width

    // If the content width is less than or equal to the ScrollView width, align to the leftmost position
    guard contentWidth > scrollViewWidth else {
      target.rect.origin.x = 0
      return
    }

    let originalOffset = context.originalTarget.rect.minX
    let targetOffset = target.rect.minX

    // Determine the scroll direction by comparing the original offset with the target offset
    let direction: Direction = targetOffset > originalOffset ? .left : (targetOffset < originalOffset ? .right : .none)
    guard direction != .none else {
      target.rect.origin.x = originalOffset
      return
    }

    let thresholdRatio: CGFloat = 1 / 3

    // Calculate the remaining content width based on the scroll direction and determine the drag threshold
    let remaining: CGFloat = direction == .left
      ? (contentWidth - context.originalTarget.rect.maxX)
      : (context.originalTarget.rect.minX)

    let threshold = remaining <= scrollViewWidth ? remaining * thresholdRatio : scrollViewWidth * thresholdRatio

    let dragDistance = originalOffset - targetOffset
    var destination: CGFloat = originalOffset

    if abs(dragDistance) > threshold {
      // If the drag distance exceeds the threshold, adjust the target to the previous or next page
      destination = dragDistance > 0 ? originalOffset - scrollViewWidth : originalOffset + scrollViewWidth
    } else {
      // If the drag distance is within the threshold, align based on the scroll direction
      if direction == .right {
        // Scroll right (page left), round up
        destination = ceil(originalOffset / scrollViewWidth) * scrollViewWidth
      } else {
        // Scroll left (page right), round down
        destination = floor(originalOffset / scrollViewWidth) * scrollViewWidth
      }
    }

    // Boundary handling: Ensure the destination is within valid bounds and aligns with pages
    let maxOffset = contentWidth - scrollViewWidth
    let boundedDestination = min(max(destination, 0), maxOffset)

    if boundedDestination >= maxOffset * 0.95 {
      // If near the end, snap to the last possible position
      destination = maxOffset
    } else if boundedDestination <= scrollViewWidth * 0.05 {
      // If near the start, snap to the beginning
      destination = 0
    } else {
      if direction == .right {
        // For right-to-left scrolling, calculate from the right end
        let offsetFromRight = maxOffset - boundedDestination
        let pageFromRight = round(offsetFromRight / scrollViewWidth)
        destination = maxOffset - (pageFromRight * scrollViewWidth)
      } else {
        // For left-to-right scrolling, keep original behavior
        let pageNumber = round(boundedDestination / scrollViewWidth)
        destination = min(pageNumber * scrollViewWidth, maxOffset)
      }
    }

    target.rect.origin.x = destination
  }
}

xxxxxxxxxx

struct CustomHorizontalPagingBehavior: ScrollTargetBehavior {

  enum Direction {

    case left, right, none

  }

​

  func updateTarget(_ target: inout ScrollTarget, context: TargetContext) {

    let scrollViewWidth = context.containerSize.width

    let contentWidth = context.contentSize.width

​

    // If the content width is less than or equal to the ScrollView width, align to the leftmost position

    guard contentWidth > scrollViewWidth else {

      target.rect.origin.x = 0

      return

    }

​

    let originalOffset = context.originalTarget.rect.minX

    let targetOffset = target.rect.minX

​

    // Determine the scroll direction by comparing the original offset with the target offset

    let direction: Direction = targetOffset > originalOffset ? .left : (targetOffset < originalOffset ? .right : .none)

    guard direction != .none else {

      target.rect.origin.x = originalOffset

      return

    }

​

    let thresholdRatio: CGFloat = 1 / 3

​

    // Calculate the remaining content width based on the scroll direction and determine the drag threshold

    let remaining: CGFloat = direction == .left

      ? (contentWidth - context.originalTarget.rect.maxX)

      : (context.originalTarget.rect.minX)

​

    let threshold = remaining <= scrollViewWidth ? remaining * thresholdRatio : scrollViewWidth * thresholdRatio

​

    let dragDistance = originalOffset - targetOffset

    var destination: CGFloat = originalOffset

​

    if abs(dragDistance) > threshold {

      // If the drag distance exceeds the threshold, adjust the target to the previous or next page

      destination = dragDistance > 0 ? originalOffset - scrollViewWidth : originalOffset + scrollViewWidth

    } else {

      // If the drag distance is within the threshold, align based on the scroll direction

      if direction == .right {

        // Scroll right (page left), round up

        destination = ceil(originalOffset / scrollViewWidth) * scrollViewWidth

      } else {

        // Scroll left (page right), round down

        destination = floor(originalOffset / scrollViewWidth) * scrollViewWidth

      }

    }

​

    // Boundary handling: Ensure the destination is within valid bounds and aligns with pages

    let maxOffset = contentWidth - scrollViewWidth

    let boundedDestination = min(max(destination, 0), maxOffset)

​

    if boundedDestination >= maxOffset * 0.95 {

      // If near the end, snap to the last possible position

      destination = maxOffset

    } else if boundedDestination <= scrollViewWidth * 0.05 {

      // If near the start, snap to the beginning

      destination = 0

    } else {

      if direction == .right {

        // For right-to-left scrolling, calculate from the right end

        let offsetFromRight = maxOffset - boundedDestination

        let pageFromRight = round(offsetFromRight / scrollViewWidth)

        destination = maxOffset - (pageFromRight * scrollViewWidth)

      } else {

        // For left-to-right scrolling, keep original behavior

        let pageNumber = round(boundedDestination / scrollViewWidth)

        destination = min(pageNumber * scrollViewWidth, maxOffset)

      }

    }

​

    target.rect.origin.x = destination

  }

}

struct Step2: View {
    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack(spacing: 0) {
                ForEach(0 ..< 10) { page in
                    Text(page, format: .number)
                        .font(.title)
                        // Set the width to 1/3 of the ScrollView width
                        .containerRelativeFrame(.horizontal, count: 3, span: 1, spacing: 0, alignment: .center)
                        .frame(height: 200)
                        .background(.secondary.opacity(0.3))
                        .border(.red, width: 2)
                }
            }
        }
        .border(.blue, width: 2)
        .scrollTargetBehavior(.horizontalPaging)
    }
}

xxxxxxxxxx

struct Step2: View {

    var body: some View {

        ScrollView(.horizontal) {

            LazyHStack(spacing: 0) {

                ForEach(0 ..< 10) { page in

                    Text(page, format: .number)

                        .font(.title)

                        // Set the width to 1/3 of the ScrollView width

                        .containerRelativeFrame(.horizontal, count: 3, span: 1, spacing: 0, alignment: .center)

                        .frame(height: 200)

                        .background(.secondary.opacity(0.3))

                        .border(.red, width: 2)

                }

            }

        }

        .border(.blue, width: 2)

        .scrollTargetBehavior(.horizontalPaging)

    }

}