今回はViewクラスを拡張し、Javaのクラスを使って、ランダムな位置に図形を描画します。

まずは、プロジェクトの作成を行ってください。

[簡単Androidアプリ] プロジェクトの作成からHello Worldテキストの出力まで


今回はレイアウトの設定は行わないので早速プログラムから見ていきます。

Coding

コードを入力していきます。

SampleMain.java

package com.sample.brogger;

import java.util.ArrayList;
import java.util.Random;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;

public class SampleMain extends Activity {

    /** 描画する図形の数 **/
    static final int num = 600;

    /** Viewクラスを拡張した、DrawViewクラスのオブジェクトの宣言 **/
    DrawView dView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // レイアウトの設定
        LinearLayout ll = new LinearLayout(this);
        // レイアウトの指定
        setContentView(ll);

        // Viewクラスを拡張した、DrawViewクラスのオブジェクトの作成
        dView = new DrawView(this);

        ll.addView(dView);
    }

    /** Viewクラスを拡張した、DrawViewクラス **/
    class DrawView extends View
    {
        /** 描画する図形を格納するリスト **/
        ArrayList<SampleShape> shList;

        /** DrawViewクラスが作成された際に最初に実行されるメソッド（コンストラクタ） **/
        public DrawView(Context context) {
            super(context);

            // 図形リストの作成
            shList = new ArrayList<SampleShape>();

            // 乱数の作成
            Random rn = new Random();

            for(int cnt=0; cnt<num; cnt++)
            {
                //描画する図形のオブジェクト
                SampleShape sh = new SampleShape();

                // ランダムな位置を取得
                sh.x = rn.nextInt(1500);
                sh.y = rn.nextInt(1000);

                // ランダムな色を取得
                sh.r = rn.nextInt(256);
                sh.g = rn.nextInt(256);
                sh.b = rn.nextInt(256);

                // リストに図形を追加
                shList.add(sh);
            }
        }

        /** 描画が行われるときに呼び出されるメソッド **/
        @SuppressLint("DrawAllocation")
        protected void onDraw(Canvas cs)
        {
            super.onDraw(cs);

            // ペイントオブジェクトの作成
            Paint p = new Paint();

            for(int cnt=0; cnt<num; cnt++)
            {
                // 図形リストから図形を取り出す
                SampleShape sh = shList.get(cnt);

                // 色の設定
                p.setColor(Color.rgb(sh.r, sh.g, sh.b));

                // 塗りつぶしの設定
                p.setStyle(Paint.Style.FILL);

                // 図形を描画（円）
                cs.drawCircle(sh.x, sh.y, 10, p);
            }
        }
    }
}

/** 図形の各パラメータを定義するクラス **/
class SampleShape
{
    public int x,y,r,g,b;
}

Execution

では実際に実行してみましょう

前投稿：[簡単Androidアプリ] 画像をアニメーションさせてみよう！！（ImageView）

今回はイメージビュー（ImageView）を使って画像を表示し、その画像をアニメーションさせるプログラムを作って行きたいと思います。

まずは、プロジェクトの作成を行ってください。

[簡単Androidアプリ] プロジェクトの作成からHello Worldテキストの出力まで

Layout

レイアウトの作成を行います。

まず、自分のプロジェクトの「res」->「drawable-hdpi」フォルダ内に自分が表示したい画像をコピーしてください。ただし画像のファイル名は半角英数で、最初の一文字は小文字にしてください。

レイアウトを設定するxmlファイルを開きましょう。（ここではactivity_sample_main.xml）

「palette」->「イメージ＆メディア」->「ImageView」をアプリケーション画面にドラッグします。

上図のウィンドウが開いたら「drawable-hdpi」フォルダに追加した画像を選択します。（ここでは image）

Coding

コードを入力していきます。

SampleMain.java

package com.sample.brogger;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.AnimationSet;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.widget.ImageView;

