[iOS] Texture - 2. Node의 개념과 사용법
Node란?
UI를 처리하는데 생기는 프레임 드랍과 스레드의 문제점을 안전하고 유연하게 처리할 수 있도록 View 객체를 감싼 것이 Node 입니다.
Node의 종류
Node
- UIView: ASDisplayNode
- UIScrollView: ASScrollNode
- UITableViewCell, UICollectionViewCell: ASCellNode
- UILabel: ASTextNode
- UITextView: ASEditableTextNode
- UIImageView: ASImageNode
- AVPlayerLayer: ASVideoNode
- UIMoviePlayer: ASVideoPlayerNode
- UIControl: ASControlNode
- UIButton: ASButtonNode
- MKMapView: ASMapNode
기존에 사용하던 UIView 대부분을 Node로 대체할 수 있고, UIView에서 제공하지 않는 기능들도 Node에서는 지원됩니다.
Node Containers
- UIViewController: ASDKViewController
- UICollectionView: ASCollectionNode
- UITableView: ASTableNode
- UIPageViewController: ASPagerNode
- UINavigationController: ASNavigationController
- UITabBarController: ASTabBarController
Node Containers를 사용하면 Node가 비동기적으로 수행되는 것을 자동으로 관리해줍니다.
Node 사용법
화면 중앙에 간단한 메세지 하나를 띄워보도록 하겠습니다.
MessageNode.swift
class MessageNode: ASDisplayNode {
lazy var textNode = { () -> ASTextNode in
let node = ASTextNode()
node.attributedText = NSAttributedString(
string: "Hello iOS",
attributes:
[NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 20)]
)
return node
}()
override init() { // Background
super.init()
self.automaticallyManagesSubnodes = true
self.backgroundColor = .systemBackground
}
override func didLoad() { // Main
super.didLoad()
}
override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec { // Background
return ASStackLayoutSpec(
direction: .vertical,
spacing: 0,
justifyContent: .center,
alignItems: .center,
children: [textNode]
)
}
override func layout() { // Main
super.layout()
}
}
"Hello iOS"라는 메세지를 띄워줄 Node를 만들어줍니다.
layoutSpecThatFits 메서드를 이용하여 레이아웃의 방향, 간격, 배치, 정렬 등 레이아웃을 어떻게 구성할지 작성해줍니다.
ViewController.swift
import AsyncDisplayKit
class ViewController: ASDKViewController<MessageNode> {
override init() {
super.init(node: MessageNode())
self.node.automaticallyManagesSubnodes = true
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
ViewController에 MessageNode를 띄워줍니다.
automaticallyManagesSubnodes를 활성화 시켜주면 하위 노드 추가나 삭제를 레이아웃 빌드 과정에서 알아서 처리합니다.
Node의 LifeCycle
init 메소드
UIView에서는 메인 스레드에서 동작했지만, Node는 백그라운드 스레드에서 동작합니다.
.view나 .layer와 같이 메인스레드에서 접근 가능한 속성들은 didLoad 메소드에서 접근해야 합니다.
didLoad 메소드
init메소드가 끝나고 Node 객체가 되었을 때 호출되며, 메인 스레드에서 동작하여 메인 스레드에 접근 가능한 속성들을 사용할 수 있습니다.
layoutSpecThatFits 메소드
Yoga Layout Flex-Box 기반으로 백그라운드 스레드에서 레이아웃을 설계하고 빌드합니다.
메인 스레드에서 사용가능한 요소는 사용하면 안됩니다.
layout 메소드
layoutSpecThatFits 메소드에서 레이아웃 빌드 후 메인 스레드에서 레이아웃이 변경될 때마다 호출됩니다. 레리아웃 변화에 따른 업데이트가 필요한 추가적인 요소를 처리합니다.
Author And Source
이 문제에 관하여([iOS] Texture - 2. Node의 개념과 사용법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jini0318/iOS-Texture-2.-Node의-개념과-사용법저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)