第 2 回 中学生でもわかるiPhoneアプリ開発を始めます。
この入門ではSwiftUIを用いて、動画投稿アプリ(Y○utube)を真似したアプリを作成及び解説をして参ります。
上記の動画ではハンズオン形式で解説しておりますので是非興味がある方はご覧ください。٩( ‘ω’ )و
今までにXCodeやプログラミンをしたことがない方やiPhoneアプリを開発したことがない方でも開発できるように解説して参ります。不明な点などございましたらYouTubeのコメントください。
今回はTextFieldによる文字入力と数値入力についてです。ユーザー(アプリを使用する人)の情報取得する際に便利です。
★TextField(文字入力)とは
簡単に説明すると、ユーザー(アプリを使用する人)の情報を入力してもらうためのフォーマットです。
上記は多くの場合、名前や年齢,住所などで使用されています。
★一般的に使用する公式 其の１(文字入力)
TextField(第 1 引数 , text : 変数)
実際に確認してみましょう。
下記にようにコーディグします。
@State private var name = ""
var body: some View {
TextField("名前", text: $name)
}これを実行してみます。
上図のように「名前」と記載されている所で文字の入力ができることが確認できます。
★解説
TextFieldでは第 1 引数の文字を上記のように表示してくれます。
ですので、多くの場合は「”名前を入力ください”」や「””」などの文字列を第 1 引数とします。
※””(ダブルクォテーションで囲った文字を文字列と呼びます。)
次に公式にもあります第 2 引数の text : 変数(今回の場合は $name)というのは、ユーザー(アプリを使用する人)が入力したものを一時的に保持するための箱のようなものだと認識してください。つまり、今回ですとnameという箱に入力した文字列が代入されます。
実際に確認してみましょう。
下記のようにコーディングしてみます。
@State private var name = ""
var body: some View {
TextField("名前", text: $name)
Text(name)
}
★補足解説
まず、TextFieldで入力した文字列をname変数が受け取ります。変数とは箱のようなものとお伝えした通り
nameという箱には「中学生でも」の文字列が入っている状態です。
ですので、Text(name)でnameに入っている「中学生でも」が表示させることができました。
みなさんも是非一緒に確認してみてください。
★(数値入力)の場合
次に数値入力の場合、例えば年齢や生年月日,体重,身長は数値の入力にあたると思います。
★一般的に使用する公式 其の2(数値入力)
TextField(第１引数 , value: 変数 , formatter: NumberFormatter())
実際に確認してみましょう。
下記のようにコーディングします。
@State private var age = 0
var body: some View {
TextField("年齢を入力ください",value:$age,formatter: NumberFormatter())
Text("\(age)")
}これを実行してみます。
★解説
第 2 引数の text: を value: に置き換えることで数値を入力することができます。さらにformatterの設定をNumberFormatter()にすることで数値以外の入力を制限できます。このようにすることで、ユーザが誤って文字列を入力するのを防ぐことができます。
Text(“\(age)”)で数値を入れた変数ageを””(ダブルクォーテーション)で囲むことで表示できていることが確認できました。
以上で
第 2 回 中学生でもわかるiPhoneアプリ開発を終了致します。ご視聴いただきありがとうございました。(#^.^#)
参考文献
TextField(Apple Developer Documentation)
※個人の見解による意見でございます。参考程度にお願い致します。
2021年 8月 1日 著作者 西村 太智 , 黒木 美里
コメント