public class SampleMain extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // レイアウトの指定
        setContentView(R.layout.activity_sample_main);

        // ImageViewのオブジェクトを作成
        ImageView iv = (ImageView) findViewById(R.id.imageView1);

        // ImagViewをクリックした時の処理をするリスナ
        iv.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                ImageView tmpIv = (ImageView) v;

                // アニメーションの集合を作成
                AnimationSet anim = new AnimationSet(true);

                // 回転アニメーションを追加
                anim.addAnimation(new RotateAnimation(0, 360, tmpIv.getWidth()/2, tmpIv.getHeight()/2));

                // 拡大アニメーションの追加
                anim.addAnimation(new ScaleAnimation(1, 2, 1, 2, tmpIv.getWidth()/2, tmpIv.getHeight()/2));

                // 再生時間の設定
                anim.setDuration(1000);

                // アニメーションの再生
                tmpIv.startAnimation(anim);
            }
        });
    }
}

Execution

では実際に実行してみましょう。

画像をクリックすると・・・

アニメーションします。



前投稿：[簡単Androidアプリ] ダイアログ（AlertDialog）を使ってみよう！！
次投稿：[簡単Androidアプリ] 図形を描画してみよう！！（Viewクラスの拡張）

今回はダイアログ（AlertDialog）について書いていこうとおもいます。

ダイアログはメッセージをポップアップで表示したり、簡単な入力を行ってもらう際に使用します。

まずは、プロジェクトの作成を行ってください。

[簡単Androidアプリ] プロジェクトの作成からHello Worldテキストの出力まで


今回はリストのアイテムを押した場合にダイアログを表示するプログラムを作成します。
リストの利用については下記の記事を参照してください。またレイアウトの作成についても下記を参照してください。

[簡単Androidアプリ]　リストビュー（ListView）を使ってみよう！！

Coding

コードを入力していきます。

package com.sample.brogger;

import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class SampleMain extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // レイアウトの指定
        setContentView(R.layout.activity_sample_main);

        // オブジェクトの作成
        ListView lv = (ListView) findViewById(R.id.listView1);

        // リストビュー表示する文字列を設定します
        String[] lvStr = {
                "OS","CPU","メモリ",
                "ディスプレイ","ハードディスク","SSD",
                "Office","GPU","キーボード",
                "マウス","スピーカー"
        };

        // リストビューに表示する文字列を、格納するアダプターの作成
        ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, lvStr);

        // リストビューにアダプターを設定
        lv.setAdapter(adapter);

        // リストビューの項目をクリックした時の処理をするリスナ
        lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView parent, View view, int position, long id) {

                ListView tmpListView = (ListView) parent;

                // クリックされた項目の文字列を取得
                final String itemStr = (String)tmpListView.getItemAtPosition(position);

                // オブジェクトの作成
                AlertDialog.Builder aDB = new AlertDialog.Builder(SampleMain.this);

                // ダイアログのタイトルを設定
                aDB.setTitle("確認");

                // ダイアログに表示するメッセージを設定
                aDB.setMessage("本当によろしいですか？");

                // ”はい” ボタンの設定
                aDB.setPositiveButton("はい", new DialogInterface.OnClickListener() {


                    // "はい" ボタンが押された場合のリスナー
                    public void onClick(DialogInterface dialog, int which) {

                        // "はい" ボタンが押された場合に表示するダイアログ
                        new AlertDialog.Builder(SampleMain.this)
                        .setTitle("購入")
                        .setMessage(itemStr + "のご購入ありがとうございます。")
                        .setPositiveButton("OK", null).show();
                   }
               });

                // ”いいえ” ボタンの設定
                aDB.setNegativeButton("いいえ", new DialogInterface.OnClickListener() {

                    // "いいえ" ボタンが押された場合のリスナー
                    public void onClick(DialogInterface dialog, int which) {
                     // "いいえ" ボタンが押された場合に表示するダイアログ
                        new AlertDialog.Builder(SampleMain.this)
                        .setTitle("キャンセル")
                        .setMessage("またのご利用お待ちしております。")
                        .setPositiveButton("OK", null).show();
                    }
                });

                // アラートダイアログを表示します
                AlertDialog alertDialog = aDB.create();
                alertDialog.show();
            }
        });
    }
}

Execution

では実際に実行してみましょう。

リストの項目をクリックすると・・・

ダイアログが表示されます。

更に”はい”ボタンを押すと・・・

別のダイアログが表示されます。

