Problem with index when buttons are created programmatically

[josmanperez]

Hello!,

First of all, thank you for all the hard work. I've used this library in several projects and it's fantastic :D

I am running with a weird UI behavior thou... I have a view, where I need to create my buttons programmatically (because I don't know how many buttons do I need to have at first.)
I have a stack view where I add as categoriesStackView.addArrangedSubview(button) all the buttons, one by one.

It could end looking something like this:

The method for creating each button is as follows:

  private func createCategoryButtons(categories: Results<Category>) {
        for category in categories {
            print(category.title)
            let button = createButtonFor(category: category)
            categoriesStackView.addArrangedSubview(button)
        }
    }

    private func createButtonFor(category: Category) -> CategoryButton {
        let button = CategoryButton()
        button.category = category
        button.spinnerColor = .white
        button.translatesAutoresizingMaskIntoConstraints = false
        button.heightAnchor.constraint(equalToConstant: 50).isActive = true
        button.isEnabled = true
        button.backgroundColor = Colors.secondaryPurple
        button.cornerRadius = 10
        button.setTitle(category.title, for: .normal)
        button.addTarget(self, action: #selector(launchTrivia(_:)), for: .touchUpInside)
        return button
    }

The order in where the buttons are created and added to the stack view is the same order that is shown in the picture. That is

1. Sports
2. General Knowledge
3. History
4. Geography

The problem is that if you click the second category: General Knowledge, the animation kicks in but you could see the "history" and "Geography" label in it, as the following image (this is a screenshot of the expand animation at the end:

Here you can see how the label are still visible (my thought is that it is because they are on top of the view) but the first category isn't shown as it was created before hence it is below in the index.

If you click on the third category: History, then Geography is the only label visible...

Do you happen to know how I can fix this?

Adding self.view.bringSubviewToFront(button) in the method called when the click target of the user in the button is trigger doesn't seem to work

    @objc func launchTrivia(_ button: CategoryButton) {
        self.view.bringSubviewToFront(button)
        button.startAnimation()
        Question.open(configuration: button.category) { (result) in
            switch result {
            case .failure(let error):
                print(error.localizedDescription)
                button.stopAnimation()
            case .success(let realm):
                button.stopAnimation(animationStyle: .expand, revertAfterDelay: 0) {
                    self.performSegue(withIdentifier: "play", sender: nil)
                }
            }
        }
        
    }

Thank you so much for your help

Best regards,

[josmanperez]

Hello, I have fixed the problem.

I will leave it here if someone else is running with the same problem. You don't need to call self.view.bringSubviewToFront(button) in the self.view. You need to call it from within the stack view as follows self.categoriesStackView.bringSubviewToFront(button)

So, the working method will be:

@objc func launchTrivia(_ button: CategoryButton) {
        self.categoriesStackView.bringSubviewToFront(button)
        button.startAnimation()
        Question.open(configuration: button.category) { (result) in
            switch result {
            case .failure(let error):
                print(error.localizedDescription)
                button.stopAnimation()
            case .success(let realm):
                button.stopAnimation(animationStyle: .expand, revertAfterDelay: 0) {
                    self.performSegue(withIdentifier: "play", sender: nil)
                }
            }
        }
        
    }

Thank you