From 03045ee5494929a239d3eec8375c2da818b2d390 Mon Sep 17 00:00:00 2001 From: jaichaudhry Date: Tue, 13 Dec 2016 09:15:33 +0530 Subject: [PATCH] [PhotoCellNode]Update formatting of layoutSpec to a flat structure. (#2732) * [PhotoCellNode]Update formatting of layoutSpec to a flat structure. * [PhotoCellNode] Adding a flag to switch between flat and tree like structure of layout specs. --- examples/ASDKgram/Sample/PhotoCellNode.m | 201 ++++++++++++++--------- 1 file changed, 127 insertions(+), 74 deletions(-) diff --git a/examples/ASDKgram/Sample/PhotoCellNode.m b/examples/ASDKgram/Sample/PhotoCellNode.m index da408f7b6a..04dad18722 100644 --- a/examples/ASDKgram/Sample/PhotoCellNode.m +++ b/examples/ASDKgram/Sample/PhotoCellNode.m @@ -25,6 +25,9 @@ #import "PINImageView+PINRemoteImage.h" #import "PINButton+PINRemoteImage.h" +// Use this to change the formatting of code you want in layoutSpecs. +#define FLAT_LAYOUT 0 + #define DEBUG_PHOTOCELL_LAYOUT 0 #define HEADER_HEIGHT 50 @@ -113,89 +116,139 @@ - (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize { +#if FLAT_LAYOUT // This returns the layout specs in a flat structure. + // Avatar image with inset + _userAvatarImageView.style.preferredSize = CGSizeMake(USER_IMAGE_HEIGHT, USER_IMAGE_HEIGHT); + ASInsetLayoutSpec *avatarInset = [ASInsetLayoutSpec insetLayoutSpecWithInsets:UIEdgeInsetsMake(HORIZONTAL_BUFFER, 0, HORIZONTAL_BUFFER, HORIZONTAL_BUFFER) + child:_userAvatarImageView]; + + // User and photo location stack + ASStackLayoutSpec *userPhotoLocationStack = [ASStackLayoutSpec verticalStackLayoutSpec]; + userPhotoLocationStack.style.flexShrink = 1.0; + _userNameLabel.style.flexShrink = 1.0; + if (_photoLocationLabel.attributedText) { + _photoLocationLabel.style.flexShrink = 1.0; + [userPhotoLocationStack setChildren:@[_userNameLabel, _photoLocationLabel]]; + } else { + [userPhotoLocationStack setChild:_userNameLabel]; + } + + // Spacer between user / photo location and photo time inverval + ASLayoutSpec *spacer = [ASLayoutSpec new]; + spacer.style.flexGrow = 1.0; + + // Photo and time interval node + _photoTimeIntervalSincePostLabel.style.spacingBefore = HORIZONTAL_BUFFER; + + // Header stack + ASStackLayoutSpec *headerStack = [ASStackLayoutSpec horizontalStackLayoutSpec]; + headerStack.alignItems = ASStackLayoutAlignItemsCenter; + headerStack.children = @[avatarInset, userPhotoLocationStack, spacer, _photoTimeIntervalSincePostLabel]; + + ASInsetLayoutSpec *headerStackInset = [ASInsetLayoutSpec insetLayoutSpecWithInsets:UIEdgeInsetsMake(0, HORIZONTAL_BUFFER, 0, HORIZONTAL_BUFFER) + child:headerStack]; + + // Center photo with ratio + ASRatioLayoutSpec *centerPhoto = [ASRatioLayoutSpec ratioLayoutSpecWithRatio:1.0 child:_photoImageView]; + + // Footer stack + ASStackLayoutSpec *footerStack = [ASStackLayoutSpec verticalStackLayoutSpec]; + footerStack.spacing = VERTICAL_BUFFER; + footerStack.children = @[_photoLikesLabel, _photoDescriptionLabel, _photoCommentsView]; + + ASInsetLayoutSpec *footerInset = [ASInsetLayoutSpec insetLayoutSpecWithInsets:UIEdgeInsetsMake(VERTICAL_BUFFER, HORIZONTAL_BUFFER, VERTICAL_BUFFER, HORIZONTAL_BUFFER) + child:footerStack]; + + // Main stack + ASStackLayoutSpec *mainStack = [ASStackLayoutSpec verticalStackLayoutSpec]; + mainStack.children = @[headerStackInset, centerPhoto, footerInset]; + return mainStack; + +#else // This demonstrates how the final layout tree would look like. return - // Main stack - [ASStackLayoutSpec - stackLayoutSpecWithDirection:ASStackLayoutDirectionVertical - spacing:0 - justifyContent:ASStackLayoutJustifyContentStart - alignItems:ASStackLayoutAlignItemsStretch - children:@[ - - // Header stack with inset - [ASInsetLayoutSpec - insetLayoutSpecWithInsets:UIEdgeInsetsMake(0, HORIZONTAL_BUFFER, 0, HORIZONTAL_BUFFER) - child: - // Header stack - [ASStackLayoutSpec - stackLayoutSpecWithDirection:ASStackLayoutDirectionHorizontal - spacing:0.0 - justifyContent:ASStackLayoutJustifyContentStart - alignItems:ASStackLayoutAlignItemsCenter - children:@[ - // Avatar image with inset - [ASInsetLayoutSpec - insetLayoutSpecWithInsets:UIEdgeInsetsMake(HORIZONTAL_BUFFER, 0, HORIZONTAL_BUFFER, HORIZONTAL_BUFFER) - child: - [_userAvatarImageView styledWithBlock:^(ASLayoutElementStyle *style) { + // Main stack + [ASStackLayoutSpec + stackLayoutSpecWithDirection:ASStackLayoutDirectionVertical + spacing:0 + justifyContent:ASStackLayoutJustifyContentStart + alignItems:ASStackLayoutAlignItemsStretch + children:@[ + + // Header stack with inset + [ASInsetLayoutSpec + insetLayoutSpecWithInsets:UIEdgeInsetsMake(0, HORIZONTAL_BUFFER, 0, HORIZONTAL_BUFFER) + child: + // Header stack + [ASStackLayoutSpec + stackLayoutSpecWithDirection:ASStackLayoutDirectionHorizontal + spacing:0.0 + justifyContent:ASStackLayoutJustifyContentStart + alignItems:ASStackLayoutAlignItemsCenter + children:@[ + // Avatar image with inset + [ASInsetLayoutSpec + insetLayoutSpecWithInsets:UIEdgeInsetsMake(HORIZONTAL_BUFFER, 0, HORIZONTAL_BUFFER, HORIZONTAL_BUFFER) + child: + [_userAvatarImageView styledWithBlock:^(ASLayoutElementStyle *style) { style.preferredSize = CGSizeMake(USER_IMAGE_HEIGHT, USER_IMAGE_HEIGHT); }] - ], - // User and photo location stack - [[ASStackLayoutSpec - stackLayoutSpecWithDirection:ASStackLayoutDirectionVertical - spacing:0.0 - justifyContent:ASStackLayoutJustifyContentStart - alignItems:ASStackLayoutAlignItemsStretch - children:_photoLocationLabel.attributedText ? @[ - [_userNameLabel styledWithBlock:^(ASLayoutElementStyle *style) { + ], + // User and photo location stack + [[ASStackLayoutSpec + stackLayoutSpecWithDirection:ASStackLayoutDirectionVertical + spacing:0.0 + justifyContent:ASStackLayoutJustifyContentStart + alignItems:ASStackLayoutAlignItemsStretch + children:_photoLocationLabel.attributedText ? @[ + [_userNameLabel styledWithBlock:^(ASLayoutElementStyle *style) { style.flexShrink = 1.0; }], - [_photoLocationLabel styledWithBlock:^(ASLayoutElementStyle *style) { + [_photoLocationLabel styledWithBlock:^(ASLayoutElementStyle *style) { style.flexShrink = 1.0; }] - ] : - @[ - [_userNameLabel styledWithBlock:^(ASLayoutElementStyle *style) { + ] : + @[ + [_userNameLabel styledWithBlock:^(ASLayoutElementStyle *style) { style.flexShrink = 1.0; }] - ]] - styledWithBlock:^(ASLayoutElementStyle *style) { - style.flexShrink = 1.0; - }], - // Spacer between user / photo location and photo time inverval - [[ASLayoutSpec new] styledWithBlock:^(ASLayoutElementStyle *style) { - style.flexGrow = 1.0; - }], - // Photo and time interval node - [_photoTimeIntervalSincePostLabel styledWithBlock:^(ASLayoutElementStyle *style) { - // to remove double spaces around spacer - style.spacingBefore = HORIZONTAL_BUFFER; - }] - ]] - ], - - // Center photo with ratio - [ASRatioLayoutSpec - ratioLayoutSpecWithRatio:1.0 - child:_photoImageView], - - // Footer stack with inset - [ASInsetLayoutSpec - insetLayoutSpecWithInsets:UIEdgeInsetsMake(VERTICAL_BUFFER, HORIZONTAL_BUFFER, VERTICAL_BUFFER, HORIZONTAL_BUFFER) - child: - [ASStackLayoutSpec - stackLayoutSpecWithDirection:ASStackLayoutDirectionVertical - spacing:VERTICAL_BUFFER - justifyContent:ASStackLayoutJustifyContentStart - alignItems:ASStackLayoutAlignItemsStretch - children:@[ - _photoLikesLabel, - _photoDescriptionLabel, - _photoCommentsView - ]] - ] - ]]; + ]] + styledWithBlock:^(ASLayoutElementStyle *style) { + style.flexShrink = 1.0; + }], + // Spacer between user / photo location and photo time inverval + [[ASLayoutSpec new] styledWithBlock:^(ASLayoutElementStyle *style) { + style.flexGrow = 1.0; + }], + // Photo and time interval node + [_photoTimeIntervalSincePostLabel styledWithBlock:^(ASLayoutElementStyle *style) { + // to remove double spaces around spacer + style.spacingBefore = HORIZONTAL_BUFFER; + }] + ]] + ], + + // Center photo with ratio + [ASRatioLayoutSpec + ratioLayoutSpecWithRatio:1.0 + child:_photoImageView], + + // Footer stack with inset + [ASInsetLayoutSpec + insetLayoutSpecWithInsets:UIEdgeInsetsMake(VERTICAL_BUFFER, HORIZONTAL_BUFFER, VERTICAL_BUFFER, HORIZONTAL_BUFFER) + child: + [ASStackLayoutSpec + stackLayoutSpecWithDirection:ASStackLayoutDirectionVertical + spacing:VERTICAL_BUFFER + justifyContent:ASStackLayoutJustifyContentStart + alignItems:ASStackLayoutAlignItemsStretch + children:@[ + _photoLikesLabel, + _photoDescriptionLabel, + _photoCommentsView + ]] + ] + ]]; +#endif } #pragma mark - Instance Methods