ASStackLayoutSpec() not in full width

[cdiscla]

I'm using AsyncDisplayKit to have a more responsive CollectionView. I have problems showing ASCollectionView header. I would like to have headers in full width of the collection view to right align the "Lorem ipsum" label but the result is attached and is not good; i would need the red background in the full width and the label on the right.

I've declared func collectionView(collectionView: ASCollectionView, constrainedSizeForNodeAtIndexPath indexPath: NSIndexPath) -> ASSizeRange { let width = collectionView.bounds.size.width return ASSizeRangeMake(CGSizeMake(width, 50), CGSizeMake(width, 50)) // Always fill the collection view width }

and override func layoutSpecThatFits(constrainedSize: ASSizeRange) -> ASLayoutSpec { let headerStack=ASStackLayoutSpec() headerStack.justifyContent=ASStackLayoutJustifyContent.End headerStack.setChildren([TitleTime!]) return headerStack } where TitleTime is the simple LoremIpsum ASTextNode() in the image What am i doing wrong?

Thanks in advance and thanks for this great library, i'm developing a complex project with videos in collectionViews that need non-laggy interfaces.

[hannahmbanana]

@cdiscla: could you provide a sample project (cmd + D on the project folder)?

It's much easier to debug layoutSpecs with actual code in front of me. :)

[maicki]

@cdiscla Your headerStack currently shrink to the size of the TitleTime node. You have to set a preferredFrameSize to the TitleTime or set a sizeRange for the headerStack with size = constrainedSize.max at least for the width

[cdiscla]

@maicki thanks for your message, i've tried with the two suggestions but the result is still the same, there must something wrong somewhere. @hannahmbanana thank you, i attach the two files where i have the problem (ASCollectionView and ReusableView), the whole project is too big. Thanks in advance !

Archive.zip

[appleguy]

Michael - preferredFrameSize should not be required for right-alignment, correct?

We'll try to take a look at the sample project soon - thanks for sending it! Join us on Slack if you aren't already, might be faster to coordinate :)

On Jul 10, 2016, at 5:47 PM, Cris Di Sclafani notifications@github.com wrote:

@maicki https://github.com/maicki thanks for your message, i've tried with the two suggestions but the result is still the same, there must something wrong somewhere. @hannahmbanana https://github.com/hannahmbanana thank you, i attach the two files where i have the problem (ASCollectionView and ReusableView), the whole project is too big. Thanks in advance !

Archive.zip https://github.com/facebook/AsyncDisplayKit/files/356285/Archive.zip — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/facebook/AsyncDisplayKit/issues/1882#issuecomment-231621215, or mute the thread https://github.com/notifications/unsubscribe/AAigA_WFkyH3bqREM373PbuUF8_wok_dks5qUZKQgaJpZM4JI8z2.

[maicki]

@appleguy it is necessary to provide a max size for the header stack I guess, as the header stack will shrink to the size of the text node and so you can set it to align right but it does nothing.

@cdiscla After thinking a bit more can you try setting the sizeRange of the stack spec to the constrained max and wrap that in a static layout spec?

The preferredFrameSize will not work as the text node would stretch to much.

On Jul 10, 2016, at 6:03 PM, appleguy notifications@github.com wrote:

Michael - preferredFrameSize should not be required for right-alignment, correct?

We'll try to take a look at the sample project soon - thanks for sending it! Join us on Slack if you aren't already, might be faster to coordinate :)

On Jul 10, 2016, at 5:47 PM, Cris Di Sclafani notifications@github.com wrote:

@maicki https://github.com/maicki thanks for your message, i've tried with the two suggestions but the result is still the same, there must something wrong somewhere. @hannahmbanana https://github.com/hannahmbanana thank you, i attach the two files where i have the problem (ASCollectionView and ReusableView), the whole project is too big. Thanks in advance !

Archive.zip https://github.com/facebook/AsyncDisplayKit/files/356285/Archive.zip — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/facebook/AsyncDisplayKit/issues/1882#issuecomment-231621215, or mute the thread https://github.com/notifications/unsubscribe/AAigA_WFkyH3bqREM373PbuUF8_wok_dks5qUZKQgaJpZM4JI8z2.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[maicki]

@cdiscla Just confirmed that's the code you would need:

class HeaderNode: ASDisplayNode {

    let textNode = ASTextNode()

    override init() {
        super.init()

        textNode.attributedText = NSAttributedString(string: "Some String")
        textNode.backgroundColor = .redColor()
        self.addSubnode(textNode)
    }

    override func layoutSpecThatFits(constrainedSize: ASSizeRange) -> ASLayoutSpec {
        let headerStack = ASStackLayoutSpec()
        headerStack.justifyContent = ASStackLayoutJustifyContent.End
        headerStack.setChildren([textNode])
        headerStack.sizeRange = ASRelativeSizeRangeMake(ASRelativeSizeMakeWithCGSize(CGSizeMake(constrainedSize.max.width, 0)),
                                    ASRelativeSizeMakeWithCGSize(constrainedSize.max))
        return ASStaticLayoutSpec(children: [headerStack])
    }
}

[cdiscla]

Great @maicki , it runs fine ! Thank you very much, guys!

[BKRApps]

for the latest versions, use the below code snippet.

let horizontalStack = ASStackLayoutSpec()
horizontalStack.direction = .horizontal
horizontalStack.style.minSize = CGSize(width: 375, height: 0) // 375 max width // UIScreen.main.bounds.size.width
horizontalStack.style.maxSize = CGSize(width: 375, height: 200) // 200 or  max height according to requirement
horizontalStack.children = [nameNode, addressNode]