ThePain/Swiftgram
1
0
Fork 0
mirror of https://github.com/Swiftgram/Telegram-iOS.git synced 2025-12-22 22:25:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Layout] Layout API based on content area (#2110)

Browse Source 
* Initial commit for adding a size constraint to ASLayoutable's

* Some more commits

* Fix sample projects in extra/

* Remove preferredFrameSize test of ASEditableTextNode

* Remove preferredFrameSize from examples_extra

* Add deprecation warning to -[ASDisplayNode preferredFrameSize]

* Add deprecation warning to -[ASDisplayNode measureWithSizeRange:]

* Commit

* Commit

* Remove ASRelativeSizeRange

* Make ASRelativeSize private

* Adjust examples

* Improve setting of -[ASLayoutable size] with points or fractions

* Add ASWrapperLayoutSpec

* Improve creation of ASRelativeDimension

* Add `preferredFrameSize` back and add deprecated logging

* Add `layoutSpecBlock` setter and getter and add locking for it

* Add better documentation and fix macros to create ASRelativeDimension

* Create new ASSizeRangeMake with just a CGSize as parameter

* Update Kitten and Social App Layout example

* Add layoutThatFits: and deprecate measure:

* Rename ASRelativeDimension to ASDimension

* Fix examples for ASDimension renaming

* Remove fancy height and width setter

* Fix ASDimension helper

* Rename -[ASLayout layoutableObject] to -[ASLayout layoutable]

* Update layout related methods and more clearer documentation around how to use it

* Deprecate old ASLayout class constructors

* Don't unnecessary recalculate layout if constrained or parent size did not change

* Use shared pointer for ASDisplayNodeLayout

* Fix rebase conflicts

* Add documentation and move implementation in mm file of ASDisplayNodeLayout

* Fix test errors

* Rename ASSize to ASLayoutableSize

* Address comments

* Rename setSizeFromCGSize to setSizeWithCGSize

* Improve inline functions in ASDimension

* Fix rebase conflicts
This commit is contained in:
Michael Schneider
2016-09-07 17:44:48 +02:00
committed by Adlai Holler
parent 2bfeb6de92
commit 8897614f0e
109 changed files with 2089 additions and 1304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
examples/SocialAppLayout/Sample/CommentsNode.m
View File

@@ -52,13 +52,19 @@
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize
{
ASStackLayoutSpec *mainStack = [ASStackLayoutSpec stackLayoutSpecWithDirection:ASStackLayoutDirectionHorizontal spacing:6.0 justifyContent:ASStackLayoutJustifyContentStart alignItems:ASStackLayoutAlignItemsCenter children:@[self.iconNode, self.countNode]];
ASStackLayoutSpec *mainStack =
[ASStackLayoutSpec
stackLayoutSpecWithDirection:ASStackLayoutDirectionHorizontal
spacing:6.0
justifyContent:ASStackLayoutJustifyContentStart
alignItems:ASStackLayoutAlignItemsCenter
children:@[_iconNode, _countNode]];
// set sizeRange to make width fixed to 60
ASRelativeSize min = ASRelativeSizeMake(ASRelativeDimensionMakeWithPoints(60.0), ASRelativeDimensionMakeWithPoints(0.0));
ASRelativeSize max = ASRelativeSizeMake(ASRelativeDimensionMakeWithPoints(60.0), ASRelativeDimensionMakeWithPoints(40.0));
mainStack.sizeRange = ASRelativeSizeRangeMake(min,max);
return [ASStaticLayoutSpec staticLayoutSpecWithChildren:@[mainStack]];
// Adjust size
mainStack.minWidth = ASDimensionMakeWithPoints(60.0);
mainStack.maxHeight = ASDimensionMakeWithPoints(40.0);
return mainStack;
}
@end

19
examples/SocialAppLayout/Sample/LikesNode.m
View File

