Simple Cell with AsyncDisplayKit Layout

Question

I'm trying to build the following design with Facebook's AsyncDisplayKit and I have problems building the Cells and the TableHeaderView.

Design:

Cells:

So each Cell has a ASImageNode and a ASEditableTextNode with the following Layout:

override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {
    var cellChildren = [ASLayoutElement]()

    let iconTextfieldStack = ASStackLayoutSpec.horizontal()
    iconTextfieldStack.alignItems = .center
    iconTextfieldStack.justifyContent = .start
    iconTextfieldStack.style.flexShrink = 1.0
    iconTextfieldStack.style.flexGrow = 1.0

    _iconImageView.style.preferredSize = CGSize(width: 30, height: 30)
    cellChildren.append(ASInsetLayoutSpec(insets: UIEdgeInsetsMake(10, 10, 10, 10), child: _iconImageView))

    _textField.style.spacingBefore = 10
    cellChildren.append(ASInsetLayoutSpec(insets: UIEdgeInsetsMake(0, 0, 0, 10), child: _textField))

    iconTextfieldStack.children = cellChildren


    return ASInsetLayoutSpec(insets: UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0), child: iconTextfieldStack)
}

The result looks like this:

As you can see the 3rd rows ASEditableTextNode exceeds the Cells width (first problem). The other thing is that the ASEditableTextNode doesn't expands its height (and the cells height) to display the lines of the ASEditableTextNode text. Also I'm getting this warning:

-[UIWindow endDisablingInterfaceAutorotationAnimated:] called on <UIRemoteKeyboardWindow: 0x1024c9c00; frame = (0 0; 375 667); opaque = NO; autoresize = W+H; layer = <UIWindowLayer: 0x17022e4c0>> without matching -beginDisablingInterfaceAutorotation. Ignoring.

Is there a way to accomplish this?

Answer 1

Thanx to the slack group I have solved the issue by changing the function to:

override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {
    var cellChildren = [ASLayoutElement]()

    let iconTextfieldStack = ASStackLayoutSpec.horizontal()
    iconTextfieldStack.alignItems = .center
    iconTextfieldStack.justifyContent = .start
    iconTextfieldStack.style.flexShrink = 1.0
    iconTextfieldStack.style.flexGrow = 1.0

    _iconImageView.style.preferredSize = CGSize(width: 30, height: 30)
    _iconImageView.style.alignSelf = .start
    cellChildren.append(ASInsetLayoutSpec(insets: UIEdgeInsetsMake(10, 10, 10, 10), child: _iconImageView))

    _textField.style.spacingBefore = 10

    let textInset = ASInsetLayoutSpec(insets: UIEdgeInsetsMake(10, 0, 10, 10), child: _textField)
    textInset.style.flexShrink = 1.0

    cellChildren.append(textInset)

    iconTextfieldStack.children = cellChildren


    return iconTextfieldStack
}

The main key was to add flexShrink to ASInsetLayoutSpec of the textfield