2017-07-12 9 views
1

テキストフィールドとボタンがあるとします。 ボタンとテキストフィールドにIBactionが関連付けられています。クリック時にボタンに関連付けられたラベルをプログラムで作成する

ボタンをクリックすると、テキストフィールドに入力されたテキストのラベルが作成されます。同時に、ラベルフィールドの隣にボタンを作成します。 (再生ボタンや一時停止ボタンなど)

静的な要素を追加するのは簡単です。ドラッグアンドドロップするだけです。 しかし、これらのUI要素をプログラムでレイアウトや制約に追加する方法はわかりません。

私にそれについてもっと教えてください、または私にいくつかのリンクを提供してください。

答えて

1

ためにUIButtonを使用してください。以下は、ラベルとボタンと制約を含むサブビューをサブビューに追加する方法の例です。デフォルトのtextFieldbuttonがストーリーボードに追加されています。

import UIKit 

class ViewController: UIViewController { 

    @IBOutlet weak var textField: UITextField! 
    @IBOutlet weak var button: UIButton! 

    var lastY: CGFloat = 100 

    override func viewDidLoad() { 
     super.viewDidLoad() 
    } 

    @IBAction func buttonClicked(_ sender: UIButton) { 
     let contentView = UIView() 
     addViewsTo(contentView) 
     contentView.translatesAutoresizingMaskIntoConstraints = false 
     view.addSubview(contentView) 

     // Add size constraints to the content view (260, 30) 
     NSLayoutConstraint(item: contentView, attribute: .width, relatedBy: .equal, 
          toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 260.0).isActive = true 
     NSLayoutConstraint(item: contentView, attribute: .height, relatedBy: .equal, 
          toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 30.0).isActive = true 
     // Add position constraints to the content view (horizontal center, 100 from the top) 
     NSLayoutConstraint(item: contentView, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1.0, constant: lastY).isActive = true 
     NSLayoutConstraint(item: contentView, attribute: .centerX, relatedBy: .equal, toItem: view, attribute: .centerX, multiplier: 1.0, constant: 0.0).isActive = true 

     // Update last Y position to have the gaps between views to be 10 
     lastY += 40 
    } 

    // Add label and button to the content view 
    func addViewsTo(_ contentView: UIView) { 
     // Add a label with size of (100, 30) 
     let label = UILabel() 
     label.text = textField.text 
     label.frame = CGRect(x: 0.0, y: 0.0, width: 100.0, height: 30.0) 
     contentView.addSubview(label) 

     // Add a button with size of (150, 30) 
     let button = UIButton() 
     button.setTitle("Button of \(textField.text ?? "")", for: .normal) 
     button.setTitleColor(.blue, for: .normal) 
     button.layer.borderWidth = 1 
     button.layer.borderColor = UIColor.black.cgColor 
     button.frame = CGRect(x: 110.0, y: 0.0, width: 150.0, height: 30.0) 
     contentView.addSubview(button)   
    } 
} 

enter image description here

+0

ありがとう!私はすぐにそれを試してみましょう! – tak

0

ボタンとテキストフィールドをプログラムで作成し、制約を設定する方法についての質問です。最初に、UI要素を開始し、設定してビューコントローラに追加します。次に、それに制約を割り当てます。私のお気に入りの制約セットは、パディングトップ、パディング左、ビューの高さとビューの幅です。

は、あなたの目標を達成するためのさまざまな方法があるはず例

let button = UIButton() 
//Set up button, like title, color, etc 

self.view.addSubView(button)//Add the button to the current view 

//Set up constraints 
let margins = view.layoutMarginsGuide 
button.trailingAnchor.constraint(equalTo: margins.trailingAnchor, constant: 0).isActive = true 
button.topAnchor.constraint(equalTo: margins.topAnchor, constant: 70).isActive = true 
button.widthAnchor.constraint(equalToConstant: 100).isActive = true 
button.heightAnchor.constraint(equalToConstant: 30).isActive = true 
関連する問題