特集記事

サンプルアプリでおぼえる実践的Android入門

～実用的な電卓アプリを作る

金田浩明[著]

2011/06/14 14:00

ポスト

ダウンロードサンプルファイル（途中経過） (91.6 KB)
ダウンロードサンプルファイル（完成形） (106.0 KB)

Androidのプロジェクトを作る

　まずはAndroidのプロジェクトを作成しましょう。［ファイル］メニューより［新規］-［Android Project］を選択します。

　New Android Projectウィンドウが開くので、次の値を設定して、プロジェクトを作成してください。

Project name: MyCalc（任意設定）
Build Target: Android 1.6
Application name: MyCalc（任意設定）
Package name: my.android.mycalc（任意設定）
Create Activity: MainActivity
Min SDK Version: 4

　Projectが作成されると、srcフォルダに「MainActivity.java」ファイルが作成されていると思います。これが今回のメイン画面になります。電卓なので画面はシンプルにMainActivity1画面のみで構成します。

　「MainActivity.java」ファイルを開きましょう。雛形なのでほとんどなにもありません。

　setContentView(R.layout.main);という一文があります。これはリソースファイルからmainという画面デザインを読み込むよう指示しています。では画面デザインmainを見ていきましょう。

Androidの画面デザインをXMLで行う

　画面デザインは「res/layout」フォルダ内にある「main.xml」というxmlファイルで行います。「main.xml」ファイルを開くと、編集画面になります。下部にあるタブからGraphical Layoutを選ぶとグラフィカルな編集画面になり、main.xlmを選ぶとテキストによる編集画面になります。

　タブでmain.xmlを選択してテキスト編集画面を開いてください。LinearLayoutが1つ、そのなかにTextViewが1つ配置されているのが分かると思います。ここに電卓のボタンを配置していきます。

　LinerLayoutは、テキストやボタンなどの画面要素を直線的に縦または横に並べるためのレイアウトです。LinerLayoutの中にさらに2つのLinerLayoutを配置してください。

　1つ目のLinerLayoutの中にTextViewを1つ配置します。これが電卓の液晶ディスプレイになります。2つ目のLinerLayoutの中には、TableLayoutを配置します。TableLayoutは電卓のボタンを格子状に並べるために使用します。

　2つ目のTableLayoutの中には、行を表すTableRowを4つ配置します。各行にはボタンを4つずつ配置してください。

