2017-04-23 15 views
0

enter image description hereAppleTVのボタンを作成する方法は?

一見したところでは、それらは通常のUIButtonsのように見えますが、その下にラベルが付いています。また、ボタンの背景がぼやけているようです。

だから私は彼らがCollectionView(水平)に置かれていると思っています。各セルにはUIButtonとUILabelが含まれています。それはUIButtonは無料で移動効果を得るように見えないが動作することがありますが。

enter image description here

そのカスタム動作ですか?もしそうなら、そのような効果をどうやって作り出すことができますか?

答えて

0

私はそれがUICollectionViewではなく、UIButtonとUILabelが垂直に整列されたカスタムビューの水平UIStackViewであると確信しています。ここで

あなたは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 
    } 
} 

StackView

はパララックス効果を含め、焦点を当てたときにそのレイアウトをカスタマイズすることができるようになる各ボタンのカスタムビューの代わりに、垂直uistackviewを持ちます。

スタック内の各ボタンに視差効果を追加するために、それは別のstackviewにすでに他のボタンは、完全な幅を埋めるために随分されるわけではありませんでした場合、それはまたstackviewによって行うことができるHow to get Parallax Effect on UIButton in tvOS?

+0

に見てみましょう説明テキストのしかし、UIButtonにはボックスの外に移動効果がありません。万が一、そのような効果がどのように達成できるかご存じですか?あなたはGesturePanningでそれを自分で行う必要がありますか?それとも簡単な方法がありますか? – Mark

+0

@マークコメントを追加するコメントを更新しました –

+0

この例を試していただきありがとうございました。本当に感謝しています。私は仕事から離れると今夜それを試してみます。 – Mark

関連する問題