Edited at

Android再入門 - はじめてのView

More than 5 years have passed since last update.


はじめに

ここでは、Viewと呼ばれる画面を構成する部品を置いて、プログラムから値を取得したり、値をセットしたりして、Viewの一番基本的な使い方を解説します。


入力ボックスとボタンを置いてみよう

プロジェクトが作成できた状態からはじめます。


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



  2. Text Fieldsの中に入力ボックスがあるので以下のようにドラッグして画面に置きます。置く時にいろんな表示がされますが、とりあえず好きなところに置いてください。




  3. Form Widgetsの中にボタンがあるので以下のようにドラッグして画面に置きます。



  4. ツールバーの をクリックして一度実行してみましょう。



  5. ファイルを編集したけど保存していない場合は、以下のように表示されるので「Yes」をクリックします。

    ちなみに、Ctrl+S(Macは、Command+S)でファイルを保存することができます。これは ショートカット と呼ばれるもので、「+」と書いてある場合は、それぞれのキーを同時に押します。上記の場合は、CtrlキーとSを同時に押すという意味です。Macは、Ctrlキーの代わりにCommandキーを使います。 S が大文字で表記されていますが、大文字で入力する必要はありません。そのまま s を押せばOKです。たまにファイルを保存せずに実行する人がいますが、Eclipseはファイルを保存したタイミングでソースコードがコンパイルされエラーがないかが分かるので、 こまめにCtrl+Sでファイルを保存するのがおすすめ です。




  6. さて、実行ができたらエミュレータを確認してみましょう。以下のように置いた入力ボックスとボタンが表示されていればOKです。Androidアプリは、このようにこまめに実行しながらアプリを作っていきます。




ボタンが押された時の処理

ボタンが押されたら何か処理を行うという基本からやってみましょう。


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



  1. 以下のactivity_main.xmlをクリックします。




  2. ボタン(Button)を探してください。


    activity_main.xml

    <Button
    
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_toRightOf="@+id/editText1"
    android:text="Button" />




  3. 以下のように android:onClick="click" を追加します。


    activity_main.xml

    <Button
    
    android:onClick="click"
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_toRightOf="@+id/editText1"
    android:text="Button" />



  4. Ctrl+S(Macは、Command+S)でファイルを保存してください。



アクティビティにメソッドを定義する



  1. MainActivity.javaを開きます。




  2. 以下のようにコードが自動生成されています。


    MainActivity.java

    package com.example.helloworld;

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

    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;
    }
    }





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


    MainActivity.java

    public void click(View view) {

    }


    android:onClick="click"click の部分がボタンが押された時に呼び出されるメソッド名です。 public void click(View view) のメソッド名以外の部分はルールです。例えば、 android:onClick="saveImage" と設定した場合は、 public void saveImage(View view) というメソッドを定義します。




  4. 以下のように赤い破線になっている場所はエラーが発生している場所です。マウスオーバーするとエラーの理由や修正方法の候補が表示されます。

    これはインポートしていないクラスを使おうとしている時に発生するエラーです。

    インポートとはコードの以下の部分のことです。


    MainActivity.java

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

    Javaでは、利用するクラスを上記のようにインポートしなければなりません。これを import文 といいます。エラーに戻ると View というクラスをインポートする必要があるという意味です。Viewクラスをインポートするには import android.view.View; というimport文を書けばいいのですが、あるクラスがどのパッケージに所属しているか覚えたり調べたりすることは数が膨大すぎるので現実的ではありません。

    そこでElicpseでは、 Ctrl+Shift+O Macは Command+Shift+O というショートカットで自動的にimport文を補完してくれる機能があります。 O は、数字の 0 ではなく、英字の o です。

    では、Ctrl+Shift+O(Macは、Command+Shift+O)を押してみてください。以下のようにimport文が追加されて、ViewクラスのエラーがなくなればOKです。

    このインポートが必要なエラーは今後も新しいコードを書くたびに発生します。そのたびに、Ctrl+Shift+O(Macは、Command+Shift+O)でimport文を自動補完してください。




トーストを表示する

さきほど定義したメソッドは中身が空なのでボタンを押しても何も処理がされません。いまからトーストが表示されるように処理を追加しましょう。



  1. click()メソッドに以下のコードを追加してください。


    MainActivity.java

    public void click(View view) {
    
    Toast.makeText(this, "ボタンが押されたよ!", Toast.LENGTH_SHORT).show();
    }




  2. では、実行してみましょう。エミュレータでボタンを押した時に以下のように表示されればOKです。




