Java Android 2〜Androidアプリの見た目を作る〜

前回に引き続き、Androidアプリの作成をしていきます。前回はHello Worldを表示するプログラムを動かしました。実際にはコードを書いていません。自動で生成されたプログラムを動かしただけです。

ここから、色々といじりながらプログラムを作成していきます。

文言を変更する

今回は、起動したプログラムを変更して表示する文言を「Hello World」から別の文言「プログラミングで遊ぼう!」に変更しようと思います。

はじめのステップ

まずは、コードを眺めて見ます。これは前回もやったので割愛します。

次のステップ

次は、コードをさらっと理解します。根本的に理解するのはとても大変なので、と言うか「フレームワーク」に対する理解が必要になるので、後々に理解したいと思います。

はじめのステップで眺めたコードに関して、実際は下の部分だけです。

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

はじめのうちはsuper.onCreate(savedInstanceState)と言うのは『「おまじない」なんだな。。。』と思っておいてください。そして、そのような部分には触らないようにします。

そして、次の行にあるsetContentView(R.layout.activity_main);に着目して見ます。
この「setContentView」と言うのは親クラスのメソッドです。「親クラス」と言われても「?」となってしまいますが、これも「おまじない」と言うことにしておきます。
ちなみにクラスの継承など興味のある方はこちらを参照ください。

キーポイント

ズバリR.layout.activity_mainです。
早い話が、ここの部分を理解できればOK!と言うわけです(笑)。

R.layout.activity_main

このコードはAndroid特有のもので『「/latout/activity_main.xml」を読み込みますよ』と言う意味です。
『プログラム言語』なので、日本語に翻訳できます(笑)

AndroidStudioで「R.」と入力すると上のように使用できるコードの候補が一覧できます。

よく見てみると上から順に「drawable」「layout」「mipmap」と言うコードが候補としてあります。
これはresフォルダの構成を比較してみるとわかりやすいと思います。

「R」の(ドットの)下はフォルダ構成と同じになっています。これがフレームワークたるところで、ビルドした時、にここに(resフォルダ以下に)あるファイルを読み込んでいるようです(中身は見ていないので〜のようですと記載しました)。

表示文言を変更する

先ほどのR.layout.activity_mainを追いかけてみると、『「res/layout/activity_main.xml」が怪しい!』
と思う方もいるかもしれません。
ジャストミートです(笑)。ここのファイルに画面の表示を決める内容が記載されています。

activity_main.xml

下のような内容です。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

表示するイメージ(見た目)は下のようなものです。

文字が小さくて見づらいですが、「Hello World」と記載されています。
上のXMLファイルの内容から「Hello World」を探してみると。。。ちょっと大きな文字があります、ブログ記載時に大きくしました(笑)。

ここの文言を変更して「プログラミングで遊ぼう!」に変更します。プロパティの変更に関してはこちらを参考にどうぞ

変更し、実行した結果は上記の動画にしました。こんな感じです。ここからいろんな表示や操作を実装していきます。

でわでわ。。。