Как создать кнопки AppleTV?

введите здесь описание изображения

На первый взгляд они выглядят как обычные UIButtons, однако под ними есть метка. Также фон кнопки кажется размытым.

Итак, я думаю, что они помещаются в CollectionView (горизонтальный). Каждая ячейка содержит UIButton и UILabel. Хотя это может сработать, UIButton, похоже, не получает эффект перемещения бесплатно.

введите здесь описание изображения

Это нестандартное поведение? И если да, то как вам удается создать такой эффект?


animation uibutton uiblureffect tvos
person Mark    schedule 23.04.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Бьюсь об заклад, это не UICollectionView, а горизонтальный UIStackView пользовательских представлений, в котором есть UIButton и UILabel, выровненные по вертикали.

Здесь у вас есть пример использования 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
    }
}

Просмотр стека

Наличие пользовательского представления вместо вертикального uistackview для каждой кнопки позволило бы настроить ее макет при фокусировке, включая эффект параллакса.

Чтобы добавить эффект параллакса к каждой кнопке в стеке, посмотрите Как получить эффект параллакса на UIButton в tvOS?

person David Cordero    schedule 24.04.2017
comment
Это также можно сделать с помощью представления стека, если оно еще не было в другом представлении стека, иначе кнопки будут растянуты, чтобы заполнить всю ширину текста описания. Однако UIButton не имеет эффекта перемещения из коробки, как кажется. Вы случайно не знаете, как можно добиться такого эффекта? Вам нужно сделать это самостоятельно с помощью GesturePanning? или есть способ проще? - person Mark; 24.04.2017
comment
большое спасибо, что нашли время, чтобы разработать этот пример, это действительно ценится. Я попробую это сегодня вечером, когда я вернусь с работы. - person Mark; 25.04.2017