How can I enforce a minimum Height for a ASDisplayNode?

Question

I've done quite a lot of work using AsyncDisplayKit until now and I'm really really happy with it. Unfortunately now I've hit a road block.

I can't get a ASButtonNode to have a minimum height (in a ASCellNode if this is important).

class SmallButtonCellNode: ASCellNode {

  let normalSmallButton = ASButtonNode()
  let selectedSmallButton = ASButtonNode()

  init() {
    super.init()    
    self.backgroundColor = UIColor.lightGrayColor()

    // .. button title and background configuration here ..

      let buttonSizeRange =
      ASRelativeSizeRangeMake(
        ASRelativeSizeMake(
          ASRelativeDimensionMakeWithPercent(0),
          ASRelativeDimensionMakeWithPoints(35.0)
        ),
        ASRelativeSizeMake(
          ASRelativeDimensionMakeWithPercent(1),
          ASRelativeDimensionMakeWithPoints(35.0)
        )
      );

      self.normalSmallButton.preferredFrameSize = CGSize(width: 111.0, height: 35.0)
      self.normalSmallButton.flexGrow = true
      self.normalSmallButton.sizeRange = buttonSizeRange
      self.addSubnode(self.normalSmallButton)

      self.selectedSmallButton.preferredFrameSize = CGSize(width: 111.0, height: 35.0)
      self.selectedSmallButton.flexGrow = true
      self.selectedSmallButton.sizeRange = buttonSizeRange
      self.addSubnode(self.selectedSmallButton)
  }

  // MARK: - Layout

  override func layoutSpecThatFits(constrainedSize: ASSizeRange) -> ASLayoutSpec {
    let spec =
      ASStackLayoutSpec(
        direction: .Horizontal,
        spacing: 20.0,
        justifyContent: .SpaceAround,
        alignItems: .Center,
        children: [self.normalSmallButton, self.selectedSmallButton]
      )

    return
      ASInsetLayoutSpec(
        insets: UIEdgeInsets(top: 20.0, left: 20.0, bottom: 20.0, right: 20.0),
        child: spec
      )
  }
}

The result is (although the constrainedSize has a maximum of 100.0 in height):

The ASButtonNodes are only fitting the text height.

I've tried:

removing the preferred frame size (no effect)
change from .Center to .Stretch (the button is as tall as the cell - insets)
flexGrow = true in various places

I know that I could change the cell height from 100 to 75 using .Stretch and then the buttons will automatically end up being 35 pts tall but that's not what I want (because then the layout logic for "The button is 35 pts tall" will actually be part of the collection view delegate ..)

Please help :)

VTSoup · Answer 1 · 2016-04-15T17:34:45.317

Updated answer:

Just went to asyncdisplaykit.org and saw a reference to ASStaticLayoutSpec. It should fix your problem. In layoutSpecThatFits() ...

spec.sizeRange = normalSmallButton.sizeRange let staticSpec1 = ASStaticLayoutSpec(children: [spec]) return staticSpec1

....

If your cell is simple enough, I think that it would be easier and more straight-forward to just measure your subnodes in calculateSizeThatFits(constrainedSize: CGSize). Then in layout(), you calculate the .frame for each of your subnodes.

If you want to use layout specs, my hack would be to call .measure() on your subnodes in init(). Then in layoutSpecsThatFit, you can adjust your inset values to be the diff between the calculatedSize of your nodes and the minimum size. Good luck.

var diffY: CGFloat = (35.0 - selectedSmallButton.calculatedSize.height) / 2

if diffY < 0 { diffY = 0 }

return ASInsetLayoutSpec( insets: UIEdgeInsets(top: diffY, left: 20.0, bottom: diffY, right: 20.0), child: spec)

The ref to `ASStaticLayoutSpec` was the right pointer. I didn't know that the static layout spec would do this, b/c the documentation only says "A layout spec that positions children at fixed positions." - nothing about size and that the only child automatically takes up the whole space without any position specification. Nevertheless, here's my solution: https://gist.github.com/floriankrueger/3d7932f253e1ec1d8bbc0e5b293a24dd THANK YOU — floriankrueger, Apr 18 '16 at 06:57
btw `ASStaticLayoutSpec` is now `ASAbsoluteLayoutSpec` - http://texturegroup.org/docs/layout2-conversion-guide.html — Yasha, Aug 10 '17 at 14:20

score 0 · Answer 2 · answered Sep 19 '17 at 14:48

0

try yourStackStyle.minHeight = ASDimensionMake(yourMinHeight)

answered Sep 19 '17 at 14:48

Amine Arous

635
1
6
13

How can I enforce a minimum Height for a ASDisplayNode?

2 Answers2