ASScrollNode

ASScrollNode 는 하위의 뷰가 UIScrollView 인 ASDisplayNode 입니다. 이 클래스는 자동으로 ASLayoutSpec 의 크기를 스크롤 가능한 contentSize 에 맞춰줍니다.

automaticallyManagesContentSize

이 값이 활성화 되어있으면, ASScrollNode의 layout spec 에 의해 계산된 크기가 스크롤뷰의 .contentSize 를 결정하게 됩니다. 이는 layoutSpec 의 사이즈가 bounds(결국 frame) 에 적용되는 대부분의 노드들과 다릅니다. 이 모드에서는 스크롤뷰의 bounds 는 항상 부모의 크기를 꽉 채우게 됩니다.

automaticallyManagesContentSize 는 layoutSpecThatFits: 를 구현한 ASScrollNode 의 자식 클래스들에게 유용하며, 또한 .layoutSpecBlock 와 함께 base 클래스에서도 사용될 수 있습니다.

// 1. ASScrollNode상속받아서 구현하는 
class SubScrollNode: ASScrollNode {

    override init() {
       super.init()
       self.automaticallyManagesSubnodes = true
    }
    
    override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {
         // TODO:     
    }
}

// 2. layoutSpecBlock활용하는 

let node = ASScrollNode()
node.automaticallyManagesSubnodes = true
node.layoutSpecBlock = { (scrollNode, constrainedSize) -> ASLayouotSpec in 
   // TODO:
}

두가지 경우 모두 layout spec 에 있는 노드들이 스크롤 가능한 영역에 자동으로 추가될 수 있도록 하기 위해 .automaticallyManagesSubnodes를 사용하는 것이 일반적입니다.

이렇게 한다면, layout size 를 잡아둘(captured) 필요가 없으며, wrapper 로서의 절대적인 layout spec 을 사용할 필요도 없고, 코드 상에서 contentSize 를 설정할 필요도 없습니다. layout 변화와 함께 사이즈는 업데이트 될 것입니다. 간단하게 ASStackLayoutSpec을 반환하여, 스크롤 가능한 영역이 모든 컨텐츠를 보여줄 수 있도록 하는 것이 일반적이고 유용합니다.

  • 새로운 자식 추가/제거에 따른 변화를 주기 위해 setNeedsLayout을 호출해주세요.

  • 부모(ASScrollNode)에 비해 자식들의 합이 작을 경우 스크롤은 자동으로 비활성화됩니다.

  • 부모(ASScrollNode)에 비해 자식들의 합이 클 경우 스크롤은 자동으로 활성화됩니다.

scrollableDirections

이 옵션은 automaticallyManagesContentSize를 사용할 때 유용합니다. 특히 만약 당신이 가로로 긴 콘텐츠를 사용하게 된다면 더 유용합니다.

default 는 세로(vertical)이기 때문입니다.

이 프로퍼티는 콘텐츠의 사이즈를 결정할 때 constrainedSize 가 어떻게 해석될 지에 관여합니다.

let node = ASScrollNode()
node.scrollableDirections = .vertical
node.scrollableDirections = .horizontal
node.scrollableDirections = [.top, .bottom]
node.scrollableDirections = [.left, .right]

당신이 스크롤뷰와 친숙하지 않을 수 있다는 점을 고려해서 말하자면, 스크롤뷰란? 특정 영역을 벗어나 더 많은 공간을 차지하는 콘텐츠를 보여주는 창문입니다.

가령 매우 커다란 이미지가 있는데, 스크린의 200pt x 200pt 공간만을 차지하고 싶다고 해봅시다.

// NOTE: If you are using a horizontal stack, set scrollNode.scrollableDirections.

let scrollNode = ASScrollNode()
scrollNode.automaticallyManagesSubnodes = true
scrollNode.automaticallyManagesContentSize = true

scrollNode.layoutSpecBlock = { node, constrainedSize in
  let stack = ASStackLayoutSpec.vertical()
  // Add children to the stack.
  return stack
}

예제

PreviousASControlNodeNextASEditableTextNode

Last updated