前記事：[簡単Androidアプリ]　スピナ（Spinner）を使ってみよう！！

今回はスピナ（Spinner）について書いていこうとおもいます。

スピナはリストビューに似ていますが、右端をタッチすることでリストがドロップダウンして表示されます。


まずは、プロジェクトの作成を行ってください。

[簡単Androidアプリ] プロジェクトの作成からHello Worldテキストの出力まで

Layout

レイアウトの作成を行います。

レイアウトを設定するxmlファイルを開きましょう。（ここではactivity_sample_main.xml）

palette -> コンポジット -> Spinner をアプリケーション画面にドラッグします。

Coding

コードを入力していきます。

package com.sample.brogger;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.Toast;

public class SampleMain extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // レイアウトの指定
        setContentView(R.layout.activity_sample_main);

        // オブジェクトの作成
        final Spinner sp = (Spinner) findViewById(R.id.spinner1);

        // リストビュー表示する文字列を設定します
        String[] SpStr = {
                "OS","CPU","メモリ",
                "ディスプレイ","ハードディスク","SSD",
                "Office","GPU","キーボード",
                "マウス","スピーカー"
        };


        // リストビューに表示する文字列を、格納するアダプターの作成
        ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_spinner_item, SpStr);

        // スピナをクリックした時の表示形式の指定
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

        // スピナにアダプターを設定
        sp.setAdapter(adapter);

        // スピナをクリックした時の処理をするリスナ
        sp.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {

            @Override
            public void onItemSelected(AdapterView parent, View view, int position, long id) {
                // クリックされた項目の文字列を取得
                String tmpStr = (String) sp.getSelectedItem();

                // トーストに取得した文字列を表示
                Toast.makeText(SampleMain.this, tmpStr + "が選択されました", Toast.LENGTH_LONG).show();
            }

            @Override
            public void onNothingSelected(AdapterView parent) {
                // TODO 自動生成されたメソッド・スタブ

            }
        });
    }
}

Execution

では実際に実行してみましょう。

スピナをクリックすると・・・

ドロップダウンメニューが表示されます。

さらに項目をクリックすると・・・

トーストが表示されます。

前記事：[簡単Androidアプリ] リストビュー（ListView）に日付を表示してみよう！！「ArrayAdapterクラスの拡張」
次投稿：[簡単Androidアプリ] ダイアログ（AlertDialog）を使ってみよう！！

前回は、リストビューに自分の好きな文字列をリストビューのアイテムとして追加しました。今回はをリストビューに日付を表示してみたいと思います。

では前回と同じようにレイアウトの作成を行ってください

[簡単Androidアプリ]　リストビュー（ListView）を使ってみよう！！

Coding

コードの編集を行っていきます。

SampleMain.java

package com.sample.brogger;

import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Date;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

public class SampleMain extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // レイアウトの指定
        setContentView(R.layout.activity_sample_main);

        // オブジェクトの作成
        ListView lv = (ListView) findViewById(R.id.listView1);

        // リストビュー表示する文字列を設定します
        String[] lvStr = new String[50];

        // リストビューに表示する文字列を、格納するアダプターの作成
        ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, lvStr){

            @SuppressLint("SimpleDateFormat")
            public View getView(int pos, View convView, ViewGroup parent)
            {
                // 日付の表示形式を指定
                DateFormat df = new SimpleDateFormat("yyyy/MM/dd");

                // カレンダーのオブジェクトを取得
                Calendar cl = Calendar.getInstance();

                // 今日の日付を取得
                cl.setTime(new Date());

                // 今日の日付に行数を足し、表示する日付を取得
                cl.add(Calendar.DATE, pos);

                // 取得した日付をtmpTvに格納
                TextView tmpTv = new TextView(getBaseContext());
                tmpTv.setText(df.format(cl.getTime()));

                // テキストのサイズを設定
                tmpTv.setTextSize(20);

                // テキストのカラーを設定
                tmpTv.setTextColor(Color.BLACK);

                // 日曜日ならばテキストの色を変更
                if(cl.get(Calendar.DAY_OF_WEEK) == Calendar.SUNDAY)
                {
                    tmpTv.setTextColor(Color.RED);
                }

                convView = tmpTv;

                return convView;

            }
        };

        // リストビューにアダプターを設定
        lv.setAdapter(adapter);

        // リストビューの項目をクリックした時の処理をするリスナ
        lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView parent, View view, int position, long id) {
                // クリックされた項目の文字列を取得
                TextView tmpTv = (TextView) view;

                // トーストに取得した文字列を表示
                Toast.makeText(SampleMain.this, tmpTv.getText() + "が選択されました", Toast.LENGTH_LONG).show();
            }
        });
    }
}