@@ -66,13 +66,18 @@
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize
{
ASStackLayoutSpec *mainStack = [ASStackLayoutSpec stackLayoutSpecWithDirection:ASStackLayoutDirectionHorizontal spacing:6.0 justifyContent:ASStackLayoutJustifyContentStart alignItems:ASStackLayoutAlignItemsCenter children:@[_iconNode, _countNode]];
// set sizeRange to make width fixed to 60
ASRelativeSize min = ASRelativeSizeMake(ASRelativeDimensionMakeWithPoints(60.0), ASRelativeDimensionMakeWithPoints(0.0));
ASRelativeSize max = ASRelativeSizeMake(ASRelativeDimensionMakeWithPoints(60.0), ASRelativeDimensionMakeWithPoints(40.0));
mainStack.sizeRange = ASRelativeSizeRangeMake(min, max);
return [ASStaticLayoutSpec staticLayoutSpecWithChildren:@[mainStack]];
ASStackLayoutSpec *mainStack =
[ASStackLayoutSpec
stackLayoutSpecWithDirection:ASStackLayoutDirectionHorizontal
spacing:6.0
justifyContent:ASStackLayoutJustifyContentStart
alignItems:ASStackLayoutAlignItemsCenter
children:@[_iconNode, _countNode]];
mainStack.minWidth = ASDimensionMakeWithPoints(60.0);
mainStack.maxHeight = ASDimensionMakeWithPoints(40.0);
return mainStack;
}
@end

67
examples/SocialAppLayout/Sample/PostNode.m
View File

