how to float to sides in ASStackLayoutSpec

[MarvinNazari]

Hi, i have a set of buttons in a ASDisplayNode, is there any way i could make them float to sides (like button to left side, and more button to right side)

this is my code

class STCellFooterView: ASDisplayNode {

private let likeButtonNode: ASButtonNode
private let moreButtonNode: ASButtonNode

init(string: String? = nil) {

    likeButtonNode = ASButtonNode()
    likeButtonNode.setImage(UIImage(named: "like_dark_flow"), forState: ASButtonStateNormal)

    moreButtonNode = ASButtonNode()
    moreButtonNode.setImage(UIImage(named: "more_dark"), forState: ASButtonStateNormal)

    super.init()

    addSubnode(likeButtonNode)
    addSubnode(moreButtonNode)
}

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

    let buttonLayout = ASStackLayoutSpec(direction: .Horizontal, spacing: 13, justifyContent: .Start, alignItems: .Center, children: [likeButtonNode, moreButtonNode])

    return ASInsetLayoutSpec(
        insets:UIEdgeInsetsMake(0, 13, 13, 13),
        child: buttonLayout)        
}
}

this is how it shows now:

but i want it like this:

Thanks.

[smiLLe]

Correct solution #848

Until then you can try to create an ASDisplayNode (spacerNode) with flexGrow = YES and set the children to [likeButtonNode, spacerNode, moreButtonNode]

@nguyenhuy are there any other approaches atm?

[MarvinNazari]

Hi @smiLLe,
I changed to this but still no luck.

let spacer = ASDisplayNode()
spacer.flexGrow = true

let buttonLayout = ASStackLayoutSpec(direction: .Horizontal, spacing: 13, justifyContent: .Start, alignItems: .Center, children: [likeButtonNode, spacer, moreButtonNode])

return ASInsetLayoutSpec(
            insets:UIEdgeInsetsMake(0, 13, 13, 13),
            child: buttonLayout)

[smiLLe]

Uhm, i guess it is because your InsetLayoutSpec does not grow. It takes the width of it's subnodes.

[nguyenhuy]

@smiLLe Besides "space between", using a flexGrow spacer is the best approach that I know of.

@MarvinNazari What is the constrained size passed to your cell nodes, especially the minimum width? flexGrow is only taken into account if, after the first layout calculation, the horizontal stack takes less space than the minimum width. If you are using a collection view, the default minimum width is 0. In this case, you need to provide a different constrained size:

func collectionView(collectionView: ASCollectionView!, constrainedSizeForNodeAtIndexPath indexPath: NSIndexPath!) -> ASSizeRange {
    let width = collectionView.bounds.width;
    return ASSizeRangeMake(CGSizeMake(width, 0), CGSizeMake(width, CGFloat.max)) // Always fill the collection view width
}

[nguyenhuy]

Oh, and the spacer can be an ASLayoutSpec instance. It's cheaper than a display node.

[MarvinNazari]

I use UITableView how can i set the constrainedSizeForNodeAtIndexPath for UITableView

[nguyenhuy]

Oh, then the constrained size passed to your cell node should be correct. Something must not be right with your layout code. Could you please share your cell node as well, because I think this footer node is wrapped inside a cell node, no? The layout code of your footer looks correct to me. Happy to help you debug if you can share more.

And you may want to take a look at the SocialLayoutApp, especially here. PostNode is a cell node used inside a table view that also uses a spacer to push some nodes away from each other horizontally.

[MarvinNazari]

here is the project

[nguyenhuy]

Got it. Because your horizontal stack of the footer node (H) is used inside a vertical stack of the cell node (V), V asks H to measure with a min width of 0.

To force H to fill the entire width of V, you can set its alignSelf to "stretch" (footerNode.alignSelf = .Stretch).

Let me know if my explanation isn't clear enough and I will try my best to make it clearer :)

[smiLLe]

@nguyenhuy didn't know ASLayoutSpec is cheaper , thanks :) I come from CK and until today i did not use ASDK.

I think @MarvinNazari is missing a Stretch for the footerNode

[nguyenhuy]

@smiLLe: IIRC, CK*LayoutComponents are subclasses of CKComponent and basically have everything CKComponent has, including a backing view.

In ASDK, both ASLayoutSpec and ASDisplayNode conform to ASLayoutable protocol. But unlike an ASDisplayNode, an ASLayoutSpec doesn't have any backing store (view/layer) and many other properties. It just purely provides some layout properties (that ASLayoutable requires) and an algorithm for laying out its ASLayoutable children. In fact, it only exists during a layout pass and is thrown away right after an ASLayout object is calculated.

You got the "Stretch" thing right after me :) Thanks for answering questions lately and welcome to the community.

[smiLLe]

@nguyenhuy Thanks for this detailed answer. I am following ASDK for quite a while now and you contributed some really cool stuff! I have lots of layouting experience in CK and want to help people as much as possible.

[nguyenhuy]

You're welcome. And thanks for the kind words. The layout system is powerful but has quite a steep learning curve. Any help is really appreciated 👍

[MarvinNazari]

yeah! that solved it! thanks for the help 👍

[lakhman]

If it helps others, the OP updated the github repo, the commit with the fix is here:

https://github.com/MarvinNazari/AsyncTest/commit/506c711f23b97ea42e581c1899b389d4d0763dc9

It helped me out, the line I needed when init'ing my subnode was:

self.alignSelf = .Stretch

This allows the subnode to stretch full width, call this on your parent node if your want that to stretch full width also.
also, if you haven't already, this is a good time to play with the spacing properties to see how they add spacing before and after. Once you have your node stretched, you can play with the following to add spacing if required.

subnodeLeft.spacingBefore = 3.0 // Add spacing before the left aligned node
subnodeRight.spacingAfter = 3.0 // Add spacing before the left aligned node

If you need padding top and bottom, you can use the inset layout spec.

This post helped me, I was searching for: (keywords)
AsyncDisplayKit full width node
AsyncDisplayKit stretch node full width
AsyncDisplayKit layout sizing width
AsyncDisplayKit add padding

👍