今回は、簡単な計算を行うアプリを作成しようと思います。
前回は、入力部品を作成しましたのでここに入力した数字を計算して、計算結果を表示するプログラムを作成します。

計算アプリを作る

今までは、プログラムというほどのものは触りませんでした。XMLのプロパティをいじっただけです。「Javaじゃねぇーだろ？」と思った方もいると思います。
しかし、XMLはJavaアプリケーションを作成するときによく出てくるので触っておいて損はありません。
XMLに慣れておけば、大体のフレームワークに対峙しても、立ち向かうことができるでしょう。。。

設計をする

アプリケーションを作るときに、はじめに「設計」を行います、これをやらないと。。。例えるならば

料理を作っているときに、塩加減を間違えたまま作ってしまう。

作ろうとしたものと違うものができてしまう

うんコードができてしまう

上記のような事態に陥る可能性が高くなります。熟練のプログラマーでも、ある程度の規模のアプリになれば、必ず設計をしなくては「うんコード」ができてしまいます(笑)

今回の設計

テキストボックスを２つ作ります。。。
早い話が、下のように画面を作ります。サンプル動画もつけています。

下のような、イメージです。

ここのAとBに値を入力して「TextView」の部分に計算結果を表示するという設計にしようと思います。

まぁ、このレベルならば「設計なんて。。。」と思うかもしれませんが、このレベルから始めれば理解もできるし、理解できれば応用もできます。

なんとかできた

とりあえず動くレベルですが。。。

まぁこんな感じです。ひどいもんです。。。

とりあえずは、入力部品の作成と配置のみでいっぱいいっぱいなので今回はここまでにします。

でわでわ。。。

<<< 前回 次回 >>>

前回は、表示した文字(TextView)を変更する実装をやりました。今回は、テキストボックス(入力部品)を画面に追加する方法を学びます。

余談

Android Studioを立ち上げてLayoutEditorを開いてみると、黒くなっている時があります。
これは、リビルドすると治りました。

TextView

前回までの実装では下のようになっています。

これにテキストボックス(EditText)を追加します。

上記のリンク先にサンプルコード(XML)があるのでそいつをコピーしてきます。

<EditText
     android:id="@+id/plain_text_input"
     android:layout_height="wrap_content"
     android:layout_width="match_parent"
     android:inputType="text"/>

そして、すでに実装しているTextViewの下にコードを追記します。

参考にするサイトはAndroidデベロッパのガイドです。
ここにはLayoutEditorの開き方が載っていて、とてもわかりやすいです。

しかし、エラーが出ました。「This view is not Constrained ...」という内容でした。

結局のところは「レイアウトのポジション指定をしないと変な場所にコンポーネント(画面の部品)が表示されます。」という内容のエラーでした。
そんなわけで、ポジションを指定します。

<EditText
    android:id="@+id/editText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ems="10"
    android:inputType="textPersonName"
    android:text="Name"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    tools:layout_editor_absoluteX="222dp"
    tools:layout_editor_absoluteY="684dp" />

これでエラーは解消できましたが、指定したポジションがおかしいので、左下に移動してしまいました。

なので、これを適当な場所に移動します。今回は、はじめに表示した「プログラミングで遊ぼう！」の文言の下に配置したいので、こちら(まとめ)かこちら(AndroidDeveloppers)を参考にXMLにコードを追加します。

            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="@+id/textView"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"

ポイントとしては、上下左右のポジションが確定するようにプロパティを指定してやらないとエラー(警告？)がAndroid Studioから出されます。

これでとりあえずは、以下のように表示できました。

動かしてみた動画は下です。

でわでわ。。。

<<< 前回 次回 >>>

サイトマップ

前回は、Hello Worldの文字列を変更して「プログラミングで遊ぼう！」に変更しました。

しかし、表示している文言が小さすぎて読みづらいです。なのでそれを変更しようと思います。
そして、入力部品の追加も行います。

文字の大きさを変える

ちなみに、前回作成したプログラムは下のようなwarning(注意)が出ています。

ファイルに追加する

今回修正するファイルはstrings.xmlです。

下のように修正します。

<resources>
    <string name="app_name">My First App</string>
    <string name="hello">プログラミングで遊ぼう!</string>
</resources>

細かいところはおいおい理解していくのでとりあえず書いておくというところで。。。

次に、activity_main.xmlファイルを編集します。下のようにcode>android:text="@string/hello"

しかし、ビルドエラーが出ます。(赤い文字列がそうです)これは、strings.xmlに追加したプロパティ(タグ)が読み込まれていないためです。

<TextView
         android:id="@+id/textView"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="@string/hello"
         android:textSize="30dp"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintLeft_toLeftOf="parent"
         app:layout_constraintRight_toRightOf="parent"
         app:layout_constraintTop_toTopOf="parent" />

<<< 前回 次回 >>>

サイトマップ

Javaと言うプログラミング言語があります。
これは、いろんな場所で使用されています。もちろん他にもいろんな言語があり、いろんな場所で使用されています。

