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

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

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

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

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

Studio ZeSys

Android - 下部ナビゲーションで新しい画面に遷移する

https://zesys.net/pc/android/bottom-navigation-newitem

Androidアプリの作成に向けて、よく使いそうなアクティビティをサンプルにして、勉強をしていきたいと思います！記事が長くなったので、３ページに分けています！■下部ナビゲーションAndroid Studio 4.x.xには、開発者のためにいくつかのテンプレートが予め用意されていますその中の「下部ナビゲーション・アクティビティ」を使用して、以下の内容を勉強していきます！新しいナビゲーションボタンの追加方法新しい画面（フラグメント:Fragment）の追加方法左の下部ナビゲーションのデフォルト画面から、右のような画面に修正しようと思...

・デザイン画面

1. Buttonをドロップ

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

2. 制約エラーを解除

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

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

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

3. textの修正

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

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

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

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

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

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

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

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

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

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

・間違った方法 (NG)

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

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

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

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

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

2. 「onButtonClick」を作成 (NG)

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

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

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

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

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

ボタンを押すと・・

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

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

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

・正しい方法 (OK)

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

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

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

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

class NewItemFragment : Fragment(R.layout.fragment_newitem) {

    private lateinit var viewModel: NewItemViewModel

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {

        super.onViewCreated(view, savedInstanceState)
        viewModel =
            ViewModelProviders.of(this).get(NewItemViewModel::class.java)
        val textView: TextView = view.findViewById(R.id.text_newitem)
        viewModel.text.observe(viewLifecycleOwner, Observer<String> {
            // Update the UI
            textView.text = it
        })

        // ボタンを取得
        val button: Button = view.findViewById(R.id.button)
        // ボタンのリスナーを作成
        button.setOnClickListener {
            // ボタン押下時の処理を呼び出す
            onButtonClick(textView)
        }
    }

    // ボタン押下時の処理
    public fun onButtonClick(view: TextView){
        Log.i("NewItemFragment","onButtonClick")
        // TextViewを書き換える
        view.text = "BUTTONが押された"
    }

}

2. ButtonのsetOnClickListenerを作成

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

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

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

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

■動作を確認する

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

「BUTTON」をタップします

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

■最後に

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

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

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

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

当然ですけどねｗ

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

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

ではでは