Execution

では実行してみましょう。

項目をクリックすると・・・

トーストが表示されます。

前記事：[簡単Androidアプリ]　リストビュー（ListView）を使ってみよう！！
次記事：[簡単Androidアプリ]　スピナ（Spinner）を使ってみよう！！

今回はリストビュー（ListView）について書いていこうとおもいます。

リストビューは複数の項目から、ある項目を選ぶ際に使用します。



まずは、プロジェクトの作成を行います。

[簡単Androidアプリ] プロジェクトの作成からHello Worldテキストの出力まで

Layout

レイアウトの作成を行います。

レイアウトを設定するxmlファイルを開きましょう。（ここではactivity_sample_main.xml）

palette -> コンポジット -> ListView をアプリケーション画面にドラッグします。

Coding

コードを入力していきます。

SampleMain.java

package com.sample.brogger;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class SampleMain extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // レイアウトの指定
        setContentView(R.layout.activity_sample_main);

        // オブジェクトの作成
        ListView lv = (ListView) findViewById(R.id.listView1);

        // リストビュー表示する文字列を設定します
        String[] lvStr = {
                "OS","CPU","メモリ",
                "ディスプレイ","ハードディスク","SSD",
                "Office","GPU","キーボード",
                "マウス","スピーカー"
        };

        // リストビューに表示する文字列を、格納するアダプターの作成
        ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, lvStr);

        // リストビューにアダプターを設定
        lv.setAdapter(adapter);

        // リストビューの項目をクリックした時の処理をするリスナ
        lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView parent, View view, int position, long id) {
                // TODO 自動生成されたメソッド・スタブ
                ListView tmpListView = (ListView) parent;
                // クリックされた項目の文字列を取得
                String itemStr = (String)tmpListView.getItemAtPosition(position);

                // トーストに取得した文字列を表示
                Toast.makeText(SampleMain.this, itemStr + "が選択されました", Toast.LENGTH_LONG).show();
            }
        });
    }
}

Execution

では実際に実行してみましょう。

項目をクリックすると・・・

トーストが表示されます。

前記事：[簡単Androidアプリ] エディットテキスト（EditText）を使ってみよう！！
次記事：[簡単Androidアプリ] リストビュー（ListView）に日付を表示してみよう！！「ArrayAdapterクラスの拡張」

今回はエディットテキスト（EditText）の使い方について書いていこうと思います。

このブログの過去の記事では、テキストビュー（TextView）の使い方にを説明しました。

[簡単Androidアプリ]　TextViewの利用

今回使うエディットテキストは、テキストビューと違いユーザからの入力を受け付けることができます。

Layout

レイアウトを設定していきます。

レイアウトを設定するxmlファイルを開きましょう。（ここではactivity_sample_main.xml）

今回は、テキストビューとエディットテキストの二つのビューを使用します。
まずはテキストビューを Palette -> フォーム・ウィジェット -> TextView からアプリケーション画面に追加します。

同じようにエディットテキストも Palette -> テキスト・フィールド -> Plain Text から追加します。

あとはお好きな位置に配置し、Properties からお好きな設定にしてください。

Coding

以下のコードをメインアクティビティクラスに記述します。ここでは（SampleMain.java）

SampleMain.java

package com.sample.brogger;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;

public class SampleMain extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // レイアウトの指定
        setContentView(R.layout.activity_sample_main);

        // オブジェクトの作成
        final EditText et = (EditText) findViewById(R.id.editText1);
        final TextView tv = (TextView) findViewById(R.id.textView1);

        // キーを押した時の処理をするリスナ
        et.setOnKeyListener(new View.OnKeyListener() {

            @Override
            public boolean onKey(View v, int keyCode, KeyEvent event) {
                // TODO 自動生成されたメソッド・スタブ
                // エディットテキストの所得
                EditText tmp = (EditText) v;

                // 入力したテキストをテキストビューに設定する
                tv.setText("「" + tmp.getText() + "」 が入力されました。");

                return true;
            }
        });
    }
}

Execution

入力を行うと・・・

テキストビューに出力されます。

前記事：[簡単Androidアプリ] ラジオボタン（RadioButton）使ってみよう！！
次投稿：[簡単Androidアプリ]　リストビュー（ListView）を使ってみよう！！

今回はラジオボタン（RadioButton）の使い方について書いていきたいと思います。

ラジオボタンとは事前定義された選択肢のうち一つだけを選択するボタンです。


まずはプロジェクトの作成を行ってください。

[簡単Androidアプリ] プロジェクトの作成からHello Worldテキストの出力まで

Layout

レイアウトの作成を行っていきます。

レイアウトを設定するxmlファイルを開きましょう。（ここではactivity_sample_main.xml）

palette -> フォーム・ウィジェット ->RadioGroup をアプリケーション画面にドラッグします。

Coding

以下のプログラムをメインアクティビティクラスに記述します。（ここではSampleMain.java）

SampleMain.java

package com.sample.brogger;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.widget.RadioButton;
import android.widget.RadioGroup;

import com.sample.brogger.R.id;

public class SampleMain extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // レイアウトの指定
        setContentView(R.layout.activity_sample_main);

        // オブジェクトの作成
        RadioGroup rg = (RadioGroup) findViewById(R.id.radioGroup1);
        final RadioButton rb0 = (RadioButton) findViewById(R.id.radio0);
        final RadioButton rb1 = (RadioButton) findViewById(R.id.radio1);
        final RadioButton rb2 = (RadioButton) findViewById(R.id.radio2);

        // ラジオボタンの状態を設定
        rg.check(id.radio0);

        // ラジオボタンがチェックされた時に呼び出されるリスナ
        rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {

            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                // TODO 自動生成されたメソッド・スタブ
                // チェックされたラジオボタンの取得
                RadioButton ch_rb = (RadioButton) findViewById(checkedId);

                // ラジオボタンのテキストカラーをデフォルトに
                rb0.setTextColor(Color.BLACK);
                rb1.setTextColor(Color.BLACK);
                rb2.setTextColor(Color.BLACK);

                // チェックされたラジオボタンのテキストカラーの変更
                ch_rb.setTextColor(Color.RED);

            }
        });
    }
}

Execution

では実際に実行してみましょう。

ラジオボタンを押すと・・・

テキストの色が変わります。



前記事：[簡単Androidアプリ] チェックボックス（CheckBox）をつかってみよう！！
次投稿：[簡単Androidアプリ] エディットテキスト（EditText）を使ってみよう！！

今回はチェックボックス（CheckBox）の使い方について書いていきたいと思います。

チェックボックスとは、ある項目に対して「yes」または「no」の答えを出力するためのボタンです。


まずはプロジェクトの作成を行ってください。

[簡単Androidアプリ] プロジェクトの作成からHello Worldテキストの出力まで

Layout

レイアウトの作成を行います。

レイアウトを設定するxmlファイルを開きましょう（ここではactivity_sample_main.xml）

palette -> フォーム・ウィジェット -> CheckBox を二つアプリケーション画面にドラッグします。

Coding

以下のプログラムをメインアクティビティクラスに記述します。（ここではSampleMain）

SampleMain.java

package com.sample.brogger;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.CheckBox;
import android.widget.Toast;