しかし、その中でもJavaをすヽめるのにはわけがあります。
それは、習得難易度とライブラリの多さ、実装可能な範囲の大きさが理由です。
早い話が大体のことはできると言うことです。

プログラミング言語って？

プログラミング言語は高レベルな言語(簡単に使える〜低レベルな言語(使うのが難しい)があります。
低レベルなものの中で、有名なのは「C言語」です。
それに対し、高レベルなもの(言語)は「Python」が有名です、他にもScratchなどのようなブロックプログラミング言語があります。

高レベルなものは、(低レベルなものに比べ)簡単にものを作れます。習得するのも(低レベルなものに比べ)簡単です、有名なものとしてはWordPressとか、JavaScriptが代表例です。フレームワーク化して難しくなっているものもありますが(笑)プログラム言語自体は、難しくありません。

低レベルなものは、作るのが大変だけど、ほぼ大体のことができます。有名な人工知能も土台はC言語（C++）でできています。

スマホアプリ作成でJavaを習得

今回のメインになります。今まで上げたようなプログラミング言語の中で「高レベル」な部分と「低レベル」な部分を両方持っているのがこのプログラミング言語です。
具体的には、今回作成しようとしているAndroidアプリのように「フレームワーク」を使用してやれば簡単にできるものですが、深く作っていこうとするとだんだん難しくなっていくものです。
なんでもそうですが、Java言語に関してはこの言語の中だけでかなり深いところまでいけます。
母体がC言語なので。。。

まずは、サンプルプログラムを動かしてみましょう。

プログラミングの学習は、まずは「真似から」入ります。このことを「写経」と呼ぶ人もいます。※自分がそのうちの一人です。

そして、そのコードを動かします。最後にどんなことをしているか理解します。

理解のレベルは表面的なところから、どんどん深くしていく形です。プログラミングスキルが高いほど深い部分まで理解できます。

まとめると下のようになります。

1. コードを書き写す(写経する)
2. プログラムを動かす
3. 動かしたコードを理解する

初めのうちは「動いた！」と言う感動を味わってほしいと思います。

スマホアプリを作成する

前回は、ハローワールドをAndroidでやりました。
エミュレータを使用して起動したのでちょっと重いです。しかし、Android端末を持っているのであれば、そちらにインストールすることができるので重くありません。

前回作成したものは、AndroidStudioが作成(生成)してくれたので何もしていません。

ソースを見てみよう

前回作成したのは「MyFirstApp」と言うプロジェクトに作成(自動生成)されたアプリケーションです。

下のように、色々あって混乱しがちですが、まずは見るところがわかればオッケーです。
ズバリ、下のイメージにあるように「MainActivity.java」を見ます。

コードは下のようになっています。

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

Androidフレームワーク

上記のような名前があるのかどうかが怪しいですが、Androidアプリの作成時に下のようなメソッドをオーバーライドして実装します。

Androidアプリは実装するためのフレームワークがあり、そのフレームワークに関してはGoogleのドキュメントを見ればわかります。そして、下のような特徴があります。

1. Gradle ベースの柔軟なビルドシステム
2. 豊富な機能を備えた高速なエミュレータ
3. あらゆる Android デバイス向けの開発が可能な統合環境
4. Apply Changes を使用すると、アプリを再起動せずに実行中のアプリに対してコードやリソースの変更をプッシュできます。
5. アプリの共通機能の作成やサンプルコードのインポートに役立つコード テンプレートおよび GitHub との統合
6. 多彩なテストツールとフレームワーク
7. パフォーマンス、ユーザビリティ、バージョン互換性などの問題を検出する lint ツール
8. C++ と NDK のサポート
9. Google Cloud Messaging と App Engine の統合を容易にする、Google Cloud Platform の組み込みサポート

Androidアプリを作成するために使用するAndroid Studioは開発ツールです。

開発するときの基礎知識

Android Studioでサンプルアプリを作成すると下のようなフォルダー構成でプロジェクト(開発の単位になります)が作成されます。

＜フォルダ名: 説明＞

• manifests: AndroidManifest.xml ファイルがあります。
• java: JUnit テストコードを含む Java ソースコードのファイルがあります。
• res: XML レイアウト、UI 文字列、ビットマップ画像など、コード以外のすべてのリソースがあります。

そして画面の操作方法も記載されていました。

コードについて

まずは、このコードの他には目もくれず下の１行に着目してください。
setContentView(R.layout.activity_main);

そして、layout.activity_mainの部分をコピーして、AndroidStudioを開き、「Shift」を２回押して、プロジェクト内を検索します。

すると下のような画面が見れます。

この「activity_main.xml」を表示しているのです。ここにHello World」と書いてある部分があるので、見つけて見てください。

そして、「Hello World」を違う文言に修正して見ましょう。
例えば「Rock and Roll!」と表示させてみるのも良いのではないでしょうか？

ソースの修正〜実行したときの動画です。

レイアウトをいじったときの動画です。

まずは、はじめの２歩目というところでした。

でわでわ。。。

＜＜＜前回 次回＞＞＞

サイトマップ