　あとはボタンに名前をつけ、液晶ディスプレイの背景色と文字色を変更します。完成した「main.xml」は次のようになりました。

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <LinearLayout android:id="@+id/linearLayout1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:gravity="center_vertical|center_horizontal">
        <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/display" android:textSize="40sp" android:textColor="#505050" android:background="#EEEEEE" android:gravity="right"></TextView>
    </LinearLayout>
    <LinearLayout android:id="@+id/linearLayout2" android:layout_width="fill_parent" android:orientation="horizontal" android:layout_height="fill_parent">
        <TableLayout android:id="@+id/tableLayout1" android:layout_width="fill_parent" android:layout_height="fill_parent">
            <TableRow android:layout_weight="1" android:layout_height="fill_parent" android:layout_width="fill_parent" android:id="@+id/tableRow1">
                <Button android:layout_height="fill_parent" android:text="+/-" android:onClick="onClickButton" android:layout_width="fill_parent" android:id="@+id/sign" android:layout_margin="5px" android:layout_weight="1" android:minWidth="60dip"></Button>
                <Button android:layout_height="fill_parent" android:text="7" android:onClick="onClickButton" android:layout_width="fill_parent" android:id="@+id/seven" android:layout_margin="5px" android:layout_weight="1" android:minWidth="60dip"></Button>
                <Button android:layout_height="fill_parent" android:text="8" android:onClick="onClickButton" android:layout_width="fill_parent" android:id="@+id/eight" android:layout_margin="5px" android:layout_weight="1" android:minWidth="60dip"></Button>
                <Button android:layout_height="fill_parent" android:text="9" android:onClick="onClickButton" android:layout_width="fill_parent" android:id="@+id/nine" android:layout_margin="5px" android:layout_weight="1" android:minWidth="60dip"></Button>
                <Button android:layout_height="fill_parent" android:text="歎" android:onClick="onClickButton" android:layout_width="fill_parent" android:id="@+id/divide" android:layout_margin="5px" android:layout_weight="1" android:minWidth="60dip"></Button>
            </TableRow>
            <TableRow android:layout_weight="1" android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/tableRow2">
                <Button android:layout_height="fill_parent" android:text="C" android:onClick="onClickButton" android:layout_width="fill_parent" android:id="@+id/clear" android:layout_margin="5px" android:layout_weight="1"></Button>
                <Button android:layout_height="fill_parent" android:text="4" android:onClick="onClickButton" android:layout_width="fill_parent" android:id="@+id/four" android:layout_margin="5px" android:layout_weight="1"></Button>
                <Button android:layout_height="fill_parent" android:text="5" android:onClick="onClickButton" android:layout_width="fill_parent" android:id="@+id/five" android:layout_margin="5px" android:layout_weight="1"></Button>
                <Button android:layout_height="fill_parent" android:text="6" android:onClick="onClickButton" android:layout_width="fill_parent" android:id="@+id/six" android:layout_margin="5px" android:layout_weight="1"></Button>
                <Button android:layout_height="fill_parent" android:text="x" android:onClick="onClickButton" android:layout_width="fill_parent" android:id="@+id/times" android:layout_margin="5px" android:layout_weight="1"></Button>
            </TableRow>
            <TableRow android:layout_weight="1" android:layout_height="fill_parent" android:layout_width="fill_parent" android:id="@+id/tableRow3">
                <Button android:layout_height="fill_parent" android:text="AC" android:onClick="onClickButton" android:layout_width="fill_parent" android:id="@+id/allclear" android:layout_margin="5px" android:layout_weight="1"></Button>
                <Button android:layout_height="fill_parent" android:text="1" android:onClick="onClickButton" android:layout_width="fill_parent" android:id="@+id/one" android:layout_margin="5px" android:layout_weight="1"></Button>
                <Button android:layout_height="fill_parent" android:text="2" android:onClick="onClickButton" android:layout_width="wrap_content" android:id="@+id/two" android:layout_margin="5px" android:layout_weight="1"></Button>
                <Button android:layout_height="fill_parent" android:text="3" android:onClick="onClickButton" android:layout_width="wrap_content" android:id="@+id/three" android:layout_margin="5px" android:layout_weight="1"></Button>
                <Button android:layout_height="fill_parent" android:text="-" android:onClick="onClickButton" android:layout_width="wrap_content" android:id="@+id/minus" android:layout_margin="5px" android:layout_weight="1"></Button>
            </TableRow>
            <TableRow android:layout_weight="1" android:layout_height="fill_parent" android:layout_width="wrap_content" android:id="@+id/tableRow4">
                <Button android:layout_height="fill_parent" android:text="0" android:onClick="onClickButton" android:layout_width="fill_parent" android:id="@+id/zero" android:layout_margin="5px" android:layout_weight="1"></Button>
                <Button android:layout_height="fill_parent" android:text="00" android:onClick="onClickButton" android:layout_width="fill_parent" android:id="@+id/doublezero" android:layout_margin="5px" android:layout_weight="1"></Button>
                <Button android:layout_height="fill_parent" android:text="." android:onClick="onClickButton" android:layout_width="fill_parent" android:id="@+id/comma" android:layout_margin="5px" android:layout_weight="1"></Button>
                <Button android:layout_height="fill_parent" android:text="=" android:onClick="onClickButton" android:layout_width="fill_parent" android:id="@+id/equal" android:layout_margin="5px" android:layout_weight="1"></Button>
                <Button android:layout_height="fill_parent" android:text="+" android:onClick="onClickButton" android:layout_width="fill_parent" android:id="@+id/plus" android:layout_margin="5px" android:layout_weight="1"></Button>
            </TableRow>
        </TableLayout>
    </LinearLayout>
</LinearLayout>

　各ボタンにはandroid:onClick="onClickButton"のようにonClick属性を追加してください。この指定をすることで、ボタンが押されたときにMainActivityクラスのonClickButtonメソッドが呼び出されます。

次のページ
電卓のベース処理を修正する

この記事は参考になりましたか？

印刷用を表示

ポスト

特集記事連載記事一覧: 【随時更新・まとめ読み】開発者のための「AWS re:Invent 2024」関連記事

開発者のための「WWDC 2024」関連発表まとめ

LeSSやSAFeなど、大規模アジャイルにおけるソフトウェア品質の課題とは？

もっと読む

この記事の著者: 金田浩明（カネダヒロアキ）

ソフトウェア開発者。分析・設計・実装なんでもあり。システム開発をしたり情報処理技術を研究したりスマートフォン開発したりと色々やっています。最近はiPhone,Andoridでの画像認識の仕事に没頭中。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事