Uiscrollview (uicollectionview) prohibits horizontal and vertical sliding at the same time

There is a need today , We have an interface that shows many players and their scores , The interface uses UICollectionView It's done , With customized layout, Support horizontal and vertical sliding , It supports diagonal sliding , When sliding diagonally , Sliding both horizontally and vertically .

The current requirement is to prohibit diagonal sliding , Either horizontally , Or slide vertically .

First, after checking the apple documentation , Know that such a property can do some control .

// default NO. if YES, try to lock vertical or horizontal scrolling while dragging
open var isDirectionalLockEnabled: Bool 

If this property is false, scrolling is permitted in both horizontal and vertical directions. If this property is true and the user begins dragging in one general direction (horizontally or vertically), the scroll view disables scrolling in the other direction. If the drag direction is diagonal, then scrolling will not be locked and the user can drag in any direction until the drag completes. The default value is false

The value of this property is false When ：

• Support horizontal and vertical sliding .

When the attribute is true When ：

• If the user is more inclined to slide horizontally when he first starts sliding , Then it is forbidden to slide vertically ;
• If the user starts sliding more vertically , Then it is forbidden to slide horizontally ;
• If the user slides diagonally , Then the attribute is invalid , It can slide in both directions .

After using this attribute , The probability will reduce the problem of sliding in both directions at the beginning , But not perfect . We also need to deal with the sliding way along the diagonal .

Here you go UIScrollView Add some extension methods and properties , To deal with the problem of sliding along the diagonal .

extension UIScrollView {
  enum ScrollDirection {
    case none        //  Not sliding 
    case diagonal    //  Diagonal direction 
    case horizontal  //  The transverse 
    case vertical    //  vertical 
  }

  //  Record the initial offset at the beginning of each slide 
  private var initialContentOffset: CGPoint {
    get {
      let key: UnsafeRawPointer! = UnsafeRawPointer.init(bitPattern: "initialContentOffset".hashValue)
      let obj: CGPoint? = objc_getAssociatedObject(self, key) as? CGPoint
      return obj ?? .zero
    }

    set {
      let key: UnsafeRawPointer! = UnsafeRawPointer.init(bitPattern: "initialContentOffset".hashValue)
      objc_setAssociatedObject(self, key, newValue, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)
    }
  }

  func setInitialContentOffset(_ offSet: CGPoint) {
    initialContentOffset = offSet
  }

  //  Get the sliding direction 
  func scrollDirection() -> ScrollDirection {
    var direction: ScrollDirection = .none
    if contentOffset.x != initialContentOffset.x && contentOffset.y != initialContentOffset.y {
      direction = .diagonal
    } else if contentOffset.x != initialContentOffset.x {
      direction = .horizontal
    } else if contentOffset.y != initialContentOffset.y {
      direction = .vertical
    } else {
      direction = .none
    }
    return direction
  }

  //  Slide along a single axis 
  func scrollAlongOneAxis() {
    let direction = scrollDirection()
    if direction == .diagonal {
      var newOffset: CGPoint = .zero
      if abs(contentOffset.x) > abs(contentOffset.y) {
        newOffset = CGPoint(x: contentOffset.x, y: initialContentOffset.y)
      } else {
        newOffset = CGPoint(x: initialContentOffset.x, y: contentOffset.y)
      }
      setContentOffset(newOffset, animated: false)
    }
  }
}

1. First, define several sliding directions by enumerating , Including horizontal 、 vertical 、 Diagonal direction .
2. Set up initialContentOffset, It is used to record the initial offset of each move .
3. adopt scrollDirection() Method , To determine which direction the user is moving .
4. Last call scrollAlongOneAxis() Method to move in the uniaxial direction .

The extension methods and attributes are introduced , So how to use it in specific projects ？

First step ：

to UICollectionView perhaps UIScrollView Set up isDirectionalLockEnabled by true, So let the system help us deal with some , Reduce scrollAlongOneAxis() In the method if Number of code executions under .

The second step ：

stay UIScrollViewDelegate Proxy method scrollViewWillBeginDragging Call in setInitialContentOffset() Method to set the initial offset .

func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
   scrollView.setInitialContentOffset(scrollView.contentOffset)
}

The third step ：

stay UIScrollViewDelegate Proxy method scrollViewDidScroll Call in scrollAlongOneAxis() Method to realize uniaxial sliding .

func scrollViewDidScroll(_ scrollView: UIScrollView) {
   scrollView.scrollAlongOneAxis()
}

The above three steps can realize the problem that we want to slide in a single direction each time , If there is a better way , Please also pass by a friend to give some advice .

If you find the article useful , May as well give a compliment , Pay attention to it. , More useful articles are still being updated .

This article is from https://blog.csdn.net/guoyongming925 The blog of , If you want to reprint , Please also indicate the source .