Viewの値を取得する

次に、入力ボックスに入力された値(文字列)を取得してみましょう。


Viewのidを確認する

まず、入力ボックスのidを確認します。のちほど、このidを使うので覚えておいてください。



  1. activity_main.xmlで入力ボックス(EditText)を探してください。


    activity_main.xml

    <EditText
    
    android:id="@+id/editText1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:ems="10" >



  2. android:id="@+id/editText1" の部分がidの設定です。もっというと @+id/editText1@+id/ は、「idを追加で宣言するよ」という意味で、 editText1 の部分が実際のidになります。



Viewインスタンスを取得する



  1. MainActivity.javaでclick()メソッドに以下のコードを追加してください。


    MainActivity.java

    EditText input = (EditText) findViewById(R.id.editText1);
    

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


    MainActivity.java

    public void click(View view) {
    
    EditText input = (EditText) findViewById(R.id.editText1);
    Toast.makeText(this, "ボタンが押されたよ!", Toast.LENGTH_SHORT).show();
    }




入力ボックスに入力された値(文字列)を取得



  1. MainActivity.javaでclick()メソッドに以下のコードを追加してください。


    MainActivity.java

    String text = input.getText().toString();
    

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


    MainActivity.java

    public void click(View view) {
    
    EditText input = (EditText) findViewById(R.id.editText1);
    String text = input.getText().toString();
    Toast.makeText(this, "ボタンが押されたよ!", Toast.LENGTH_SHORT).show();
    }




トーストに表示してみる



  1. 取得した文字列をトーストに表示してみましょう。変数 text に文字列が入っているのでこれをトーストの文字列に置き換えます。


    MainActivity.java

    Toast.makeText(this, text, Toast.LENGTH_SHORT).show();
    

    置き換えると以下のようになります。


    MainActivity.java

    public void click(View view) {
    
    EditText input = (EditText) findViewById(R.id.editText1);
    String text = input.getText().toString();
    Toast.makeText(this, text, Toast.LENGTH_SHORT).show();




  2. では、実行してみましょう。エミュレータで入力ボックスに何か入力して、ボタンを押した時に以下のように入力した文字列が表示されればOKです。




Viewに値をセットする

Viewから値を取得することができたので、次は逆にViewに値をセットしてみましょう。入力ボックスに入力された文字列を「Hello world!」の部分に表示してみましょう。


Viewのidを確認する



  1. 「Hello world!」の部分は、文字列を表示するテキストビュー(TextView)で作られています。activity_main.xmlでテキストビュー(TextView)を探してください。


    activity_main.xml

    <TextView
    
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:text="@string/hello_world" />

    android:idが設定されていません。ということで自分で設定しましょう。




  2. 以下のように android:id="@+id/main_text" を追加します。


    activity_main.xml

    <TextView
    
    android:id="@+id/main_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:text="@string/hello_world" />

    これでidを設定することができました。idは main_text です。idは、自分で好きに追加したり変更したりできます。




Viewインスタンスを取得する



  1. MainActivity.javaでclick()メソッドに以下のコードを追加してください。


    MainActivity.java

    TextView main = (TextView) findViewById(R.id.main_text);
    

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


    MainActivity.java

    public void click(View view) {
    
    EditText input = (EditText) findViewById(R.id.editText1);
    String text = input.getText().toString();

    TextView main = (TextView) findViewById(R.id.main_text);

    Toast.makeText(this, text, Toast.LENGTH_SHORT).show();
    }





テキストビューに文字列をセットする



  1. click()メソッドに以下のコードを追加してください。


    MainActivity.java

    main.setText(text);
    

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


    MainActivity.java

    public void click(View view) {
    
    EditText input = (EditText) findViewById(R.id.editText1);
    String text = input.getText().toString();

    TextView main = (TextView) findViewById(R.id.main_text);
    main.setText(text);

    Toast.makeText(this, text, Toast.LENGTH_SHORT).show();
    }





  2. では、実行してみましょう。エミュレータで入力ボックスに何か入力して、ボタンを押した時に以下のように「Hello world!」の部分に入力した文字列が表示されればOKです。



これで、以下の基本的な方法を説明しました。


  • ボタンが押された時の処理

  • Viewの値を取得する

  • Viewに値をセットする

お疲れ様でした!