@@ -20,6 +20,7 @@
#import "TextStyles.h"
#import "LikesNode.h"
#import "CommentsNode.h"
#import "ASRelativeSize.h"
#define PostNodeDividerColor [UIColor lightGrayColor]
@@ -136,7 +137,8 @@
// User pic
_avatarNode = [[ASNetworkImageNode alloc] init];
_avatarNode.backgroundColor = ASDisplayNodeDefaultPlaceholderColor();
_avatarNode.preferredFrameSize = CGSizeMake(44, 44);
_avatarNode.width = ASDimensionMakeWithPoints(44);
_avatarNode.height = ASDimensionMakeWithPoints(44);
_avatarNode.cornerRadius = 22.0;
_avatarNode.URL = [NSURL URLWithString:_post.photo];
_avatarNode.imageModificationBlock = ^UIImage *(UIImage *image) {
@@ -214,7 +216,10 @@
// NOTE: This inset is not actually required by the layout, but is an example of the upward propogation of layoutable
// properties. Specifically, .flexGrow from the child is transferred to the inset spec so they can expand together.
// Without this capability, it would be required to set insetSpacer.flexGrow = YES;
ASInsetLayoutSpec *insetSpacer = [ASInsetLayoutSpec insetLayoutSpecWithInsets:UIEdgeInsetsMake(0, 0, 0, 0) child:spacer];
ASInsetLayoutSpec *insetSpacer =
[ASInsetLayoutSpec
insetLayoutSpecWithInsets:UIEdgeInsetsMake(0, 0, 0, 0)
child:spacer];
// Horizontal stack for name, username, via icon and time
NSMutableArray *layoutSpecChildren = [@[_nameNode, _usernameNode, insetSpacer] mutableCopy];
@@ -223,11 +228,23 @@
}
[layoutSpecChildren addObject:_timeNode];
ASStackLayoutSpec *nameStack = [ASStackLayoutSpec stackLayoutSpecWithDirection:ASStackLayoutDirectionHorizontal spacing:5.0 justifyContent:ASStackLayoutJustifyContentStart alignItems:ASStackLayoutAlignItemsCenter children:layoutSpecChildren];
ASStackLayoutSpec *nameStack =
[ASStackLayoutSpec
stackLayoutSpecWithDirection:ASStackLayoutDirectionHorizontal
spacing:5.0
justifyContent:ASStackLayoutJustifyContentStart
alignItems:ASStackLayoutAlignItemsCenter
children:layoutSpecChildren];
nameStack.alignSelf = ASStackLayoutAlignSelfStretch;
// bottom controls horizontal stack
ASStackLayoutSpec *controlsStack = [ASStackLayoutSpec stackLayoutSpecWithDirection:ASStackLayoutDirectionHorizontal spacing:10 justifyContent:ASStackLayoutJustifyContentStart alignItems:ASStackLayoutAlignItemsCenter children:@[_likesNode, _commentsNode, _optionsNode]];
ASStackLayoutSpec *controlsStack =
[ASStackLayoutSpec
stackLayoutSpecWithDirection:ASStackLayoutDirectionHorizontal
spacing:10
justifyContent:ASStackLayoutJustifyContentStart
alignItems:ASStackLayoutAlignItemsCenter
children:@[_likesNode, _commentsNode, _optionsNode]];
// Add more gaps for control line
controlsStack.spacingAfter = 3.0;
@@ -237,26 +254,46 @@
[mainStackContent addObject:nameStack];
[mainStackContent addObject:_postNode];
if (![_post.media isEqualToString:@""]) {
CGFloat imageRatio = (_mediaNode.image != nil ? _mediaNode.image.size.height / _mediaNode.image.size.width : 0.5);
ASRatioLayoutSpec *imagePlace = [ASRatioLayoutSpec ratioLayoutSpecWithRatio:imageRatio child:_mediaNode];
imagePlace.spacingAfter = 3.0;
imagePlace.spacingBefore = 3.0;
[mainStackContent addObject:imagePlace];
if (![_post.media isEqualToString:@""]){
// Only add the media node if an image is present
if (_mediaNode.image != nil) {
CGFloat imageRatio = (_mediaNode.image != nil ? _mediaNode.image.size.height / _mediaNode.image.size.width : 0.5);
ASRatioLayoutSpec *imagePlace =
[ASRatioLayoutSpec
ratioLayoutSpecWithRatio:imageRatio
child:_mediaNode];
imagePlace.spacingAfter = 3.0;
imagePlace.spacingBefore = 3.0;
[mainStackContent addObject:imagePlace];
}
}
[mainStackContent addObject:controlsStack];
// Vertical spec of cell main content
ASStackLayoutSpec *contentSpec = [ASStackLayoutSpec stackLayoutSpecWithDirection:ASStackLayoutDirectionVertical spacing:8.0 justifyContent:ASStackLayoutJustifyContentStart alignItems:ASStackLayoutAlignItemsStart children:mainStackContent];
contentSpec.alignItems = ASStackLayoutAlignSelfStretch;
ASStackLayoutSpec *contentSpec =
[ASStackLayoutSpec
stackLayoutSpecWithDirection:ASStackLayoutDirectionVertical
spacing:8.0
justifyContent:ASStackLayoutJustifyContentStart
alignItems:ASStackLayoutAlignItemsStretch
children:mainStackContent];
contentSpec.flexShrink = YES;
// Horizontal spec for avatar
ASStackLayoutSpec *avatarContentSpec = [ASStackLayoutSpec stackLayoutSpecWithDirection:ASStackLayoutDirectionHorizontal spacing:8.0 justifyContent:ASStackLayoutJustifyContentStart alignItems:ASStackLayoutAlignItemsStart children:@[_avatarNode, contentSpec]];
ASStackLayoutSpec *avatarContentSpec =
[ASStackLayoutSpec
stackLayoutSpecWithDirection:ASStackLayoutDirectionHorizontal
spacing:8.0
justifyContent:ASStackLayoutJustifyContentStart
alignItems:ASStackLayoutAlignItemsStart
children:@[_avatarNode, contentSpec]];
return [ASInsetLayoutSpec insetLayoutSpecWithInsets:UIEdgeInsetsMake(10, 10, 10, 10) child:avatarContentSpec];
return [ASInsetLayoutSpec
insetLayoutSpecWithInsets:UIEdgeInsetsMake(10, 10, 10, 10)
child:avatarContentSpec];
}

2
examples/SocialAppLayout/Sample/ViewController.m
View File

@@ -55,7 +55,7 @@
{
[super viewDidLoad];
self.tableView = [[ASTableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain asyncDataFetching:YES];
self.tableView = [[ASTableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
self.tableView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone; // SocialAppNode has its own separator
self.tableView.asyncDataSource = self;