如何創建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?