Sunday, February 11, 2024
HomeiOS Developmentswift - iOS AsyncDisplayKit / Texture's ASAbsoluteLayoutSpec not stretching content material to...

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 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:

enter image description here

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:

enter image description here

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.





Supply hyperlink

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments