Android – フラグメントのボタンイベントを処理する

下部ナビゲーションを利用することで画面(Fragment:フラグメント)が切り替わることは確認できました

ではフラグメントに配置したボタンを押下した際に、何か処理をさせる方法について、勉強していきます!

■フラグメントにボタンを配置する

前回作成した下部ナビゲーションを利用します

・デザイン画面

1. Buttonをドロップ

広告

パレットからButton(ボタン)をデザイン画面かコンポーネントツリーにドロップして、ボタンを配置します

ボタンを配置
ボタンを配置

2. 制約エラーを解除

制約のエラーが出ているので、制約を設定して解除します

何も考えずに、「Constraint Widget」にある4つの青丸の上と左をクリックしますw

ボタンが画面上のどこに配置されるのかが設定できるため、制約エラーはなくなります

制約を解除
制約を解除

3. textの修正

ボタンのtextが固定文字なので、注意されています

コンポーネント・ツリーのbuttonの右横に出ている注意マークをクリックします

注意メッセージ
注意メッセージ

メッセージが表示されます

メッセージを下まで確認すると、「修復」ボタンがあります

『文字列リソースの抽出』と書かれています

メッセージ2
「修復」ボタン「修復」ボタン

「修復」ボタンをクリックするとこんな画面がでてきます

リソース抽出
リソース抽出

何も考えずに、「OK」ボタンをクリックすると、「strings.xml」がこうなります

strings.xml
strings.xml

これからわかるように、先ほどのリソース抽出画面の項目はこうなります

  • リソース名:ボタンのtextを設定するための一意のid
  • リソース値:ボタンのtextに設定する値
  • ソース・セット:登録するリソースグループ(変更不要)
  • ファイル名:登録するリソースのファイル名(変更不要)
  • ディレクトリーにリソースを作成:(変更不要)※面倒なので触れませんw

■ボタン押下イベントを作成

・間違った方法 (NG)

1. ボタンにイベントを追加 (NG)

属性の中に、「onClick」という項目があったので、そこにイベントを追加してみた

onClickイベント
onClickイベント

当然、そんな「onButtonClick」のメソッドなんて作ってないから、エラーが表示されたので、メッセージを見てみます

ボタンイベントのエラーメッセージ
ボタンイベントのエラーメッセージ

英語はわかりませんけど、こんなことを言われています

  • 「onClick」に設定したメソッドは存在しない
  • ‘public void onButtonClick(android.view.View)’が見つからない
広告

2. 「onButtonClick」を作成 (NG)

とりあえず、言われるがままに、「onButtonClick」というメソッドを作ってみました

どこに作ればいいかがわからないので、「NewItemFragment.kt」に作ってみるw

onButtonClickを作ってみる
onButtonClickを作ってみる

デザイン画面を見ると、エラーはなくなっていました!

エラーがなくなる
エラーがなくなる

3. 動作確認してみる (NG)

これじゃ、ダメなのはわかってるんですけど、実行してみましたw

画面は出る
画面は出る

ボタンを押すと・・

停止する
停止する

この「onClick」ではダメだということを知っていながらやってみた!

というわけで、「1. ボタンにイベントを追加」からやり直しますので、以下を削除しておきましょうw

  • 属性の「onClick」イベントの削除
  • コードの「onButtonClick」メソッドの削除

・正しい方法 (OK)

やるべきことは以下の3つになります

  • Buttonオブジェクトの取得
  • ButtonのsetOnClickListenerを作成
  • ボタン押下時の処理を作成

1. Buttonオブジェクトの取得

「NewItemFragment.kt」を開き、onViewCreated()メソッドの中でボタンを取得します

2. ButtonのsetOnClickListenerを作成

アクティビティ(Activity)でもそうですが、フラグメントでもボタンのイベントを実装するには、ボタンの「setOnClickListener」を使用します!

3. ボタン押下時の処理を作成

この関数に渡している引数は自由設計なので、TextViewのオブジェクトを渡して、テキストを「BUTTONが押された」と変更するようにしました

※紛らわしいですが、ボタン押下時の処理を「onButtonClick()」メソッドにしていますw

■動作を確認する

ボタンが表示され散る画面に切り替えます

ボタン押下前
ボタン押下前

「BUTTON」をタップします

ボタン押下結果
ボタン押下結果

無事にTextViewが書き換えられました!

■最後に

今回は、フラグメントにボタンを配置して、同じフラグメント内にあるTextViewを更新しました

次に気になる課題としては以下の2つがあります

  • 別のフラグメントのTextViewを更新するには?
  • 更新したTextViewを維持するには?

別のフラグメントに切り替えて、再度、同じフラグメントに戻ると、更新したTextViewの内容は、ボタン押下前の内容に戻っています

当然ですけどねw

別のフラグメントのTextViewを更新しておいて、フラグメントを切り替えた場合、その更新した内容で表示を維持できていないことには、何もしていないのと同じですからね・・

その辺りについても次回、勉強していきます!

ではでは

シェア
広告

やもす ʕ•͡-•ʔ

のんびり!のほほん!がモットーです!w 蕎麦食いたい ライブ行きたい 暑いの嫌い