Align Nodes in tree hierarchy

Note:

I am looking for alternate solution, Since I have tried changing lots of Sprite Kit properties values, and came upto conclusion that it is not possible with those changes. So I ain't posting any code. You can try the mentioned library for more information.

Original Question:

I am using BLBubbleFilters library to create Bubbles.
This library used magnetic property to pull align items to the centre of the screen. And each time the screen opens the positioning of each node is different.

What have I tried so far?

• I have tried playing around with the library and its physics attributes(e.g. Magnetic property) to achieve my goal.

The goal is:

• Place 'Family' node over and above all nodes, and rest of the nodes below it.

What I thought is to that, each node will have a property for example "priority(Integer)". That is, the Priority 0 nodes will be placed above all nodes, priority 1 nodes below 0 priority nodes and so on.

Since SpriteKit deals with Physics properties, is there is any such property or way to achieve my goal?

See, how the family bubble is at the Top.

I had to do something like that and I did By creating a custom SelectInterestsCollectionViewFlowLayOut and I added the bubbles in the UICollectionViewCells.

The result was this.

Every cell is a white square and inside I have an image view with corner radius 1/2 * height.

The difference is that in my case I had the same bubble size for all my bubbles.

My code is:

    enum InterestBubbleType {
    
    case A
    case B
    case C
    case D
    case E
    
    func getYPosition(cellSideSize: CGFloat) -> CGFloat {
        let spaceFromTopForTwoCellsOnTop: CGFloat = cellSideSize / 2
        switch self {
        case .A:
            return cellSideSize
        case .B:
            return cellSideSize * 2
        case .C:
            return spaceFromTopForTwoCellsOnTop
        case .D:
            return cellSideSize + spaceFromTopForTwoCellsOnTop
        case .E:
            return 0
        }
    }
}

class SelectInterestsCollectionViewFlowLayOut: UICollectionViewFlowLayout {
    var cache: [UICollectionViewLayoutAttributes] = []
    var layoutAttributes: [UICollectionViewLayoutAttributes] = []
    var cellSideSize: CGFloat!
    var xPosition: CGFloat = 0
    var itemPositions: [InterestBubbleType] = [.A,.C,.D,.E,.A,.B,.C,.D,.E,.A,.B,.C,.D,.A,.B,.C,.D,.E,.A,.B]
    var positionsToIncreaseXPosition = [0,2,5,7,10,12,14,16]
    
    override func prepare() {
        cache = []
        super.prepare()
        //Prepare constants
        self.xPosition = 0
        cellSideSize = self.collectionView!.height() / 3
        self.configureCasheForTwentyInterests()
    }
    
    private func configureCasheForTwentyInterests() {
        for i in 0...(self.itemPositions.count - 1) {
            let indexPath = IndexPath(item: i, section: 0)
            let xPosition = self.xPosition
            let frame = CGRect(x: xPosition, y: self.itemPositions[i].getYPosition(cellSideSize: self.cellSideSize), width: self.cellSideSize, height: self.cellSideSize)
            let atribute = UICollectionViewLayoutAttributes(forCellWith: indexPath)
            atribute.frame = frame
            cache.append(atribute)
            if self.positionsToIncreaseXPosition.contains(i) {
                self.xPosition += self.cellSideSize
            }
        }
    }
    
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        self.layoutAttributes = []
        for uiCollectionViewLayoutAttribute in self.cache {
            self.layoutAttributes.append(uiCollectionViewLayoutAttribute)
        }
        return layoutAttributes
    }
    
    override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
        return layoutAttributes[indexPath.row]
    }
    
    override var collectionViewContentSize: CGSize {
        let totalWidth = cellSideSize * 9
        return CGSize(width: totalWidth, height: self.collectionView!.height())
    }
}

Now how it works is that in my collection view there are 5 different y positions that a bubble can be inside the collection view and they are A,B,C,D,E and I also keep in mind when you need to move 1 more x position which is 1 * collectionViewWidth size.

You can configure the code to achive your own result.
In my case I had a fixed number of bubbles and a fixed view to show them. The reason I chose to do it with collection view was because if the number change you can just add positions to change x position in positionsToIncreaseXPosition and it will work.