Question

乍一看，它们看起来像普通的UIButton但是它们下方有一个标签。此外，按钮的背景似乎是模糊的效果。

所以我的想法是将它们放在CollectionView（水平）中。每个单元格包含一个UIButton和一个UILabel。虽然这可能有效，但UIButton似乎并没有免费获得移动效果。

这是自定义行为吗？如果是这样，你怎么能创造这样的效果？

Answer 1

我敢打赌它不是一个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将允许在聚焦时自定义其布局，包括视差效果。

要为视图堆叠中的每个按钮添加视差效果，请查看How to get Parallax Effect on UIButton in tvOS?

如何创建AppleTV按钮？

1 个答案: