How to create AppleTV buttons?

Question

At first glance they look like regular UIButtons however they got a label below it. Also the background of the button seems to be a blurred effect.

So my thoughts are that they are put in a CollectionView (Horizontal). With each cell containing a UIButton and a UILabel. Although that may work the UIButton doesn't seem to get the move effect for free.

Is that custom behavior? And if so, how are you able to create such an effect?

score 0 · Answer 1 · edited May 23 '17 at 10:31

I bet it is not an UICollectionView but a horizontal UIStackView of custom views in which there is a UIButton and UILabel vertically aligned.

Here you have an example, using stackViews:

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let stackView = UIStackView()
        stackView.axis = .horizontal
        stackView.distribution = .equalSpacing
        stackView.alignment = .center
        stackView.spacing = 30
        view.addSubview(stackView)

        ["One", "Two", "Three", "Caramba"].forEach {
            let buttonStackView = UIStackView()
            buttonStackView.axis = .vertical
            buttonStackView.distribution = .fillProportionally
            buttonStackView.alignment = .center
            buttonStackView.spacing = 15

            let button = UIButton(type: .system)
            button.setTitle($0, for: .normal)
            buttonStackView.addArrangedSubview(button)

            let label = UILabel()
            label.text = $0
            label.font = UIFont.systemFont(ofSize: 20)
            buttonStackView.addArrangedSubview(label)

            stackView.addArrangedSubview(buttonStackView)
        }

        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    }
}

Having a custom view instead of a vertical uistackview for each button would allow to customize its layout when focused, including Parallax effect.

For adding parallax effect to each button in the stack, take a look to How to get Parallax Effect on UIButton in tvOS?

It could also be done by a stackview if it was not already in another stackview else the buttons will be streched to fill the complete width of the description text. However the UIButton does not have the move-effect out of the box as it appears. Do you by any chance know how such an effect can be achieved? Do you need to do it self with a GesturePanning? or is there an easier way? — Mark, Apr 24 '17 at 11:49
thank you so much for taking the time to work out this example it's truly appreciated. I will try it out tonight when I get off from work. — Mark, Apr 25 '17 at 08:25

How to create AppleTV buttons?

1 Answers1