1031Taku - Programming Note

今回はリストビュー（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の利用

登録: 投稿 (Atom)

Categories

Search

1031Taku - Programming Note

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

Layout

Coding

SampleMain.java

Execution

[簡単Androidアプリ] エディットテキスト（EditText）を使ってみよう！！

Layout

Coding

SampleMain.java

Execution

[簡単Androidアプリ] ラジオボタン（RadioButton）使ってみよう！！

Layout

Coding

SampleMain.java

Execution

[簡単Androidアプリ] チェックボックス（CheckBox）をつかってみよう！！

Layout

Coding

SampleMain.java

Execution

[簡単Androidアプリ] カウンターアプリケーションを作ってみよう！！

Coding

SampleMain.java

activity_sample_main.xml

gradientbackground.xml

実行

解説

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

Layout

Coding

Execution

解説

Follow Us

Android - Book

Java - Book

Popular Posts

Labels

Blog Archive

Brog Ranking

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