arrow_back

テンキー(数字ボタン)を作る

「電卓といえばテンキー! そんなわけでアプリの画面に表示するテンキーを作るよ!」
「ここまで長かったけど——ようやくだね!」
「と言っても、テンキーは部品がたくさんあるから、 一度別のファイルに作っておいて取り込むという方法でいこう」
「たくさん部品があるって? テンキーなんだからボタンが十個あればいいんじゃないの?」
「ハルキ……0から9のボタンだけじゃなくてプラスとかマイナスとか、いろいろいるんだよ? それに今回はただボタンを並べれば良いってものじゃないから」
「んー、よくわかんないけど、ややこしいみたいだから杏ちゃんに任せるよ」
「あたしじゃなくて、ハルキがやるの!」
「えぇー」

新しいレイアウトファイルを作成

「まずは新しいレイアウトファイルを作るところからだよ。 Project Viewでapp/src/main/res/layout/を右クリックして、 表示されるメニューからLayout resource fileをクリック」
「はぁい」
「で、表示されるダイアログに次の通り入力する」
「新しいファイルが開いたよ!」
「ファイルが開いたら、次の通りレイアウトを作っていって。 Design Editorになっていたら、Text Editorに切り替えるんだよ」
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:stretchColumns="0,1,2,3">
    <TableRow
        style="?attr/actionBarStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >

        <Button
            android:id="@+id/button_7"
            style="?attr/buttonBarButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="7"
            />

        <Button
            android:id="@+id/button_8"
            style="?attr/buttonBarButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="8"
            />

        <Button
            android:id="@+id/button_9"
            style="?attr/buttonBarButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="9"
            />

        <Button
            android:id="@+id/button_divide"
            style="?attr/buttonBarButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="÷"
            />

    </TableRow>

    <TableRow
        style="?attr/actionBarStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >

        <Button
            android:id="@+id/button_4"
            style="?attr/buttonBarButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="4"
            />

        <Button
            android:id="@+id/button_5"
            style="?attr/buttonBarButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="5"
            />

        <Button
            android:id="@+id/button_6"
            style="?attr/buttonBarButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="6"
            />

        <Button
            android:id="@+id/button_multiply"
            style="?attr/buttonBarButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="×"
            />

    </TableRow>

    <TableRow
        style="?attr/actionBarStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >

        <Button
            android:id="@+id/button_1"
            style="?attr/buttonBarButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1"
            />

        <Button
            android:id="@+id/button_2"
            style="?attr/buttonBarButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2"
            />

        <Button
            android:id="@+id/button_3"
            style="?attr/buttonBarButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="3"
            />

        <Button
            android:id="@+id/button_subtract"
            style="?attr/buttonBarButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="-"
            />

    </TableRow>

    <TableRow
        style="?attr/actionBarStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >

        <Button
            android:id="@+id/button_dot"
            style="?attr/buttonBarButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="."
            />

        <Button
            android:id="@+id/button_0"
            style="?attr/buttonBarButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="0"
            />

        <Button
            android:id="@+id/button_equal"
            style="?attr/buttonBarButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="="
            />

        <Button
            android:id="@+id/button_add"
            style="?attr/buttonBarButtonStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="+"
            />
    </TableRow>
</TableLayout>
「長っ! なにこれ杏ちゃん!」
「なにって、テンキーのレイアウトだよ。あ、ぜんぶを手で入力する必要はないよ。 このレイアウトの構造はテーブル構造になってるから」
7 8 9 ÷
4 5 6 ×
1 2 3 -
. 0 = +
「上から、|7|8|9|÷| の四つが並んで、その下に|4|5|6|×| が並んでる。 ボタンの表示内容は違うけど、構造はそのもの繰り返しだよ。 だから、まずはボタン1つ分をきちんと書く」
<Button
    android:id="@+id/button_id"
    style="?attr/buttonBarButtonStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text=""
    />
「これなら書けそう。あ、"style"って行は初めて出てきたね」
「それはボタンの見た目を決めるところ。 こうやって画面の部品にスタイルを指定すると、見た目をいろいろ変えられるんだよ」
「それができたらTableRowを作って、一行に四つ、配置していく」
<TableRow
    style="?attr/actionBarStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <Button
        android:id="@+id/button_id"
        style="?attr/buttonBarButtonStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=""
        />

        <!-- Buttonをあと3つ並べる -->

</TableRow>
「idのところでなにか怒られるんだけど……」
「レイアウトファイルの中に同じidがあるからね。あとで書き換えるから今はエラーがあっても無視して。 で、書けたらさらに、ひとまとまりのTableRowを四つ配置する」
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:stretchColumns="0,1,2,3">
    <TableRow
        style="?attr/actionBarStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >

        <!-- Buttonを4つ並べる -->

    </TableRow>

    <!-- TableRowをあと3つ並べる -->

</TableLayout>
「おおー! あっという間にできちゃった!」
「あとは下のタブからDesign Editorに切り替えてみよう。 プレビューできちんと4×4になっていることを確認したら、ボタンを一個ずつ選んで文字を入力していく」
「あれ、キーボード押しても、なにもならないよ?」
「右側のPropertiesに表示されてる中からtextという項目を探して、 そこに書いていけばいいよ。 あと一つ注意。数字は必ず半角で入力すること。ここに書く数字はあとで意味があるから全角で書いたらだめだよ!」
7 8 9 ÷
4 5 6 ×
1 2 3 -
. 0 = +
「これは楽ちんだね!」
「ああ、idの方も書き換えるのを忘れないでね。Propertiesにあるからね」
button_7 button_8 button_9 button_divide
button_4 button_5 button_6 button_multiply
button_1 button_2 button_3 button_subtract
button_dot button_0 button_equal button_add

ten_key.xmlをmain_activity.xmlに割り当てる

「ten_key.xmlが書き終わったら、今度はmain_activity.xmlを開いてincludeを追加して。 layoutには@layout/ten_keyを指定する。 あ、Buttonも少し書き換わってるから注意するんだよ」
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                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=".MainActivity">

    <!-- 省略 -->

    <Button
        android:id="@+id/button"
        style="?attr/buttonBarButtonStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/edittext"
        android:text="CLEAR"/>

    <include
        layout="@layout/ten_key"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/button"
        />
</RelativeLayout>
「これで、さっきのファイルの内容がここに入るの?」
「気になるならDesign Editorに切り替えて見てごらんよ」
「あ、ちゃんと見えてる! やっぱりDesign Editorの方がいいなぁ。 ねぇ、こっちだけ使って画面って作れないのかな?」
「まだちょっと難しいと思うよ……ちょっと複雑なことをするとすぐにプレビューが出なくなるし」
「ざんねーん……」
「繰り返しになるけど、最後の調整はXML側でやることの方が多いからね……今後もっともっと便利になって いつかはXMLを直接編集しなくても良くなるかもしれないけど……まだちょっと先かも」
「ちゃんと表示されたよ!」
「ところで杏ちゃん。このincludeに使った"@"ってidの時にも部品の配置を決めるときにも出てきたけど、特別な意味があるの?」
「そうだよ。ここでいう@は、他の要素への参照って意味になる。 @layout/ten_keyとか@id/textviewとか、別の所にあるそれを指し示すという意味で@は使われるね」
「あ、Java言語の変数みたいなものなんだね」
「変数名を通じて値を『参照する』という意味では、ハルキの言うとおり。 なかなかわかってきたね!」
「うん……私、なんか筋がいいかも。近いうちにAndroidアプリを極められそうな気がしてきた!」
「そうやってすぐに調子に乗るんだから……」
最終更新日: 2015/09/03