検索
記事内検索

Androidアプリ「ストップウォッチ」作成(Kotlin)前半

1.はじめに

今回はKotlinで簡易的なストップウォッチを作成していきます。
少しでも参考になれば嬉しいです。

作成はAndroid Studioを使っています。

2.新規プロジェクト

Android Studioを起動しましたら、まずはプロジェクトを作成しましょう。

左にある「file」から「New」、「New Project」を選んでください。

上記の画面が出てきましたら、「next」を押し、次の画面の Phone and Tablet欄から「API 26:Android 8.0(Oreo)」 を選択しましょう。その後設定を変更せずにnextを押してfinishまで行きましょう。

「MainActivity.kt」と「activity_main.xml」の2ファイルが開いた状態で始まります。

「MainActivity.kt」では、Kotlinを用いて設定や中身を作っていきます。

「activity_main.xml」では、画面のレイアウトをこちらで設定していきます。

3.レイアウト設定

まずは、画面レイアウトを作成しましょう。

コードでもレイアウト設定は出来ますが、ここではUIを用いてドラッグ&ドロップで設定していきます。

真ん中に位置している「activity_main.xml」をクリックしましょう。

「Hello World!」と表示されている箇所をクリックし、IDをtimeText、layout widthをwrap_content、layout heightを90dp、textを00:00:00、textSizeを60sp、layout_marginBottomを300dpに設定します。

xmlコードでは以下のようになります。

<TextView
android:layout_width=”wrap_content”
android:layout_height=”90dp”
android:text=”00:00:00″
app:layout_constraintBottom_toBottomOf=”parent”
app:layout_constraintLeft_toLeftOf=”parent”
app:layout_constraintRight_toRightOf=”parent”
android:id=”@+id/timeText” android:textSize=”60sp”
app:layout_constraintTop_toTopOf=”parent”
android:layout_marginBottom=”300dp”/>


次は、ボタン作成をします。

paletteのButtonをドラック&ドロップで画面上にもってきましょう。

持ってきたボタンをクリックし、IDをstart、layout widthを200dp、layout heightをwrap_content、textをstartに設定しましょう。

xmlコードでは以下のようになります。

<Button
android:text=”start”
android:layout_width=”200dp”
android:layout_height=”wrap_content”
android:id=”@+id/start” android:layout_marginTop=”30dp”
app:layout_constraintTop_toBottomOf=”@+id/timeText” android:textSize=”40sp”
app:layout_constraintStart_toStartOf=”parent” android:layout_marginStart=”50dp”
app:layout_constraintEnd_toEndOf=”parent” android:layout_marginEnd=”50dp”/>

同様にstop、resetボタンを作成しましょう。

基本的な設定はstartと同じになります。

xmlコードでは以下のようになります。

<Button
android:text=”stop”
android:layout_width=”200dp”
android:layout_height=”wrap_content”
android:id=”@+id/stop” android:layout_marginTop=”130dp”
app:layout_constraintTop_toBottomOf=”@+id/timeText” android:textSize=”40sp”
app:layout_constraintStart_toStartOf=”parent” android:layout_marginStart=”50dp”
app:layout_constraintEnd_toEndOf=”parent” android:layout_marginEnd=”50dp”/><Button
android:text=”reset”
android:layout_width=”200dp”
android:layout_height=”wrap_content”
android:id=”@+id/reset” android:layout_marginTop=”230dp”
app:layout_constraintTop_toBottomOf=”@+id/timeText” android:textSize=”40sp”
app:layout_constraintStart_toStartOf=”parent” android:layout_marginStart=”50dp”
app:layout_constraintEnd_toEndOf=”parent” android:layout_marginEnd=”50dp”/>

これでレイアウト完成です。

コード通りに入力すれば、以下のレイアウト画像と同じ画面になっているはずです。

4.内部処理設定

続きは後半へ

前半はこちら 4.内部処理設定 前半はレイアウトを設定してきました。 レイアウトの設定だけではボタンを押したり、計測ができない...
お問い合わせ

副収入サイト

暮らしをおトクにかえていく|ポイントインカム モッピー!お金がたまるポイントサイト アンケートモニター登録

シェアする

  • このエントリーをはてなブックマークに追加

フォローする