Androidで初めてのアプリを作成する　～公式ドキュメント～

はじめに

今回は、公式ドキュメントの～初めてのアプリを作成する～を参考にしながら、簡単なアプリを作っていきます。

概要

まずは、このページから読んでいきます。日本語が充実していてありがたい...！

ざっくりと、

・ユーザーがアプリのアイコンをタップすると、メインのアクティビティが起動する

・ブロードキャストレシーバ、サービスを使うとバックグラウンドタスクが実行できる

・レスポンシブ対応

・Android端末にカメラなどの特定のハードウェアがあるかどうかなどを上手くやれる

ここを読み込んでも実装方法は全く分からないし、何度でも読み返しに戻ってこれるので、さっと読んだら次に行きましょう。

Androidプロジェクトの作成

次は、Androidプロジェクトの作成です。このnoteでも既に取り組んだ内容なので半分カット。

重要なファイルのみ説明があります。

・app > java > [任意のパッケージ名] > MainActivity

先ほども話にでましたが、アイコンをタップしてアプリを起動すると、このファイルに書かれているUIが読み込まれるようです。

※少し余談
funはfunctionのfunでしょうか。functionで見慣れているので、funがなんのことかすぐに分からなかった(汗)。
funの前にoverrideがついてることからも、onCreateはライフサイクルメソッドなのではと思います。
AppCompatActivityというクラスを継承しているようです。少し中を覗いてみると、onCreateの他にも、onPostCreate、onStart、onStopなどなど見当たりますね。ここでは深く追求しませんが、いずれ触れていくと思います。
Dartと似ているので、色々推測できるのが楽しいです。これも新しい技術を覚える際の一つの醍醐味でしょうか。他技術の経験がキャッチアップに活きてくるのも成長を感じる瞬間ですね。

重要なファイルの説明の続きからです。

・app > res > layout > activity_main.xml

なにこれ凄い Σ（・□・；）！まさかのUIベース！初体験！

適当にいじってみると・・・

変わっている！新鮮ですね！

このファイルでは、UIのレイアウトを定義できます。ここで定義したレイアウトは、MainActivity内のonCreateメソッド内の、

setContentView(R.layout.activity_main)

この部分でactivity_mainという名前のxmlファイルを呼んでいるのだと思います。

・app > manifests > AndroidManifest.xml

マニフェストファイルと呼ばれていて、アプリの基本的な特徴を記述したり、各コンポーネントを定義できる、ようです。

先ほどから登場しているMainActivityも、

<activity android:name=".MainActivity" >
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />

               <category android:name="android.intent.category.LAUNCHER" />
           </intent-filter>
</activity>

この部分から呼ばれていると思われます。

・Gradle Scripts > build.gradle

Project用のbuild.gradleと、Module用のbuild.gradleの2つがあります。
このファイルには、ビルドについての設定を記述します。

アプリを実行する

次は、アプリの実行をします。
Android端末を所持している方は、こちらの設定を。
所持していない方は、こちらの設定を。

簡単なユーザーインターフェースを作成する

次は、実際にUIを作っていきます。
Android Studio Layout Editorというものを使っていきます。
さっき私が驚いていた、UIベースのアレのことみたいです。

こちらの手順に沿って進めます。

Android Studio上のスペースをふんだんに使います。

画像の左下のDesign, Textタブの内、Textタブを選択するとソースも見れるようです。

画像はDesignタブの中身です。
左上の青い四角（Select Design Surface）から、Blueprintを選択。
そのすぐ下の、目のアイコンから、Show All Constraintsを選択。

続いて、テキストボックスを追加します。

ここの4の説明で、デザイン エディタでビューってどこだ？って感じですが、

設置したeditTextをクリックすると、この画像のように4つの丸と4つの四角が表示されます。
四角をいじるとeditTextのサイズ変更ができます。
丸をいじると矢印と曲線みたいなものが出てくるので、それを画面にでている実線（editTextが所属するConstraintLayoutの端）までドラッグすると、

ConstraintLayoutに沿った配置ができるよ、という説明です。
そして、ConstraintLayoutの上端とeditTextの間にある16ピクセルは、ここの手順で設定したDefault Marginsの16ピクセルです。

さらに、この地点で、このページを見て1番初めに出てきた、

Android アプリのユーザー インターフェースは、レイアウト（ViewGroup オブジェクト）とウィジェット（View オブジェクト）の階層を使用して作成されます。レイアウトは、その子ビューが画面にどのように配置されるかを制御するコンテナです。ウィジェットは、ボタンやテキスト ボックスなどの UI コンポーネントです。

