はじめに
こんにちは。今回は、Androidアプリ開発の勉強会にて制作したアプリの1つを紹介します。
AndroidStudioを使用したことがない情報系の学生を対象として行っています。
使用言語は、Kotlinです。
※途中で飽きてくると日本語が適当になりますがあしからず
この記事の内容
- 今回作るものについての説明
- レイアウトを作る
- アクティビティを作る
- まとめ
今回作るものについての説明
今回は、カウントアプリを制作していきます。ボタンを押すと数字が増えたり、減ったりする単純なアプリです。
ボタンの説明
| ボタン | 動作 |
|---|---|
| PLUS | 数字を１追加する |
| MINUS | 数字を１減らす |
| CLEAR | 数字をリセットする（０にする） |
レイアウトをつくる
説明の簡略化のため、今回最終的にCodeを載せる形になりますが、制作する際はDesign画面で作業することを推奨します。
作業するファイルは、もちろんxmlファイルです。
部品を放り投げる
Paletteから必要なものをComponent Treeに突っ込みましょう。
今回は、TextViewが1つ、Buttonが3つです。idやtext、textSizeは以下のようになります。ButtonのtextSizeは特に指定していません。
AndroidStudioにおけるidの命名規則では、最初は小文字で単語が変わるときに先頭の文字を大文字にします。
| id | text | textSize |
|---|---|---|
| numberText | 0 | 120sp |
| plusButton | PLUS | - |
| minusButton | MINUS | - |
| clearButton | CLEAR | - |
場所を固定する１
好きな場所にButtonなどを置いたとしても、場所を固定していなければ白紙の上に糊付けせずにおいた色紙が持ち上げた時に地面に落ちてしまうように、エミュレイター上でも配置した位置に表示されません。
Component Treeを見てわかるように、Buttonなどの部品はConstraintLayoutの中にあります。ConstrainLayoutには制約というものがあり、縦横それぞれに1つずつ以上指定をしなければ位置を固定することができずに、基準である左上に部品が集まってしまいます。
場所を固定する２
それでは実際に固定していきましょう。
それぞれをクリックした時に上下左右に表示される白丸を端や他の部品につなげることで固定することができます。
今回は、ボタンが綺麗に配置されるように一番下の位置に配置するCLEARボタンから指定していきましょう。
CLEARボタン
上を除く三箇所をそれぞれ端につなげます。この時、右側のAttributes上にConstraint Widgetが表示されるので、それぞれの値を16に指定しましょう。また、layout_widthも0dpに変えましょう。
Constraint Widgetで指定した値は、つなげたものからの距離を表します。
layout_widthを０dpに変えることは、制約の中でいっぱいに広げることを意味します。
PlUS・MINUSボタン
PLUSボタンとMINUSボタンについても制約をしていきましょう。CLEARボタンと同様につなげていきますが、下方向については、下方向にあるボタンに対してつなげていきます。MINUSボタンの場合はCLEARボタン。PLUSボタンの場合はMINUSボタンです。
Constraint Widgetについては、左右を１6、下を8にしましょう。
layout_widthは0dpです。
ButtonText
ButtonTextについては少し特別です。
４方向に対して制約を行っていきます。下方向 についてはPLUSボタンで、他はそれぞれの方向の端につなげます。
Constraint Widgetでは全ての値を0にします。するとどうでしょうか、ボタン上の空白の中央に0が配置されているのがわかりますか？
紐を４本取り付けた棒に対して、同じ力で４方向から紐を引っ張った時に棒が中央にくるように、ButtonTextも中央に配置することができました。
レイアウトの完成
これでレイアウトは完成です！お疲れ様です。
最後にコードを貼っておきます。
<?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:id="@+id/numberText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:textSize="120sp"
app:layout_constraintBottom_toTopOf="@+id/plusButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/plusButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="8dp"
android:backgroundTint="#E91E63"
android:text="PLUS"
app:layout_constraintBottom_toTopOf="@+id/minusButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="@+id/minusButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="8dp"
android:backgroundTint="#2196F3"
android:text="MINUS"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="@+id/clearButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:visibility="visible" />
<Button
android:id="@+id/clearButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:backgroundTint="#68595757"
android:text="CLEAR"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
アクティビティを作る
見た目に当たるレイアウトについては作りましたが、これではクリックしても何も起こらないのでktファイルにコードを書いていきましょう。今回は、override fun onCreate内にコードを書いていきます。
idをもとにktファイル上に呼び出す
まず前提として、先ほどレイアウトを作ったxmlファイルと今回コードを書いていくktファイルは別々のフォルダー上にある別のファイルです。そのため、xmlファイル上にあるからといってktファイルで同じidで動かすことができるかというとそれは間違いです。
ktファイル上では、まずxmlで指定したidをもとに部品を探すところから始まります。見つけるためにこのようなコードを書きます。
val numberText: TextView = findViewById(R.id.numberText)
細かいところは省きますが、ktファイル上で改めて変数を用意し、findViewById()を用いて呼び出してきます。()の中身は、Resフォルダ上にあるid名numberTextみたいな感じの認識でOKだと思います。（多分…）
変数名の後ろにある。TextViewは、呼び出すものがButtonである場合は、Buttonになります。
import内にButtonに関するものが書かれていないため赤く表示されますが、
- Windows
- alt + Enter
- Mac
- option + Enter
idを呼び出そう
とりあえず、4つの部品を呼び出しましょう！それぞれの変数名は、id名と同じで大丈夫です。
val numberText: TextView = findViewById(R.id.numberText)
val plusButton: Button = findViewById(R.id.plusButton)
val minusButton: Button = findViewById(R.id.minusButton)
val clearButton: Button = findViewById(R.id.clearButton)
変数を用意する
今回は数字を増やしたり減らしたりするアプリなので、ボタンを押したときに数字が変更されるようにしなければいけません。そのための変数を用意しましょう。
var num: Int = 0
ここらで一度確認を
変数を用意するときに、先頭にvarまたはvalを書きましたが、違いが何かわかりますか？意味はこのようになっています。
- var = 再代入可能な変数
- val = 再代入不可能な変数
と思った人もいると思います。私も思いました。
よく考えると代入したものは部品という箱なので、中身が変わろうが何しようが再代入を行ったことにはならないのです。
ボタンを押した後の処理をかく
ボタンを押した後の処理をそれぞれに書いていきます。2つほど知っていますが、今回はそのうちの1つを用いて行います。
今回は、setOnClickListenerを用いて行います。
PlUSボタン
やることはシンプル。nに１足したものをnumberTextに反映させるだけ！
numberTextのtext内容を変えるためにはこのように書きます。
numberText.text = num.toString()
numberTextそのものを変えるのではなくtext内容を変えるだけなのでこのように書きます。また、numはInt型なのでtoString()を用いることでString型に変えることができます。
なので、このようになります。
plusButton.setOnClickListener {
num += 1
numberText.text = num.toString()
}
MINUS・CLEARボタン
MINUS・CLEARボタンについてもPLUSボタンと同様に書くことができます。
なので、このようになります。
minusButton.setOnClickListener {
num -= 1
numberText.text = num.toString()
}
clearButton.setOnClickListener {
num = 0
numberText.text = num.toString()
}
これでアクティビティも完成しました！
まとめ
お疲れ様でした。
今回は数字が増えたり減ったりするといったとてもシンプルなものを作りました。
if文を使って指定の数字の色を変えたり、ボタンを増やしてひたすら２倍にしていくものを作っても面白いと思います。ぜひアレンジしてみてください。
慣れないことをしたせいでとても疲れたので今回はここまでです。
コメントで追加した機能などを教えていただけると嬉しいです。
Androidアプリ開発を楽しみましょう〜(_ _).｡o○