Android

Android再入門 - カウンターを作ろう(後編)

More than 5 years have passed since last update.

Android再入門 - カウンターを作ろう(前編) #Android - Qiita からの続きです。


3. 実装する

それでは、以下の流れでカウンターが動くところまで実装します。


  • プロジェクトを作る

  • 画面を作る

  • 処理を作る


プロジェクトを作る

まずは、新しいプロジェクトを作成しましょう。 Android再入門 - プロジェクトの作成 #Android - Qiita を参考にしながら、Application Nameに「Counter」と入力してプロジェクトを作成してください。


画面を作る

次に画面を作ります。


パーツを置く


  1. res/layout/activity_main.xmlを開きます。



  2. 「Hello world!」は使わないので削除してください。Viewを選択した状態でdeleteキーで削除できます。




  3. カウンターの値を表示するTextViewを置いてください。以下の4つともTextViewで見た目が違うだけなのですが、見た目はあとでカスタマイズできるのでどれを置いてもOKです。




  4. ボタンを3つ置いてください。




テキストを編集する



  1. テキストを編集します。ViewをダブルクリックしてXMLの該当箇所にジャンプします。 android:text="Large Text" が表示されるテキストの設定です。これを、カウンターの初期値は0なので android:text="0" に修正します。


    activity_main.xml

    <TextView
    
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/button1"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="68dp"
    android:text="0"
    android:textAppearance="?android:attr/textAppearanceLarge" />




  2. 3つのボタンのテキストも同様に修正します。「Graphical Layout」をクリックすると見た目の表示に切り替わるので、見た目とXMLを行き来して確認しながら修正してください。




ボタンのサイズを変更する

ボタンを大きくしたいのでサイズを変更しましょう。Viewのサイズは以下の設定で決まります。

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_width が幅で android:layout_height が高さです。

それぞれ以下の値を設定することができます。

wrap_content

中身の大きさによってサイズが決まります。例えば、TextViewであれば表示するテキスト、ImageViewであれば画像の大きさなどです。

match_parent

外側のViewのサイズによってサイズが決まります。例えば、TextViewの外側のViewは、RelativeLayoutです。RelativeLayoutのサイズの設定は今はmatch_parentになっています。一番外側に定義されているRelativeLayoutのさらに外側は画面自体になるので結果的に画面のサイズがRelativeLayoutのサイズになります。

そして、TextViewのサイズは外側のView(今回はRelativeLayout)のサイズによって決まるので、画面のサイズまでTextViewが伸びることになります。

dp

上記の2つ、中身の大きさか外側のViewの大きさによってサイズが決まるのでは困る場合、つまり、とあるサイズにしたい場合は、 50dp のようにサイズを指定することもできます。

今回の3つのボタンは、wrap_contentでは小さすぎるし、match_parentでは大きくなりすぎるので、dpを使うことにします。

何dpにするかは自分で決めたデザインに合わせて設定してください。


プラスボタンのサイズを100dpにした例

<Button

android:id="@+id/button1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="+" />


テキストのサイズを変更する

さきほどの話はViewのサイズについてでした。テキストのサイズは android:textSize で設定します。テキストのサイズには、基本的に sp という単位を使います。

Y.A.M の 雑記帳: Android TextView の setTextSize() は sp 単位だよ! によると、spは、ユーザの設定によって文字の大きさが変わるので、そのつもりで使ってください。

さらに、


コンテンツの本文とかはこれでいいのですが、ヘッダー部分などシステム全体の文字スケールに影響されたくない部分もあります。 そういう場合に dp など sp 以外の単位で指定するには、引数を2つとる setTextSize() を使います。


のようにユーザの設定によって文字の大きさが変わっては困る部分に関しては、dpで設定してもいいんじゃないかなぁと思います。上記では、メソッドが紹介されていますが、 android:textSize="10dp" としてもOKです。

少し脱線しましたが、カウンターの値を表示するTextViewとプラスボタンのテキストのサイズを大きくしましょう。


TextViewのテキストサイズを90spにした例

<TextView

android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="0"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="90sp" />

ついでにプラスボタンのテキストサイズも90spにしました。


ボタンにandroid:onClickを設定する

Android再入門 - はじめてのView #Android - Qiita でもやった「ボタンが押された時の処理」を、3つのボタンでも行いたいのでandroid:onClickを設定します。

プラスボタン

