2017-01-21 13 views
0

私は、ビューの上部に2つのボタンを横に並べ、それぞれ50%を占めるシンプルなバーを作成したいと考えています。スウィフト3 - ボタンの幅を制限する

私はそうのようなバーを作成しました:

let topTabView = UIView() 
    topTabView.backgroundColor = UIColor.red 
    topTabView.translatesAutoresizingMaskIntoConstraints = false 
    view.addSubview(topTabView) 

    topTabView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true 
    topTabView.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor).isActive = true 
    topTabView.heightAnchor.constraint(equalToConstant: 60).isActive = true 
    topTabView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true 

そして、これは動作します。

私は2つのボタンを追加します。幅のアンカーをどのように動作させるかわからないことを除いて、すべての制約が正しく適用されます。各ボタンがビューの50%を占めるようにします。

let filterButton = UIButton() 
    filterButton.backgroundColor = UIColor.red 
    filterButton.setTitle("Filter", for: .normal) 
    filterButton.translatesAutoresizingMaskIntoConstraints = false 
    topTabView.addSubview(filterButton) 

    filterButton.leftAnchor.constraint(equalTo: topTabView.leftAnchor).isActive = true 
    filterButton.centerYAnchor.constraint(equalTo: topTabView.centerYAnchor).isActive = true 
    filterButton.heightAnchor.constraint(equalTo: topTabView.heightAnchor).isActive = true 

    // NOT SURE ABOUT THIS ONE 
    filterButton.widthAnchor.constraint(equalToConstant: 200).isActive = true 


    let mapButton = UIButton() 
    mapButton.backgroundColor = UIColor.red 
    mapButton.setTitle("Map", for: .normal) 
    mapButton.translatesAutoresizingMaskIntoConstraints = false 
    topTabView.addSubview(mapButton) 

    mapButton.rightAnchor.constraint(equalTo: topTabView.rightAnchor).isActive = true 
    mapButton.centerYAnchor.constraint(equalTo: topTabView.centerYAnchor).isActive = true 
    mapButton.heightAnchor.constraint(equalTo: topTabView.heightAnchor).isActive = true 

    // NOT SURE ABOUT THIS ONE 
    mapButton.widthAnchor.constraint(equalToConstant: 200).isActive = true 

私はこのような何かをしようとしたが、それはうまくいきませんでした:

mapButton.widthAnchor.constraint(equalToConstant: toTabView.frame.width/2.0).isActive = true 

すべてのヘルプは素晴らしいだろう!

答えて

2

各ボタンはmultiplierが何のためにあるのかであるビュー

の50%を占めるようになっています。あなたはそれを使用していません。これを使って!

ボタンの幅が、multiplier0.5の値を除いて、スーパービューの幅と同じであるという制約が必要です。

例:

let b1 = UIButton() 
    b1.translatesAutoresizingMaskIntoConstraints = false 
    b1.backgroundColor = .green 
    b1.setTitle("Button1", for: .normal) 
    b1.setTitleColor(.black, for: .normal) 

    let b2 = UIButton() 
    b2.translatesAutoresizingMaskIntoConstraints = false 
    b2.backgroundColor = .yellow 
    b2.setTitle("Button2", for: .normal) 
    b2.setTitleColor(.black, for: .normal) 

    self.view.addSubview(b1) 
    self.view.addSubview(b2) 

    NSLayoutConstraint.activate([ 
     b1.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 50), 
     b2.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 50), 

     b1.leadingAnchor.constraint(equalTo:self.view.leadingAnchor), 
     b2.leadingAnchor.constraint(equalTo:b1.trailingAnchor), 

     b1.widthAnchor.constraint(equalTo: self.view.widthAnchor, multiplier: 0.5), 
     b2.widthAnchor.constraint(equalTo: self.view.widthAnchor, multiplier: 0.5), 

    ]) 

結果:

enter image description here

+1

は、実際のコードを追加しました!クール、ええ? – matt