public class SampleMain extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // レイアウトの指定
        setContentView(R.layout.activity_sample_main);

        // オブジェクトの作成
        CheckBox ch1 = (CheckBox) findViewById(R.id.checkBox1);
        CheckBox ch2 = (CheckBox) findViewById(R.id.checkBox2);

        // チェックボックスの状態を設定
        ch1.setChecked(true);
        ch2.setChecked(false);

        // チェックボックス1のリスナ
        ch1.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO 自動生成されたメソッド・スタブ
                // チェックされたチェックボックスの取得
                CheckBox checkBox = (CheckBox) v;
                // チェック状態をトーストで表示
                boolean ch = checkBox.isChecked();
                // トーストでチェック状態を表示
                Toast.makeText(SampleMain.this,
                        "チェックボックス１：" + String.valueOf(ch), Toast.LENGTH_SHORT).show();
            }
        });

        // チェックボックス2のリスナ
        ch2.setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO 自動生成されたメソッド・スタブ
                // チェックされたチェックボックスの取得
                CheckBox checkBox = (CheckBox) v;
                // チェック状態をトーストで表示
                boolean ch = checkBox.isChecked();
                // トーストでチェック状態を表示
                Toast.makeText(SampleMain.this,
                        "チェックボックス２：" + String.valueOf(ch), Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Execution

では実際に実行してみましょう。

チェックボックスをクリックすると・・・

トーストが表示されます。

前記事：[簡単Androidアプリ] カウンターアプリケーションを作ってみよう！！
次記事：[簡単Androidアプリ] ラジオボタン（RadioButton）使ってみよう！！

これまで、[簡単Androidアプリ]というタイトルで６記事ほど投稿してきましたが今回はこれまでの総集編みたいなものです。

ここまでこのクソみたいなブログを読んでくれたプログラム初心者のあなた！！
あなたに朗報です。

といっても私もまだまだ初心者なのですが…

それはどうでもいいとして、

そう！たった６記事。
開発環境のページを抜けば、たった４記事の内容で簡単なカウンタアプリが作れちゃいます。

もしこれまでjavaやC言語の基礎本しか勉強したことのない人がいれば感動すると思います。私もはじめてGUIアプリケーションを自分で作成した際少し感動してしましました。

では早速コードを見て行きましょう。

Coding

SampleMain.java

メインアクティビティクラス

package com.sample.brogger;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;

public class SampleMain extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // レイアウトの指定
        setContentView(R.layout.activity_sample_main);

        // オブジェクトの作成
        final TextView tv = (TextView) findViewById(R.id.pvText);
        final Button cnt_bt = (Button) findViewById(R.id.sampleButton);
        final Button clear_bt = (Button) findViewById(R.id.clearButton);

        // カウントボタンが押された場合のリスナ
        cnt_bt.setOnClickListener( new OnClickListener() {
         @Override
         public void onClick(View v) {
             // pvTextの値を取得
             int cnt = Integer.parseInt((String) tv.getText());

             // 取得した値 + 1
             cnt++;

             // ボタンが押された場合TextViewの文字を変更
             tv.setText(String.valueOf(cnt));
         }
        });

        // クリアボタンが押された場合のリスナ
        clear_bt.setOnClickListener( new OnClickListener() {
         @Override
         public void onClick(View v) {
             // ボタンが押された場合TextViewの文字を変更
             tv.setText("0");
         }
        });
    }
}

activity_sample_main.xml

レイアウトを設定するxml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@drawable/gradientbackground"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.sample.brogger.SampleMain" >

    <TextView
        android:id="@+id/sampleText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text="1031Taku-Programming Note"
        android:textSize="70sp" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/sampleButton"
        android:layout_alignLeft="@+id/sampleText"
        android:layout_marginBottom="99dp"
        android:layout_marginLeft="378dp"
        android:text="PV:"
        android:textSize="60sp" />

    <TextView
        android:id="@+id/pvText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/textView1"
        android:layout_alignBottom="@+id/textView1"
        android:layout_marginLeft="23dp"
        android:layout_toRightOf="@+id/textView1"
        android:text="0"
        android:textSize="60sp" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView3"
        android:layout_alignTop="@+id/textView3"
        android:layout_marginTop="44dp"
        android:text="皆さんの力でたくさん上げてあげてください" />

    <Button
        android:id="@+id/sampleButton"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_above="@+id/textView3"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="62dp"
        android:text="1031Taku"
        android:textSize="40sp" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/sampleText"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="164dp"
        android:text="ボタンをクリックするとPV数が上がります" />

    <Button
        android:id="@+id/clearButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/textView4"
        android:layout_alignRight="@+id/sampleButton"
        android:layout_marginLeft="112dp"
        android:layout_toRightOf="@+id/pvText"
        android:text="Clear"
        android:textSize="30sp" />