という説明が、今のConstraintLayoutとeditTextの関係性を説明しているのだとピーンと来ると思います。

続いて、ボタンを追加していきます。

また4番のBaseline Constraintってどこだ？って感じなのですが、macだとすんなり見つかるのかもしれませんが、windowsでは見つけるのに少し時間がかかりました。

Buttonを右クリックしたときに表示される、Show Baselineをクリックするとbaselineが表示されるので、そのbaselineをドラッグして、editTextのbaselineに合わせましょう。

続いて、UI文字列を変更します。

文字列リソースファイルでアプリのUIで使う文字列をまとめて管理して、UI文字列の更新や国際化などで、負債を抱えない仕組みが整っているようです。

続いて、テキストボックスのサイズを柔軟にします。

公式ドキュメントのBlueprintの仕上がりとは若干違っているように見えますが、

端末のサイズを変更しても、ちゃんとeditTextの水平に伸びる横幅以外のmarginなどの点が守られているので、大丈夫かと思います。

ちゃんとレスポンシブに対応できているか、すぐに確認できるのもいいですね。

別のアクティビティを開始する

ここまでで出来上がったテキストフォームと送信ボタンを使って、次は、実際のアプリのように送信ボタンを押したときに別のページに遷移し、そのページ内で、テキストフォームに入力した内容を表示させる、という要件を実装していきます。少し難易度が上がってきました。

ここを参考にしていきます。

まずは、送信ボタンをタップした時に呼び出されるメソッドを実装していきます。

MainActivityにメソッドを追加

class MainActivity : AppCompatActivity() {

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
   }

   // Sendボタンを押したときに実行する
   fun sendMessage(view: View) {
       
   }
}

activity_main.xmlから、SendボタンのonClickプロパティにsendMessageメソッドを付与

ここで違和感が発生。
sendMessageメソッドにview: Viewという引数を取るように定義したのに、ここでは特に引数など与えていないように見えます。

これについては、ドキュメントでもしっかり触れられていますが、
View（今はButton）のonClickプロパティに与えるメソッドは、以下の3つの条件を満たす必要があります。

・publicアクセス
Kotlinの場合、さきほどの

fun sendMessage(view: View) {

}

のように、funの前に何もつけないとpublic扱いになります。詳しくはこちらにありますが、今は追求しません。

・返り値がvoid
・View型の引数のみを持つ
引数のViewには、onClickプロパティを与えたViewオブジェクト（今はSendボタン）が与えられます。

onClickプロパティのほかにも、Viewオブジェクトの様々なプロパティにそれぞれルールを設けて、Viewオブジェクト周りの実装をやりやすくしているようです。

次に、インテントを追加します。

この部分の説明だけを読んで頭を抱えていても仕方がないので、ざっくりとだけまとめて次に行きましょう。

次に、Intentで指定したDisplayMessageActivityというアクティビティを実装していきます。

Android Studioの機能を使って、アクティビティを追加することで、アクティビティの追加に必要な処理を自動で行ってくれます。

次に、DisplayMessageActivityのUIを作っていきます。

画像左上の、磁石のアイコンをクリックして有効にするのを忘れずに。

次は、いよいよMainActivityからDisplayMessageActivityに渡したメッセージを表示させます。

val message = intent.getStringExtra(EXTRA_MESSAGE)

Intentを介して、MainActivityから渡されるメッセージを受け取り、

val textView = findViewById<TextView>(R.id.textView).apply {
    text = message
}

受け取ったメッセージをViewのTextViewウィジェットに渡して、表示させています。

後は、親切に戻るボタンを実装します。

マニフェストファイルのDisplayMessageActivityのタグに、

android:parentActivityName=".MainActivity"

を付け加えるだけで、MainActivityに戻るボタンができます。

[※Minimum API levelを15以下に設定した場合のみ]
DisplayMessageActivityタグの中に、

<meta-data
     android:name="android.support.PARENT_ACTIVITY"
     android:value=".MainActivity" />

を追加してください。

おわり

長かったですが、以上でドキュメントの～初めてのアプリを作成する～は終了です！

最後の項目の [別のアクティビティを開始する] セクションでは、所々把握しきれない部分がありましたが、Android開発は始まったばかりなので、これから徐々に理解できていくと思います。

Androiderの方、色々とコメント頂けると嬉しいです。

続きは、公式ドキュメントの
・アプリの基礎
・デバイスの適合性の概要
の2つになります！

それでは、お疲れ様でした！

GitHub
https://github.com/KazuyoshiHidaka