How to set nodes layouts in AsyncDisplayKit

Question

I am trying to set layouts for the nodes in AsyncDisplayKit for a userProfile setting but not getting the desired result.

I have a userProfile image
userName label
setting button
posts, comments and likes button I want to set all the nodes in horizontal and vertical alignment

Here is my code in layoutSpecThatFits method

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

    photoNode.style.preferredSize = CGSize(width: ImageSize, height: ImageSize)
    settingButton.style.preferredSize = CGSize(width: 100, height: 50)
    label.style.preferredSize = CGSize(width: 100, height: 50)
    editbutton.style.preferredSize = CGSize(width: 120, height: 40)

    settingButton.style.alignSelf = .stretch
    let layout = ASStackLayoutSpec.horizontal()
    layout.alignItems = .center
    layout.justifyContent = .spaceAround
    layout.spacing = 10

    layout.children = [photoNode,settingButton]
   let settingButtonStackLocation = ASStackLayoutSpec(direction: .vertical,
                                        spacing: 15,
                                        justifyContent: .center,
                                        alignItems: .center,
                                        children: [layout,label,editbutton])
    settingButtonStackLocation.style.flexShrink = 1.0
    settingButtonStackLocation.style.flexGrow = 1.0





  let insets = UIEdgeInsets(top: 50, left: 30, bottom: 0, right: 30)
    let inset =  ASInsetLayoutSpec(insets: insets, child: settingButtonStackLocation)

    let horizontalButtonsStack = ASStackLayoutSpec.horizontal()
    horizontalButtonsStack.children = [postsButton,bucketButton,likesButton]
    horizontalButtonsStack.spacing = 20
    let verticalStack = ASStackLayoutSpec.vertical()
    verticalStack.children = [inset,horizontalButtonsStack]
    verticalStack.spacing = 10
    let buttonInsets = UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 20)
    let buttonWithInsets = ASInsetLayoutSpec(insets: buttonInsets, child: verticalStack)

    let horizontalFollowersStack = ASStackLayoutSpec.horizontal()
    horizontalFollowersStack.children = [followersButton,followingButton]
    horizontalFollowersStack.spacing = 10
    let verticalFollowers = ASStackLayoutSpec.vertical()
    verticalFollowers.children = [buttonWithInsets,horizontalFollowersStack]
    verticalFollowers.spacing = 10
    verticalFollowers.alignItems = .center

    let followersInsets = UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 20)
    let followersWithInsets = ASInsetLayoutSpec(insets: followersInsets, child: verticalFollowers)


    return followersWithInsets
 }

`settingButton` should of aspect ratio 1:1 , try with `settingButton.style.preferredSize = CGSize(width: 100, height: 100)` — swetansh kumar, Nov 06 '17 at 07:09
@swetanshkumar what should be the aspect ratio?can you please explain it — Sipa, Nov 07 '17 at 05:44
@Sipa you can calculate each image's aspect ratio by its pixel's ratio which is given in its properties. — swetansh kumar, Nov 07 '17 at 05:49
@Sipa just share a small proj. with image what u try do, and i try made layouts for you. Its will be more helpful for us, and more useful for understand how its work for u. — Bimawa, Nov 29 '17 at 00:03
@Bimawa i have uploaded my code snipped here for layouts which i had tried,the full project contained cocoapods and the its big stuff to upload here can you give me your email i will send you.... — Sipa, Dec 01 '17 at 03:30
@Bimawa see it now i edited my question with an image which i actually wana make... — Sipa, Dec 03 '17 at 05:24

score 0 · Answer 1 · answered Dec 06 '17 at 12:11

I think i found solution for you:

    [containerViewNode setLayoutSpecBlock:^ASLayoutSpec *(__kindof ASDisplayNode *node, ASSizeRange constrainedSize) {
        avatarImage.style.preferredSize = CGSizeMake(35, 35);
        settingsIcon.style.preferredSize = CGSizeMake(15, 15);
        ASCenterLayoutSpec *avatarCenterSpec = [[ASCenterLayoutSpec alloc] initWithHorizontalPosition:ASRelativeLayoutSpecPositionCenter verticalPosition:ASRelativeLayoutSpecPositionCenter sizingOption:ASRelativeLayoutSpecSizingOptionDefault child:avatarImage];
        avatarCenterSpec.style.flexBasis = ASDimensionMakeWithPoints(100);
        ASRelativeLayoutSpec *gearSpec = [[ASRelativeLayoutSpec alloc] initWithHorizontalPosition:ASRelativeLayoutSpecPositionEnd verticalPosition:ASRelativeLayoutSpecPositionStart sizingOption:ASRelativeLayoutSpecSizingOptionDefault child:settingsIcon];
        ASOverlayLayoutSpec *overlayLayoutSpec = [ASOverlayLayoutSpec overlayLayoutSpecWithChild:avatarCenterSpec overlay:gearSpec];
        ASStackLayoutSpec *mainSpec = [ASStackLayoutSpec stackLayoutSpecWithDirection:ASStackLayoutDirectionVertical spacing:0 justifyContent:ASStackLayoutJustifyContentCenter alignItems:ASStackLayoutAlignItemsStretch children:@[overlayLayoutSpec, textNodeStub]];
        return mainSpec;
    }];

Look at on ASOverlayLayoutSpec how it works with ASRelativeLayoutSpec. Example project i share on github.

How to set nodes layouts in AsyncDisplayKit

1 Answers1