[英]How can I properly add nodes in an ASCellNode using Texture
I am learning AsyncDisplayKit/Texture .我正在学习AsyncDisplayKit/Texture 。 I am trying to create an
ASTableNode
with a custom cell.我正在尝试使用自定义单元创建一个
ASTableNode
。
I am struggling to understand how to properly set and anchor the nodes I create within my ExampleNode
.我正在努力理解如何正确设置和锚定我在
ExampleNode
创建的节点。
I have tried this我试过这个
override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {
let stack = ASStackLayoutSpec.vertical()
stack.children = textNode
return stack
}
But have an error但是有一个错误
Cannot assign value of type 'ASTextNode' to type '[ASLayoutElement]?'
无法将“ASTextNode”类型的值分配给“[ASLayoutElement]”类型?
I then updated layoutSpecThatFits
with然后我更新了
layoutSpecThatFits
override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {
return ASStackLayoutSpec(
direction: .horizontal,
spacing: 16,
justifyContent: .start,
alignItems: .center,
children: [textNode]
)
}
But this has bumped the text right up against the left of the cell.但这已经将文本撞到了单元格的左侧。 No Spacing at all is applied.
根本不应用间距。
I am struggling to find a decent guide on using this, so please forgive me if the answer is obvious.我正在努力寻找使用它的体面指南,所以如果答案很明显,请原谅我。
What would be the correct way, using the below class, to add nodes to a cell?使用以下类将节点添加到单元格的正确方法是什么?
import AsyncDisplayKit
final class FeedNodeController: ASViewController<ASDisplayNode> {
var tableNode: ASTableNode {
return node as! ASTableNode
}
private lazy var tableNodeProvider = FeedTableNodeProvider()
init() {
super.init(node: ASTableNode())
tableNode.delegate = tableNodeProvider
tableNode.dataSource = tableNodeProvider
tableNode.view.tableFooterView = UIView()
}
required init?(coder aDecoder: NSCoder) {
return nil
}
}
class FeedTableNodeProvider: NSObject {
private let feed = ["Foo", "Bar", "Boo", "Baz"]
}
extension FeedTableNodeProvider: ASTableDataSource, ASTableDelegate {
func numberOfSections(in tableNode: ASTableNode) -> Int {
return 1
}
func tableNode(_ tableNode: ASTableNode, nodeBlockForRowAt indexPath: IndexPath) -> ASCellNodeBlock {
let node = { [unowned self] () -> ASCellNode in
return ExampleNode(text: self.feed[indexPath.row])
}
return node
}
func tableNode(_ tableNode: ASTableNode, numberOfRowsInSection section: Int) -> Int {
return feed.count
}
}
class ExampleNode: ASCellNode {
private lazy var textNode: ASTextNode = {
let node = ASTextNode()
node.backgroundColor = .blue
return node
}()
init(text: String) {
super.init()
textNode.attributedText = NSAttributedString(string: text)
backgroundColor = .purple
addSubnode(textNode)
}
override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {
return ASStackLayoutSpec(
direction: .horizontal,
spacing: 16,
justifyContent: .start,
alignItems: .center,
children: [textNode]
)
}
}
Take a look at the ASDKgram-Swift example in the texture repo, PhotoTableNodeCell .查看纹理存储库PhotoTableNodeCell中的ASDKgram-Swift示例。
import Foundation
import AsyncDisplayKit
class PhotoTableNodeCell: ASCellNode {
// MARK: Properties
let usernameLabel = ASTextNode()
let timeIntervalLabel = ASTextNode()
let photoLikesLabel = ASTextNode()
let photoDescriptionLabel = ASTextNode()
let avatarImageNode: ASNetworkImageNode = {
let node = ASNetworkImageNode()
node.contentMode = .scaleAspectFill
// Set the imageModificationBlock for a rounded avatar
node.imageModificationBlock = ASImageNodeRoundBorderModificationBlock(0, nil)
return node
}()
let photoImageNode: ASNetworkImageNode = {
let node = ASNetworkImageNode()
node.contentMode = .scaleAspectFill
return node
}()
// MARK: Lifecycle
init(photoModel: PhotoModel) {
super.init()
automaticallyManagesSubnodes = true
photoImageNode.url = URL(string: photoModel.url)
avatarImageNode.url = URL(string: photoModel.user.profileImage)
usernameLabel.attributedText = photoModel.attributedStringForUserName(withSize: Constants.CellLayout.FontSize)
timeIntervalLabel.attributedText = photoModel.attributedStringForTimeSinceString(withSize: Constants.CellLayout.FontSize)
photoLikesLabel.attributedText = photoModel.attributedStringLikes(withSize: Constants.CellLayout.FontSize)
photoDescriptionLabel.attributedText = photoModel.attributedStringForDescription(withSize: Constants.CellLayout.FontSize)
}
// MARK: ASDisplayNode
override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {
// Header Stack
var headerChildren: [ASLayoutElement] = []
let headerStack = ASStackLayoutSpec.horizontal()
headerStack.alignItems = .center
avatarImageNode.style.preferredSize = CGSize(
width: Constants.CellLayout.UserImageHeight,
height: Constants.CellLayout.UserImageHeight
)
headerChildren.append(ASInsetLayoutSpec(insets: Constants.CellLayout.InsetForAvatar, child: avatarImageNode))
usernameLabel.style.flexShrink = 1.0
headerChildren.append(usernameLabel)
let spacer = ASLayoutSpec()
spacer.style.flexGrow = 1.0
headerChildren.append(spacer)
timeIntervalLabel.style.spacingBefore = Constants.CellLayout.HorizontalBuffer
headerChildren.append(timeIntervalLabel)
let footerStack = ASStackLayoutSpec.vertical()
footerStack.spacing = Constants.CellLayout.VerticalBuffer
footerStack.children = [photoLikesLabel, photoDescriptionLabel]
headerStack.children = headerChildren
let verticalStack = ASStackLayoutSpec.vertical()
verticalStack.children = [
ASInsetLayoutSpec(insets: Constants.CellLayout.InsetForHeader, child: headerStack),
ASRatioLayoutSpec(ratio: 1.0, child: photoImageNode),
ASInsetLayoutSpec(insets: Constants.CellLayout.InsetForFooter, child: footerStack)
]
return verticalStack
}
}
ASTexNode
will calculate its width
just for how long the text is if you don't set any width for it ASTexNode
将计算其width
仅仅为文本有多长,如果你不设置任何宽度为它
don't really understand what you ask 真的不明白你的要求
if you want to add a padding
, you can wrap you current ASStackLayoutSpec
with ASInsetLayoutSpec
如果你想添加
padding
,你可以用你当前ASStackLayoutSpec
与ASInsetLayoutSpec
...
let mainStack = ASStackLayoutSpec(
direction: .horizontal,
spacing: 16,
justifyContent: .start,
alignItems: .center,
children: [textNode])
let paddedMainStack = ASInsetLayoutSpec(insets: UIEdgeInsets(top: 16, left: 16, bottom: 16, right: 16), child: mainStack)
return paddedMainStack
...
then you will have your padding
然后你会有你的
padding
Happy Texturing 快乐纹理
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.