【翻译】Texture 布局--布局样例(Layout Examples)

本文列举了五个常见的布局样例:1.文本左右对齐的简单标题;2.内嵌有叠加文本的图片;3.在顶端叠加图标的图片;4.简单嵌入文本的单元格;5.顶部和底部的分隔线。

July 8, 2017 -
ios texture 翻译

本文翻译自 TextureLayout Examples 一文。

布局样例


请查看布局规格的样例工程试验下面的代码。

文本左右对齐的简单标题

layout-examples-simple-header-with-left-right-justified-text

为了创建这个布局,我们将使用:

  • 一个纵向 ASStackLayoutSpec
  • 一个横向 ASStackLayoutSpec
  • ASInsetLayoutSpec 插入整个标题

下图显示了布局元素(node + 布局规格)的组成。

layout-examples-simple-header-with-left-right-justified-text-diagram

Swift Objective-C
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize
{
  // when the username / location text is too long,
  // shrink the stack to fit onscreen rather than push content to the right, offscreen
  ASStackLayoutSpec *nameLocationStack = [ASStackLayoutSpec verticalStackLayoutSpec];
  nameLocationStack.style.flexShrink = 1.0;
  nameLocationStack.style.flexGrow = 1.0;

  // if fetching post location data from server,
  // check if it is available yet and include it if so
  if (_postLocationNode.attributedText) {
    nameLocationStack.children = @[_usernameNode, _postLocationNode];
  } else {
    nameLocationStack.children = @[_usernameNode];
  }

  // horizontal stack
  ASStackLayoutSpec *headerStackSpec = [ASStackLayoutSpec stackLayoutSpecWithDirection:ASStackLayoutDirectionHorizontal
                                                                               spacing:40
                                                                        justifyContent:ASStackLayoutJustifyContentStart
                                                                            alignItems:ASStackLayoutAlignItemsCenter
                                                                              children:@[nameLocationStack, _postTimeNode]];

  // inset the horizontal stack
  return [ASInsetLayoutSpec insetLayoutSpecWithInsets:UIEdgeInsetsMake(0, 10, 0, 10) child:headerStackSpec];
}
  

将样例工程从横屏旋转成竖屏,看看空白区域是如何增长和收缩。

内嵌有叠加文本的图片

layout-examples-photo-with-inset-text-overlay

为了创建这个布局,我们将使用:

  • ASInsetLayoutSpec 来嵌入文本
  • ASOverlayLayoutSpec 叠加嵌入的文本在图片之上
Swift Objective-C
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize
{
  _photoNode.style.preferredSize = CGSizeMake(USER_IMAGE_HEIGHT*2, USER_IMAGE_HEIGHT*2);

  // INIFINITY is used to make the inset unbounded
  UIEdgeInsets insets = UIEdgeInsetsMake(INFINITY, 12, 12, 12);
  ASInsetLayoutSpec *textInsetSpec = [ASInsetLayoutSpec insetLayoutSpecWithInsets:insets child:_titleNode];

  return [ASOverlayLayoutSpec overlayLayoutSpecWithChild:_photoNode overlay:textInsetSpec];
}
  

在顶端叠加图标的图片

layout-examples-photo-with-outset-icon-overlay

为了创建这个布局,我们将使用:

  • ASAbsoluteLayoutSpec 来放置,使用了其 ASLayoutable 属性设置单独大小和位置的图片和图标。
Swift Objective-C
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize
{
  _iconNode.style.preferredSize = CGSizeMake(40, 40);
  _iconNode.style.layoutPosition = CGPointMake(150, 0);

  _photoNode.style.preferredSize = CGSizeMake(150, 150);
  _photoNode.style.layoutPosition = CGPointMake(40 / 2.0, 40 / 2.0);

  return [ASAbsoluteLayoutSpec absoluteLayoutSpecWithSizing:ASAbsoluteLayoutSpecSizingSizeToFit
                                                   children:@[_photoNode, _iconNode]];
}
  

简单嵌入文本的单元格

layout-examples-simple-inset-text-cell

为了重建上面 Pinterest 使用的搜索视图里的单个单元格的布局,我们将使用:

  • ASInsetLayoutSpec 插入文本
  • ASCenterLayoutSpec 根据指定的属性来居中文本
Swift Objective-C
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize
{
    UIEdgeInsets insets = UIEdgeInsetsMake(0, 12, 4, 4);
    ASInsetLayoutSpec *inset = [ASInsetLayoutSpec insetLayoutSpecWithInsets:insets
                                                                      child:_titleNode];

    return [ASCenterLayoutSpec centerLayoutSpecWithCenteringOptions:ASCenterLayoutSpecCenteringY
                                                      sizingOptions:ASCenterLayoutSpecSizingOptionMinimumX
                                                              child:inset];
}
  

顶部和底部的分隔线

layout-examples-top-bottom-separator-line

为了创建上面的布局,我们将使用:

  • ASInsetLayoutSpec 插入文本
  • 纵向 ASStackLayoutSpec 来堆放文本上下两条分隔线

下图显示了布局图表(布局规格 + node)的组成。

layout-examples-top-bottom-separator-line-diagram

下面的代码也可以在 ASLayoutSpecPlayground 样例工程里找到。

Swift Objective-C
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize
{
  _topSeparator.style.flexGrow = 1.0;
  _bottomSeparator.style.flexGrow = 1.0;

  ASInsetLayoutSpec *insetContentSpec = [ASInsetLayoutSpec insetLayoutSpecWithInsets:UIEdgeInsetsMake(20, 20, 20, 20) child:_textNode];

  return [ASStackLayoutSpec stackLayoutSpecWithDirection:ASStackLayoutDirectionVertical
                                                 spacing:0
                                          justifyContent:ASStackLayoutJustifyContentCenter
                                              alignItems:ASStackLayoutAlignItemsStretch
                                                children:@[_topSeparator, insetContentSpec, _bottomSeparator]];
}