</RelativeLayout>

gradientbackground.xml

背景をグラデーションするxml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
    android:startColor="#CCFF99"
    android:endColor="#CCFFFF"
    android:angle="270"/>
<corners android:radius="10dp"/>
</shape>

実行

では実際に実行してみます。

1031Takuボタンを押すと…

カウントされます。
更に「Clear」ボタンを押すとカウントがクリアされます。

解説

今回は総集編なので詳しい解説は以前投稿した記事内に書いてあります。
一応リンクだけ貼っておきますね。


[簡単Androidアプリ] プロジェクトの作成からHello Worldテキストの出力まで

[簡単Androidアプリ] ボタンの利用とリスナーの設定

[簡単Androidアプリ] 背景にグラデーションを与える方法

前回はTextViewクラスのオブジェクトを作成しそれを出力するだけのプログラムでした。

前回記事：[Androidアプリ]　TextViewを使ってのHello World

今回はTextViewともう一つ、Buttonを使ってボタンを押すとTextViewで表示する文字列を変更するプログラムを作りたいと思います。



まずは、プロジェクトの作成を行います。
プロジェクト作成については以前書いた記事を参照してください。

プロジェクト作成：[Androidアプリ] プロジェクトの作成からHello Worldまで

Layout

次にレイアウトの設定を行うxmlファイルを編集していきます。
前回の記事ではこのxmlファイルは使用しませんでしたが、通常アプリケーションのレイアウトを作成する際はこのxmlファイルを使用していきます。

レイアウトのxmlファイルはプロジェクトの「res -> layout」フォルダ内にあります。
このファイルを開いてください。

デフォルトでTextViewが設定されている場合はそのままで、もし設定されていない場合はButtonと一緒にTextViewも追加していきます。
「palette」欄の「フォーム・ウィジェット」にTextViewとButtonがあります。これをActivityにドラッグで追加してください。

次にこのTextViewとButtonのIdを設定します。まずTextViewをクリックし、Properties欄の一番上部にあるIdの「@+id/」以降の値を好きな値に変更してください。ここでは「@+id/sampleText」とします。変更する際何かポップアップが出た場合は全て「はい」を押してください。
同じようにボタンのIdも設定してきます。ここでは「@+id/sampleButton」とします。

このProperties欄ではビューの様々な値を変更することができます。自分のお好きなように設定してみてください。

参考までに、
TextViewの「Text」を"Taku-Programming Note"
TextViewの「Text Size」を"50sp"
Buttonの「Text」を"1031Taku"
Buttonの「Width」を"match_parent"
に設定してみました。

Coding

では実際にコードを入力していきましょう。

package com.sample.brogger;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;

public class SampleMain extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // レイアウトの指定
        setContentView(R.layout.activity_sample_main);

        // オブジェクトの作成
        final TextView tv = (TextView) findViewById(R.id.sampleText);  // xmlファイルで設定したIdを
        final Button bt = (Button) findViewById(R.id.sampleButton);    // findViewByIdで指定

        // リボタンが押された場合のリスナ
        bt.setOnClickListener( new OnClickListener() {
         @Override
         public void onClick(View v) {
             // ボタンが押された場合TextViewの文字を変更
             tv.setText("ボタンが押されました");
         }
        });
    }
}

Execution

では実行してみましょう。

ボタンを押すと…

テキストが変更されます。

解説

今回のプログラムと前回とで大きく違うのは、リスナを利用している点です。前回ではただテキストを表示するだけで、なんのインタラクション性もないプラグラムでしたが、今回はリスナを利用することでユーザの操作によって変化をおこすプログラムになっています。

このような処理をイベント処理と言います。

今回の例では、「ボタンを押した」というイベントに対し、
「リスナ（OnClickListener）」がTextViewのテキストを変更するという処理行いました。

// リボタンが押された場合のリスナ
bt.setOnClickListener( new OnClickListener() {
    @Override
    public void onClick(View v) {
        // イベントが発生した際に行う処理を記述
    }
});  

前記事：[簡単Androidアプリ]　TextViewの利用