Android Kotlin基礎講座 02.2: ユーザー対話型にする

ユーザー対話型にする Android Kotlin基礎講座

目次

タスク:文字入力用のEditTextを追加する

このタスクでは、ユーザーがニックネームを入力するためのEditTextビューというインプットフィールドを追加していきます。

ステップ1:プロジェクトを始める

  1. 33前回の記事で作成したAboutMeアプリが準備できていない場合は、次のリンクからスターターコードをダウンロードしてください。こちらのコードは前回の記事で作成したコードと同じものになります。
  2. Android Studioで前回の記事で作成したアプリ、または1でダウンロードしたプロジェクトを開いてください。
  3. アプリを起動してください。名前のテキストビュー、星の画像、スクロールビュー内の長いテキストが表示されます。



    ユーザーがテキストを一切変更できないことを確認してください。

文字を入力することができるなど、ユーザー対話型にすることでアプリはより魅力的なものになります。Androidでは文字入力を受け付けるためのUIとしてエディットテキストというウィジェットを提供しています。TextViewのサブクラスであるEditTextクラスを用いたエディットテキストを定義します。下の画像のように、エディットテキストはユーザーに文字の入力と修正をできるようにします。

ステップ2:EditTextを追加する

  1. Android Studioでactivity_main.xmlを開き、Designタブにしてください。
  2. パレット上のTextをクリックしてください。



    Ab TextViewがText要素のリストのトップに表示されています。
    Ab TextViewの下にいくつかのEditTextビューに分類されるビューがあります。

    パレット上のTextViewのアイコン画像のAbには下線が引かれていません。一方で、EditTextのアイコンはAbに下線が引かれています。下線はそのビューが編集可能であることを示しています。

    それぞれのEditTextビューに異なる属性が設定されており、Androidシステムはスクリーンキーボードのような適切なインプットソフトウェアを表示します。
  3. PlainTextエディットテキストをコンポーネントツリーにドラッグし、name_textの下、star_imageの上に配置してください。

  4. 下の表のようにアトリビュートパネルからEditTextビューの属性を設定してください。
属性
idnickname_edit
layout_widthmatch_parent (デフォルト)
layout_heightwrap_content (デフォルト)
  1. アプリを起動してください。星の画像の上に、デフォルトでは”Name”と表示されているエディットテキストがあります。

コメント

プロフィール

プロフィール
コードラボJP

大学卒業後SEに就職、現在は退職しフリーランスとして活動中。
『初心者でも挫折せずに一人でプログラミングを学べる』をモットーに、コードラボJPを開設
お問い合わせ等はcodelabsjp@gmail.comまで

コードラボJPをフォローする
タイトルとURLをコピーしました