8.2 C
London
Saturday, February 10, 2024

swift – iOS AsyncDisplayKit / Texture’s ASAbsoluteLayoutSpec not stretching content material to fill width


I’m utilizing AsyncDisplayKit/Texture in my iOS app to show a easy checklist. On every row, I wish to show some textual content and a picture horizontally and on the very backside proper nook of the row, I wish to show a triangle. I’ve the next easy code which might show all the challenge:

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(path: .horizontal, spacing: sizeToUse, justifyContent: .spaceBetween, alignItems: .begin, youngsters: [title,thumbnailNode])
        
        
        let inseted = ASInsetLayoutSpec(insets: UIEdgeInsets(high: sizeToUse, left: sizeToUse, backside: sizeToUse, proper: sizeToUse), little one: 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:

enter image description here

As you possibly can see, the content material within the rows aren’t stretching all the width of the row. This appears to be attributable to ASAbsoluteLayoutSpec. I’m not certain why it is taking place and the right way to 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 embody: Default, and Measurement to Match.

And within the supply code, it says default will The spec will take up the utmost measurement attainable.:

/** How a lot area the spec will take up. */
typedef NS_ENUM(NSInteger, ASAbsoluteLayoutSpecSizing) {
  /** The spec will take up the utmost measurement attainable. */
  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 embody the ASAbsoluteLayoutSpec and easily return inseted, then it seems to be okay:

enter image description here

However then I’m not in a position to embody 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 in any respect.



Latest news
Related news

LEAVE A REPLY

Please enter your comment!
Please enter your name here