【Android】画面の要素を作って操作する

前回の続き。

アプリの画面のことを「Activity」と呼ぶ。

xmlで画面の要素を定義して、名前を付けて、コントローラーから操作できるようにします。

EmptyActivityを作成

前回「作りまーす」で流してしまったところ。ここで「Package name」の入力を求められます。

Package nameは「ドメインをひっくり返したもの」を使えと書いてあります。例えば「hoge.example.com」というドメインを使う予定なら「com.example.hoge」にする、という具合。

ここは、最終的に公開するときに他者と被るとダメなやつなので、公開を目指しているアプリの場合は先にドメイン取っちゃうと良さそう。退路を断て。

xmlで画面の要素を定義

EmptyActivityを作成したので、デフォルトのパッケージ構成ができあがっている状態からスタート。

app > src > res > layout の中に activity_main.xmlができあがっているので、それを編集していきます。

<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   android:gravity="center"
   android:background="#fafbfc">
<!-- 略 -->
</LinearLayout>
 

一番最初に書いてあるこの部分が、htmlで言うところのbodyタグみたいな感じ。一番外側のハコ。’LinerLayout’は多分DIV見たいなイメージのやつ。

その中に要素を足していく感じ。

<EditText
   android:layout_width="0dp"
   android:layout_height="50dp"
   android:layout_weight="1"
   android:id="@+id/editText"
   android:hint="入力テキスト"
   ></EditText>
<Button
   android:layout_width="0dp"
   android:layout_height="50dp"
   android:layout_weight="1"
   android:onClick="getInput"
   android:text="保存"
   ></Button>

<TextView
   android:layout_width="wrap_content"
   android:layout_height="0dp"
   android:layout_weight="1"
   android:id="@+id/textView"
   android:text="表示テキスト"
   />

みたいな感じで配置していく。とりあえずテキスト入出力用のパーツ３種類。

android:id="@+id/textView" でidを指定しておくと後でプログラム側から操作できる。

高さとか幅とかの設定は、ひとまずサンプルから感じ取って欲しい。

AndroidStudio使えばコードヒント山盛り出してくれるので、ある程度のことはヒント読みながらやれば行ける。

コントローラーから要素を操作できるようにする

（先日お勉強したJavaをあまり活用できていないので、当面はKotlinではなくJavaで作っていきます）

app > src > main >java > com.example.hoge の中にある「MainActivity.java」が、さっき作った「activity_main.xml」のコントローラー。 

public class MainActivity extends AppCompatActivity {
}

がメインクラス。（activity_main.xmlのコントローラー）

onCreateメソッドをオーバーライドして処理を書くと、画面が起動したときにその処理が走る。

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       
       TextView textView = findViewById(R.id.textView);
       textView.setText("0");
   }

ってな感じで。

上２行が具体的に何をやっているのかはまだよくわかんないです。スーパークラスのonCreate呼んでー、ContentViewとやらをセットしている。

後は、画面のTextViewをid指定で取得して、表示するTextをセット。

とりあえずこれで画面に文字を出すところまで。