Question

我正在学习AsyncDisplayKit/Texture。我正在尝试使用自定义单元格创建一个ASTableNode。

我正在努力了解如何正确设置和锚定在ExampleNode中创建的节点。

我已经尝试过了

   override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {

        let stack = ASStackLayoutSpec.vertical()
        stack.children = textNode
        return stack
    }

但是有错误

无法将类型为“ ASTextNode”的值分配为类型为“ [ASLayoutElement]”吗？

然后我用{p>更新了layoutSpecThatFits

override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {
  return ASStackLayoutSpec(
        direction: .horizontal,
        spacing: 16,
        justifyContent: .start,
        alignItems: .center,
        children: [textNode]
    )
}

但是，这使文本右移到单元格左侧。完全不应用间距。

我正在努力寻找使用该方法的指南，因此，如果答案很明显，请原谅我。

使用下面的类将节点添加到单元格的正确方法是什么？

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]
        )
    }
}

Answer 1

看看纹理仓库ASDKgram-Swift中的PhotoTableNodeCell示例。


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
    }
}

Answer 2

ASTexNode将计算其width的长度，如果您没有为其设置任何宽度

不太了解您的要求

如果要添加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
...

然后您将拥有padding

快乐纹理

如何使用Texture在ASCellNode中正确添加节点

2 个答案: