如何创建AppleTV按钮？

Question

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

所以我的想法是，他们被放在一个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?