0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

2日目:複数のテキスト入力エリアを配置、配列に入れて表示するアプリ

Posted at

#2日目のアプリ
複数のテキスト入力エリアを配置、配列に入れて表示するアプリ

##画面キャプチャ

##以下の流れで作りました。

  1. storyboadに4つのUITextFieldと、2つのbutton(表示ボタンとリセットボタン)を配置
  2. ボタンを端末が変わってもレイアウトが崩れないように設定
  3. 上記要素をViewController.swiftへoptionドラッグして紐付ける
  4. 紐付けができたら、ViewController.swiftでコードを書く

##できたこと

  • UITextFieldの配置ができるようになった
  • デバイスサイズが変わってもレイアウトが崩れないように設定できた
  • Buttonの文字をViewControllerから変更できるようになった
  • テキスト入力エリア毎にソフトウェアキーボードを変更して表示できるようになった
  • 文字入力したものを配列に格納することができるようになった
  • Buttonのタップ(表示ボタン)をトリガーにして入力した文字列を表示できるようになった
  • リセットボタンをトリガーにしてテキストエリアを空欄&配列空欄にできるようになった

##書いたコードを共有します!

import UIKit

//テキストフィールドのデータを受け取るためにViewControllerにUITextFieldDelegateを追加
class ViewController: UIViewController, UITextFieldDelegate {
    
    
//    要素を紐付ける
    @IBOutlet weak var name: UITextField!
    @IBOutlet weak var age: UITextField!
    @IBOutlet weak var phone: UITextField!
    @IBOutlet weak var email: UITextField!
    @IBOutlet weak var label: UILabel!
    
//    4つの項目の文字を一度に出力するために配列を用意する
    var outPutText:[String] = ["", "", "", ""]
    
//    画面読み込み時に表示するもの
    override func viewDidLoad() {
        super.viewDidLoad()
        
//        プレースホルダー
        name.placeholder = "なまえ"
        age.placeholder = "ねんれい"
        phone.placeholder = "でんわばんごう"
        email.placeholder = "めーるあどれす"
        
//        入力時にキーボードをニョキっと出す
        self.name.keyboardType = .namePhonePad
        self.age.keyboardType = .numberPad
        self.phone.keyboardType = .phonePad
        self.email.keyboardType = .emailAddress
        
        
//        テキストフィールドに入力された内容を受け取る
      
        name.addTarget(self, action: #selector(getName(textField:)), for: UIControl.Event.editingChanged) //何か入力があったら呼び出す
        
        age.addTarget(self, action: #selector(getAge(textField:)), for: UIControl.Event.editingChanged)
        
        phone.addTarget(self, action: #selector(getPhone(textField:)), for: UIControl.Event.editingChanged)
        
        email.addTarget(self, action: #selector(getEmail(textField:)), for: UIControl.Event.editingChanged)
        
        name.delegate = self
        age.delegate = self
        phone.delegate = self
        email.delegate = self
                
            
    }

    @objc func getName(textField: UITextField) {
        outPutText[0] = "Name: " + name.text!
}
    @objc func getAge(textField: UITextField) {
        outPutText[1] = "Age: " + age.text!
    }
    
    @objc func getPhone(textField: UITextField) {
        outPutText[2] = "Phone: " + phone.text!
    }
    
    @objc func getEmail(textField: UITextField) {
        outPutText[3] = "E-mail: " + email.text!
    }
    
    @IBAction func tapButton(_ sender: Any) {
        let str = outPutText[0] + "\n" + outPutText[1] + "\n" + outPutText[2] + "\n" + outPutText[3]
        label.numberOfLines = 4
        label.text = str
        self.view.endEditing(true)
    }
    
    @IBAction func clearButton(_ sender: Any) {
        outPutText = ["", "", "", ""]
        label.text = ""
        name.text = ""
        age.text = ""
        phone.text = ""
        email.text = ""
        
    }
    
    func textFieldShouldReturn(_ textField: UITextField) -> Bool {
            textField.resignFirstResponder()
            return true
        }

    

}

##感想
2日目。とにかく形にすることに集中!コードの書き方はきっと素人。。。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?