XcodeでUITextFieldを追加する方法【初心者向け】

Xcodeで【UITextField(テキストフィールド)を追加する方法】を初心者向けに解説した記事です。文字を入力できるUITextFieldは、境界線、文字の色、クリアボタンの設定などが可能なので、その方法も紹介します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

iPhoneアプリ開発の際に便利なUIパーツをXcodeから追加する方法を紹介する記事です。

今回は、XcodeUITextField(テキストフィールド)がテーマです。

 

なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。

 

UITextFieldとは

UITextField(テキストフィールド)は、ユーザーからの文字列入力を受け付ける入力エリアです。テキストフィールドをタップして選択すると、iPhone上でキーボードが自動的に表示されます。

 

 

UITextFieldの設置

他のUIパーツと同じように、StoryboardのViewの上にTextFieldをドラッグ&ドロップして設置できます。

textfield

XcodeScreenSnapz0018

設置はこれだけです。

 

 

[PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中

UITextFieldの設定

先ほどは単純に設置しただけですが、インスペクタを使うと細かな設定が可能です。

XcodeScreenSnapz006

設定できる主要なものを紹介します。

 

テキストフィールドの境界線

インスペクタのborderStyleプロパティを変更することによって境界線を変更できます。

 

罫線のみ

borderStyleプロパティ:UITextBorderStyleLine

XcodeScreenSnapz002

罫線+影

borderStyleプロパティ:UITextBorderStyleBezel

 XcodeScreenSnapz003

角丸四角形

borderStyleプロパティ:UITextBorderStyleRoundRect

XcodeScreenSnapz004

 

境界線なし

borderStyleプロパティ:UITextBorderStyleNone
XcodeScreenSnapz005

 

文字の色

同じく、インスペクタのColorプロパティを変更することによって文字色を変更できます。

XcodeScreenSnapz007
XcodeScreenSnapz008

 

プレースホルダ

インスペクタのPlaceholderに文字列を入力すると、テキストフィールドが空の場合に、薄いグレーで入力した文字列が表示されます。

XcodeScreenSnapz009

 

クリアボタン

テキストフィールドに○の中に×の図形を表示し、それをタップすると入力内容を消去するボタンの設定です。

インスペクタのClear Buttonから設定が可能です。

iOS SimulatorScreenSnapz001

選択項目の意味は下記の通りです。

  • Never appears:表示されません
  • Appears while editing:編集時のみ表示されます
  • Appears unless editing:非編集時に表示されます
  • Is always visible:常に表示されています

 

その他の設定項目

その他にも、英大文字の取り扱い、英語のミスタイプの自動修正、英語のスペルチェック、キーボードの種類などが設定できます。

用途に合わせてご利用ください。

 

今回の記事は以上です。

さらにXcodeを使いこなしたい場合は、XcodeでUISwitchを追加する方法を合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。