mirror of
https://github.com/HackPlan/AsyncDisplayKit.git
synced 2026-04-24 03:45:58 +08:00
Overall improvements for the SocialAppLayout example
This commit is contained in:
@@ -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
|
||||
{
|
||||
|
||||
Reference in New Issue
Block a user