android:onClick="plus"

追加したあとは以下のようになります。

<Button

android:id="@+id/button1"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:onClick="plus"
android:text="+"
android:textSize="60sp" />

マイナスボタン

android:onClick="minus"

追加したあとは以下のようになります。

<Button

android:id="@+id/button3"
android:layout_width="80dp"
android:layout_height="60dp"
android:layout_alignBaseline="@+id/button2"
android:layout_alignBottom="@+id/button2"
android:layout_alignParentRight="true"
android:layout_marginRight="30dp"
android:onClick="minus"
android:text="-" />

クリアボタン

android:onClick="clear"

追加したあとは以下のようになります。

<Button

android:id="@+id/button2"
android:layout_width="80dp"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="30dp"
android:layout_marginLeft="30dp"
android:onClick="clear"
android:text="Clear" />

これで画面側は完成です!


処理を作る

次に処理を作ります。


ボタンに設定したメソッドを定義する

まず、ボタンに設定したメソッドを定義しましょう。


  1. MainActivity.javaを開きます。


  2. 以下のメソッドを追加します。

    public void plus(View view) {

    }

    public void minus(View view) {

    }

    public void clear(View view) {

    }

    追加すると全体は以下のようになります。


    MainActivity.java

    package com.example.counter;

    import android.app.Activity;
    import android.os.Bundle;
    import android.view.Menu;
    import android.view.View;

    public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.activity_main, menu);
    return true;
    }

    public void plus(View view) {

    }

    public void minus(View view) {

    }

    public void clear(View view) {

    }
    }





カウンターの値を定義する



  1. 以下のフィールド変数を追加します。

    private int mCount;
    

    追加すると以下のようになります。

    public class MainActivity extends Activity {

    private int mCount;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    }




プラスの処理を実装する



  1. plus()メソッドに以下のコードを追加します。

    public void plus(View view) {
    
    mCount++;
    TextView countView = (TextView) findViewById(R.id.textView1);
    countView.setText(String.valueOf(mCount));
    }



  2. プロジェクトを実行してプラスボタンを押してみてください。まだマイナスとクリアはできませんが、プラスボタンでカウントアップはできるはずです。




マイナスの処理を実装する



  1. minus()メソッドに以下のコードを追加します。

    public void minus(View view) {
    
    mCount--;
    TextView countView = (TextView) findViewById(R.id.textView1);
    countView.setText(String.valueOf(mCount));
    }


  2. プロジェクトを実行してマイナスボタンを押してみてください。プラスボタンと組み合わせてカウンターの値のプラス、マイナスができればOkです。



クリアの処理を実装する



  1. clear()メソッドに以下のコードを追加します。

    public void clear(View view) {
    
    mCount = 0;
    TextView countView = (TextView) findViewById(R.id.textView1);
    countView.setText(String.valueOf(mCount));
    }


  2. プロジェクトを実行してクリアボタンを押してみてください。カウンターの値が0になればOKです。



同じ処理はメソッドにまとめる

これで全ての振る舞いを実装できたのですが、コードをよく見ると同じ処理をしている場所があります。同じ処理は1つのメソッドにまとめましょう。

TextView countView = (TextView) findViewById(R.id.textView1);

countView.setText(String.valueOf(mCount));



  1. ということで以下のメソッドを追加してください。

    private void updateCountView() {
    
    TextView countView = (TextView) findViewById(R.id.textView1);
    countView.setText(String.valueOf(mCount));
    }



  2. 3つのボタンのメソッドからは新しく追加したメソッドを呼び出すように修正します。

    public void plus(View view) {
    
    mCount++;
    updateCountView();
    }

    public void minus(View view) {
    mCount--;
    updateCountView();
    }

    public void clear(View view) {
    mCount = 0;
    updateCountView();
    }

    すっきりしましたね!



  3. プロジェクトを実行して3つのボタンが正常に動作すればOKです。


このようにコードの重複をまとめることは、以下のようなメリットがあり非常に重要なことです。


  • コードの見通しがよくなる。

  • 修正箇所が減らせる


    • カウンターの値の表示を更新する際に、何か処理を追加したい場合、修正前の状態では3箇所を修正する必要があったのに対し、修正後の状態では1箇所を修正するだけで済むので、修正箇所を減らすことができます。



以上で「カウンターを作ろう」は完了です。お疲れ様でした!