[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.
2026-01-06 21:22:44 +00:00 · 2016-12-13 09:15:33 +05:30
parent eeb977e145
commit 03045ee549
1 changed files with 127 additions and 74 deletions
--- 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