1. HOME
  2. ブログ
  3. IT技術
  4. 【Android】Webでよくみる入力Boxを手作り
【Android】Webでよくみる入力Boxを手作り

【Android】Webでよくみる入力Boxを手作り

Webでよくみる入力Boxを手作り

(株)ライトコードでモバイルアプリケーション開発をしている笹川(ささがわ)です!

今日は様々なWebページで見かける入力フォームにある入力Boxを2つのパターンで作っていきたいと思います!

入力フォーム

シンプルな入力Boxを作りたい場合はTextInputLayoutを使おう!

TextInputLayoutとはMaterial DesignのText Fieldsを実現できるレイアウトです

導入、カスタマイズのの仕方は調べればすぐにわかると思うのでここでは割愛しますね

自分で作りたい場合はCustomViewを作ろう!

ここからがメインです

フォームは様々な例がありますが、今回は「枠線」「文字数制限」「エラー表示」を対応したものを作ります

「枠線」「文字数制限」「エラー表示」を対応した入力フォーム

まずはレイアウトを先に組み上げます

今回はLinearLayoutとAppCompatEditTextとTextViewの3つを使って作ります

ボーダーに関しては下記をLinearLayoutの背景に指定しています

フォーカスのON/OFFとエラー状態によってボーダーの色を変えるようにしています

stateの変更はKotlin/Java側で対応が必要です(先ほどLinearLayoutでIDを指定したのはこのためです

CustomViewクラスはこんな感じになります

今回のようなEditTextをwrapするような形で作ると改行等による高さ調整が自動でできなくなります

そうなると使い勝手が悪いので文字入力やフォーカス変更のタイミングで高さ調整がされるように実装しています

また文字数制限を実装していますが、入力制限ではなくエラー表示と文字色の変更、ボーダーカラーの変更でエラーを表現しています

Androidでは文字数制限を簡単に実装できますが、今回のようなフォームではコピー&ペーストで入力されることも考慮して制限をいれません

使いたい画面に設定

先ほど作成したクラスを使いたい画面のlayout.xmlに定義します

サンプル

こちらのリポジトリにサンプルを置いておきますので参考にどうぞ

これでアプリを実行しますとこのような感じになります!

入力フォームサンプル画面

書いた人はこんな人

笹川(エンジニア)
新潟生まれ新潟育ち本業はモバイルアプリエンジニア。
日々、猫(犬)エンジニアとして活躍中!

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア