iOS Development

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

Spread the love


I’m utilizing AsyncDisplayKit/Texture in my iOS app to show a easy checklist. 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 display your complete situation:

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 {
    non-public var title = ASTextNode()
    non-public let savedIcon = SaveIconNode()
    non-public 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.fashion.preferredSize = CGSize(width: 60, top: 60)
        thumbnailNode.url = URL(string: "https://favicon.mars51.com/instagram.com")
    }
    
    override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec {
        
        
        
        let content material = ASStackLayoutSpec(route: .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.fashion.preferredSize = CGSize(width: sizeToUse, top: sizeToUse)
        savedIcon.fashion.layoutPosition = CGPoint(x: constrainedSize.max.width - sizeToUse, y: 0)
        
        let finalLayout = ASAbsoluteLayoutSpec(sizing: .default, youngsters: [inseted,savedIcon])
        
        
        return finalLayout
    }
    
    override func structure() {
        tremendous.structure()
        var f = savedIcon.body
        f.origin.y = calculatedSize.top - f.top
        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’ll be able to see, the content material within the rows aren’t stretching your complete width of the row. This appears to be brought on by ASAbsoluteLayoutSpec. I’m not certain why it is taking place and how one can 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 Measurement to Match.

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

/** How a lot area the spec will take up. */
typedef NS_ENUM(NSInteger, ASAbsoluteLayoutSpecSizing) {
  /** The spec will take up the utmost measurement potential. */
  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 okay:

enter image description here

However then I’m not in a position to embrace my savedIcon triangle.

I’ve tried setting .fashion.flexGrow = 1 and .fashion.alignSelf = .stretch on all of the nodes however that did not make any distinction in any respect.



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

  1. naturally like your web site however you need to take a look at the spelling on several of your posts. A number of them are rife with spelling problems and I find it very bothersome to tell the truth on the other hand I will surely come again again.

Leave a Reply

Your email address will not be published. Required fields are marked *