I’m utilizing AsyncDisplayKit/Texture
in my iOS app to show a easy listing. On every row, I need to show some textual content and a picture horizontally and on the very backside proper nook of the row, I need to show a triangle. I’ve the next easy code which may show the whole difficulty:
import UIKit
import SnapKit
import AsyncDisplayKit
class ViewController: UIViewController, ASTableDataSource {
let tableNode = ASTableNode()
override func viewDidLoad() {
tremendous.viewDidLoad()
view.addSubnode(tableNode)
tableNode.view.snp.makeConstraints { make in
make.edges.equalToSuperview()
}
tableNode.dataSource = self
}
func tableNode(_ tableNode: ASTableNode, numberOfRowsInSection part: Int) -> Int {
return 100
}
func tableNode(_ tableNode: ASTableNode, nodeBlockForRowAt indexPath: IndexPath) -> ASCellNodeBlock {
let row = indexPath.row
return {
return MyCellNode(str: "Row (row)")
}
}
}
let sizeToUse = 15.0
class MyCellNode: ASCellNode {
personal var title = ASTextNode()
personal let savedIcon = SaveIconNode()
personal var thumbnailNode = ASNetworkImageNode()
init(str : String) {
tremendous.init()
automaticallyManagesSubnodes = true
automaticallyRelayoutOnSafeAreaChanges = true
automaticallyRelayoutOnLayoutMarginsChanges = true
title.attributedText = NSAttributedString(string: str, attributes: [.foregroundColor:UIColor.white,.font:UIFont.systemFont(ofSize: 30, weight: .medium)])
title.backgroundColor = .darkGray
thumbnailNode = ASNetworkImageNode()
thumbnailNode.isLayerBacked = true
thumbnailNode.cornerRoundingType = .precomposited
thumbnailNode.cornerRadius = sizeToUse
thumbnailNode.type.preferredSize = CGSize(width: 60, peak: 60)
thumbnailNode.url = URL(string: "https://favicon.mars51.com/instagram.com")
}
override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {
let content material = ASStackLayoutSpec(course: .horizontal, spacing: sizeToUse, justifyContent: .spaceBetween, alignItems: .begin, youngsters: [title,thumbnailNode])
let inseted = ASInsetLayoutSpec(insets: UIEdgeInsets(prime: sizeToUse, left: sizeToUse, backside: sizeToUse, proper: sizeToUse), baby: content material)
savedIcon.type.preferredSize = CGSize(width: sizeToUse, peak: sizeToUse)
savedIcon.type.layoutPosition = CGPoint(x: constrainedSize.max.width - sizeToUse, y: 0)
let finalLayout = ASAbsoluteLayoutSpec(sizing: .default, youngsters: [inseted,savedIcon])
return finalLayout
}
override func format() {
tremendous.format()
var f = savedIcon.body
f.origin.y = calculatedSize.peak - f.peak
savedIcon.body = f
}
}
class SaveIconNode: ASDisplayNode {
override init() {
tremendous.init()
isLayerBacked = true
backgroundColor = .clear
isOpaque = false
}
override class func draw(_ bounds: CGRect, withParameters parameters: Any?, isCancelled isCancelledBlock: () -> Bool, isRasterizing: Bool) {
guard let context = UIGraphicsGetCurrentContext() else { return }
context.beginPath()
context.transfer(to: CGPoint(x: bounds.maxX, y: bounds.minY))
context.addLine(to: CGPoint(x: bounds.maxX, y: bounds.maxY))
context.addLine(to: CGPoint(x: bounds.minX, y: bounds.maxY))
context.closePath()
UIColor.inexperienced.setFill()
context.fillPath()
}
}
This renders as such:
As you possibly can see, the content material within the rows aren’t stretching the whole width of the row. This appears to be attributable to ASAbsoluteLayoutSpec
. I’m not certain why it is occurring and repair it. Be aware that I’ve specified sizing: .default
on the ASAbsoluteLayoutSpec
and paperwork state that:
https://texturegroup.org/docs/layout2-layoutspec-types.html
sizing: Determines how a lot area absolutely the spec will take up. Choices embrace: Default, and Dimension to Match.
And within the supply code, it says default
will The spec will take up the utmost measurement doable.
:
/** How a lot area the spec will take up. */
typedef NS_ENUM(NSInteger, ASAbsoluteLayoutSpecSizing) {
/** The spec will take up the utmost measurement doable. */
ASAbsoluteLayoutSpecSizingDefault,
/** Computes a measurement for the spec that's the union of all youngsters's frames. */
ASAbsoluteLayoutSpecSizingSizeToFit,
};
So I feel my code is appropriate.
If I do not embrace the ASAbsoluteLayoutSpec
and easily return inseted
, then it appears to be like okay:
However then I’m not in a position to embrace my savedIcon
triangle.
I’ve tried setting .type.flexGrow = 1
and .type.alignSelf = .stretch
on all of the nodes however that did not make any distinction by any means.