Overall improvements for the SocialAppLayout example

This commit is contained in:
Michael Schneider
2016-02-24 20:18:20 -08:00
parent 8418d8be24
commit 7dd2fbfad1
9 changed files with 148 additions and 204 deletions

View File

@@ -10,11 +10,26 @@
*/
#import "PostNode.h"
#import "Post.h"
#import "TextStyles.h"
#import "LikesNode.h"
#import "CommentsNode.h"
@interface PostNode() <ASNetworkImageNodeDelegate>
@interface PostNode() <ASNetworkImageNodeDelegate, ASTextNodeDelegate>
@property (strong, nonatomic) Post *post;
@property (strong, nonatomic) ASDisplayNode *divider;
@property (strong, nonatomic) ASTextNode *nameNode;
@property (strong, nonatomic) ASTextNode *usernameNode;
@property (strong, nonatomic) ASTextNode *timeNode;
@property (strong, nonatomic) ASTextNode *postNode;
@property (strong, nonatomic) ASImageNode *viaNode;
@property (strong, nonatomic) ASNetworkImageNode *avatarNode;
@property (strong, nonatomic) ASNetworkImageNode *mediaNode;
@property (strong, nonatomic) LikesNode *likesNode;
@property (strong, nonatomic) CommentsNode *commentsNode;
@property (strong, nonatomic) ASImageNode *optionsNode;
@end
@implementation PostNode
@@ -22,41 +37,35 @@
- (instancetype)initWithPost:(Post *)post {
self = [super init];
if(self) {
if (self) {
_post = post;
// name node
// Name node
_nameNode = [[ASTextNode alloc] init];
_nameNode.attributedString = [[NSAttributedString alloc] initWithString:_post.name
attributes:[TextStyles nameStyle]];
_nameNode.attributedString = [[NSAttributedString alloc] initWithString:_post.name attributes:[TextStyles nameStyle]];
_nameNode.maximumNumberOfLines = 1;
[self addSubnode:_nameNode];
// username node
// Username node
_usernameNode = [[ASTextNode alloc] init];
_usernameNode.attributedString = [[NSAttributedString alloc] initWithString:_post.username
attributes:[TextStyles usernameStyle]];
_usernameNode.attributedString = [[NSAttributedString alloc] initWithString:_post.username attributes:[TextStyles usernameStyle]];
_usernameNode.flexShrink = YES; //if name and username don't fit to cell width, allow username shrink
_usernameNode.truncationMode = NSLineBreakByTruncatingTail;
_usernameNode.maximumNumberOfLines = 1;
[self addSubnode:_usernameNode];
// time node
// Time node
_timeNode = [[ASTextNode alloc] init];
_timeNode.attributedString = [[NSAttributedString alloc] initWithString:_post.time
attributes:[TextStyles timeStyle]];
_timeNode.attributedString = [[NSAttributedString alloc] initWithString:_post.time attributes:[TextStyles timeStyle]];
[self addSubnode:_timeNode];
// post node
// Post node
_postNode = [[ASTextNode alloc] init];
// processing URLs in post
// Processing URLs in post
NSString *kLinkAttributeName = @"TextLinkAttributeName";
if(![_post.post isEqualToString:@""]) {
if (![_post.post isEqualToString:@""]) {
NSMutableAttributedString *attrString = [[NSMutableAttributedString alloc] initWithString:_post.post attributes:[TextStyles postStyle]];
@@ -75,7 +84,7 @@
}];
// configure node to support tappable links
// Configure node to support tappable links
_postNode.delegate = self;
_postNode.userInteractionEnabled = YES;
_postNode.linkAttributeNames = @[ kLinkAttributeName ];
@@ -85,9 +94,9 @@
[self addSubnode:_postNode];
// media
if(![_post.media isEqualToString:@""]) {
// Media
if (![_post.media isEqualToString:@""]) {
_mediaNode = [[ASNetworkImageNode alloc] init];
_mediaNode.backgroundColor = ASDisplayNodeDefaultPlaceholderColor();
@@ -113,7 +122,7 @@
[self addSubnode:_mediaNode];
}
// user pic
// User pic
_avatarNode = [[ASNetworkImageNode alloc] init];
_avatarNode.backgroundColor = ASDisplayNodeDefaultPlaceholderColor();
_avatarNode.preferredFrameSize = CGSizeMake(44, 44);
@@ -137,19 +146,19 @@
};
[self addSubnode:_avatarNode];
// hairline cell separator
// Hairline cell separator
_divider = [[ASDisplayNode alloc] init];
_divider.backgroundColor = [UIColor lightGrayColor];
[self addSubnode:_divider];
if(_post.via != 0) {
// Via
if (_post.via != 0) {
_viaNode = [[ASImageNode alloc] init];
_viaNode.image = (_post.via == 1) ? [UIImage imageNamed:@"icon_ios.png"] : [UIImage imageNamed:@"icon_android.png"];
[self addSubnode:_viaNode];
}
// bottom controls
// Bottom controls
_likesNode = [[LikesNode alloc] initWithLikesCount:_post.likes];
[self addSubnode:_likesNode];
@@ -159,9 +168,7 @@
_optionsNode = [[ASImageNode alloc] init];
_optionsNode.image = [UIImage imageNamed:@"icon_more"];
[self addSubnode:_optionsNode];
}
return self;
}
@@ -175,50 +182,33 @@
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize {
//Flexible spacer between username and time
// Flexible spacer between username and time
ASLayoutSpec *spacer = [[ASLayoutSpec alloc] init];
spacer.flexGrow = YES;
//Horizontal stack for name, username, via icon and time
ASStackLayoutSpec *nameStack;
//Cases with or without via icon
if(_post.via != 0) {
nameStack = [ASStackLayoutSpec stackLayoutSpecWithDirection:ASStackLayoutDirectionHorizontal spacing:5.0 justifyContent:ASStackLayoutJustifyContentStart alignItems:ASStackLayoutAlignItemsCenter children:@[_nameNode, _usernameNode, spacer, _viaNode, _timeNode]];
}else {
nameStack = [ASStackLayoutSpec stackLayoutSpecWithDirection:ASStackLayoutDirectionHorizontal spacing:5.0 justifyContent:ASStackLayoutJustifyContentStart alignItems:ASStackLayoutAlignItemsCenter children:@[_nameNode, _usernameNode, spacer, _timeNode]];
// Horizontal stack for name, username, via icon and time
NSMutableArray *layoutSpecChildren = [@[_nameNode, _usernameNode, spacer] mutableCopy];
if (_post.via != 0) {
[layoutSpecChildren addObject:_viaNode];
}
[layoutSpecChildren addObject:_timeNode];
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]];
//add more gaps for control line
// Add more gaps for control line
controlsStack.spacingAfter = 3.0;
controlsStack.spacingBefore = 3.0;
NSMutableArray *mainStackContent = [[NSMutableArray alloc] init];
[mainStackContent addObject:nameStack];
[mainStackContent addObject:_postNode];
if(![_post.media isEqualToString:@""]) {
CGFloat imageRatio;
if(_mediaNode.image != nil) {
imageRatio = _mediaNode.image.size.height / _mediaNode.image.size.width;
}else {
imageRatio = 0.5;
}
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;
@@ -226,14 +216,17 @@
[mainStackContent addObject:imagePlace];
}
[mainStackContent addObject:controlsStack];
//Vertical spec of cell main content
// Vertical spec of cell main content
ASStackLayoutSpec *contentSpec = [ASStackLayoutSpec stackLayoutSpecWithDirection:ASStackLayoutDirectionVertical spacing:8.0 justifyContent:ASStackLayoutJustifyContentStart alignItems:ASStackLayoutAlignItemsStart children:mainStackContent];
contentSpec.alignItems = ASStackLayoutAlignSelfStretch;
contentSpec.flexShrink = YES;
// Horizontal spec for avatar
ASStackLayoutSpec *avatarContentSpec = [ASStackLayoutSpec stackLayoutSpecWithDirection:ASStackLayoutDirectionHorizontal spacing:8.0 justifyContent:ASStackLayoutJustifyContentStart alignItems:ASStackLayoutAlignItemsStart children:@[_avatarNode, contentSpec]];
return [ASInsetLayoutSpec insetLayoutSpecWithInsets:UIEdgeInsetsMake(10, 64, 10, 10) child:contentSpec];
return [ASInsetLayoutSpec insetLayoutSpecWithInsets:UIEdgeInsetsMake(10, 10, 10, 10) child:avatarContentSpec];
}
@@ -244,26 +237,23 @@
// Manually layout the divider.
CGFloat pixelHeight = 1.0f / [[UIScreen mainScreen] scale];
_divider.frame = CGRectMake(0.0f, 0.0f, self.calculatedSize.width, pixelHeight);
_avatarNode.frame = CGRectMake(10, 10, 44, 44);
}
#pragma mark -
#pragma mark ASTextNodeDelegate methods.
#pragma mark - ASTextNodeDelegate methods.
- (BOOL)textNode:(ASTextNode *)richTextNode shouldHighlightLinkAttribute:(NSString *)attribute value:(id)value atPoint:(CGPoint)point
{
// opt into link highlighting -- tap and hold the link to try it! must enable highlighting on a layer, see -didLoad
// Opt into link highlighting -- tap and hold the link to try it! must enable highlighting on a layer, see -didLoad
return YES;
}
- (void)textNode:(ASTextNode *)richTextNode tappedLinkAttribute:(NSString *)attribute value:(NSURL *)URL atPoint:(CGPoint)point textRange:(NSRange)textRange
{
// the node tapped a link, open it
// The node tapped a link, open it
[[UIApplication sharedApplication] openURL:URL];
}
#pragma mark -
#pragma mark ASNetworkImageNodeDelegate methods.
#pragma mark - ASNetworkImageNodeDelegate methods.
- (void)imageNode:(ASNetworkImageNode *)imageNode didLoadImage:(UIImage *)image
{