【デモ作成①】現役SEがゼロから作るAndroidアプリ構築【改良編】

  • このエントリーをはてなブックマークに追加
  • LINEで送る

こんにちは、ふりいです。
前回記事で、デモアプリの作成に取り組み始めました。
≫参考:現役SEがゼロから作るAndroidアプリ構築【デモ作成①】

その中で、「android:onClick=”xxx”」というコードを追加しました。
(もうちょっと命名に気を遣えと言われそう。)

しかし、全体的にもう少し改良の余地がありそうだったので検討してみます。

Contents

onClickをベースにした自己流の実装を振り返る

前回実装した時、「activity_main.xml」にonClick属性をつけました。
ソースコードだと、以下の最終行の部分ですね。(かなり省略してますが)

activity_main.xml

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/floatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:onClick="xxx" />

そして、対応するxxxメソッドは、Activity(Java)側で宣言されています。
ソースコードだと、以下のような感じでした。

MainActivity.java

public void xxx(View view) {
    AlertDialog.Builder builder = new AlertDialog.Builder(view.getContext());
    LayoutInflater inflater = getLayoutInflater();

    builder.setView(inflater.inflate(R.layout.dialog_signin, null))
        .setPositiveButton(R.string.signin, new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int id) {
                // sign in the user ...
            }
        })
        .setNegativeButton(R.string.cancel, new DialogInterface.OnClickListener() {
            public void onClick(DialogInterface dialog, int id) {
                // cancel ...
            }
        });
    builder.show();
}

Activity側のソースのボリュームが少し多いので、私なりの理解を簡単に解説します。
ざっくりとですが、おそらく以下の通り。

・2行目と3行目は、それぞれダイアログの全般的な情報と、レイアウト情報を格納する変数。
・6~11行目で、サインイン(OK)ボタンのレイアウトと、ボタンクリック後の動作を設定。
・12~16行目で、キャンセル(NG)ボタンのレイアウトと、ボタンクリック後の動作を設定。
・17行目で、ダイアログを作成・表示。

よって、少し長くなりますが一連の流れをまとめると、

ユーザーがボタンがクリック
→xxxメソッドの呼び出し(activity_main.xml)
→xxxメソッドがダイアログに必要な情報を生成(Activity:2~3行目)
→ボタンのレイアウトと動作を設定(Activity:6~16行目)
→結果をダイアログとして表示(Activity:17行目)

このような形になるはずです。

onClickを残したまま色々と改良してみる

今の状態でも動くことは動くのですが、綺麗とは言えないです。
XMLでonClick属性をつけるという状態は残したまま、もう少し改良してみます。

ファイルを分割する

基本的に、役割が不明確となっているファイルは見にくいし、醜いですよね。
今回の中で、役割が不明確となっているのは「MainActivity.java」です。

Activity(アクティビティ)は、画面の制御を担当します。
画面の制御は担当するものの、画面レイアウトの制御は担当外です。

よって、画面レイアウトの制御部分は別ファイルとして切り出します。
新たに「HandOverDialogFragment.java」を作ります。

ちなみに「HandOver」は勝手に名付けました。(笑)
引き継ぐとか渡すというような意味です。

Fragment(フラグメント)は何かというと、画面のパーツだと思って問題なさそう。
アクティビティが画面の全体だとすると、フラグメントは画面の一部という感じですかね。

コードは、下のような感じになっています。

HandOverDialogFragment.java

package com.example.app;

import android.app.AlertDialog;
import android.app.Dialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.LayoutInflater;

import androidx.fragment.app.DialogFragment;

public class HandOverDialogFragment extends DialogFragment {
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
        LayoutInflater inflater = requireActivity().getLayoutInflater();

        builder.setView(inflater.inflate(R.layout.dialog_signin, null))
            .setPositiveButton(R.string.signin, new DialogInterface.OnClickListener() {
                public void onClick(DialogInterface dialog, int id) {
                    // sign in the user ...
                }
            })
            .setNegativeButton(R.string.cancel, new DialogInterface.OnClickListener() {
                public void onClick(DialogInterface dialog, int id) {
                    // cancel ...
                }
            });
        return builder.create();
    }
}

そして、「MainActivity.java」は以下の通り。

MainActivity.java

package com.example.app;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void xxx(View view) {
        HandOverDialogFragment handOverDialogFragment = new HandOverDialogFragment();
        handOverDialogFragment.show(getSupportFragmentManager(), "dialog");
    }
}

アクティビティーの方は、独自のクラスを作ってshowメソッドを追加しました。
2行でおさまったので、かなりすっきりしましたね。

また「HandOverDialogFragment.java」は、元のメソッドから戻り値を変えたような状態です。
公式サイトの参考コードにも似てきましたね。
≫参考:Dialog Fragment を作成する - Android Developers

ダイアログのレイアウトを作る部分のみ切り出したことによって、わかりやすさも増した気がします。

フォルダ構成の変更

javaファイルについては、まだ2ファイルしかありませんが、せっかくなのでフォルダを作ります。
といっても、コードを分割した時よりも随分と簡単にいきます。

まず、現状のフォルダ構成はこんな感じです。

Androidフォルダ構成

app – src – main – java – com.example.app
上記の配下にそれぞれのファイルが存在していますね。

まず「com.example.app」に、フォルダ(パッケージ)を新規追加します。
フォルダを右クリックして、新規(N) – パッケージを選択しましょう。

パッケージ追加

新規パッケージを入力する欄が出るので、以下の2つを作りましょう。
・activity
・ui

新規パッケージ activity新規パッケージ ui

あとは、それぞれのパッケージにファイルを、ドラック&ドロップします。
以下のようなアナウンスが出てきますが、両方ともそのままリファクタリング(R)を選択します。

リファクタリング

最終的に以下のようなフォルダ構成になればOKです。

Androidフォルダ構成

フォルダ構成の変更はひとまずこれで終わりにします。
これで今後ファイルが増えても、どんな役割をもつか明確になるかと思います。

メソッド名の変更

最後に、ちょろっとメソッド名だけ変えさせてください。
さすがに「xxx」メソッドだと何が何だかわからなくなってしまいますね。

この2ファイルの「xxx」メソッドを、

activity_main.xml

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/floatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:onClick="xxx" />

MainActivity.java


public void xxx(View view) {
    HandOverDialogFragment handOverDialogFragment = new HandOverDialogFragment();
    handOverDialogFragment.show(getSupportFragmentManager(), "dialog");
}

「showHandOverDialog」メソッドとでもしておきますか。

activity_main.xml

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/floatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:onClick="showHandOverDialog" />

MainActivity.java


public void showHandOverDialog(View view) {
    HandOverDialogFragment handOverDialogFragment = new HandOverDialogFragment();
    handOverDialogFragment.show(getSupportFragmentManager(), "dialog");
}

全体を通して、かなりマシにはなったかと思います。
今回は以上です。お読みいただきありがとうございました。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

コメントを残す

*