ユウの小屋

PCの更新内容やSLPでの活動、開発したもの等をupしていきます

簡単なAndroidアプリの開発

はじめに

この記事は、SLP KBIT Advent Calendar 2015の19日目です。

今年9月、私はインターンシップに行き、そこで初めてAndroidアプリを開発しました。

その後、Twitterアプリ開発や某講義の課題など、色々とアプリを開発しています。

ところで、SLP内では、「Androidアプリを開発してます!」という人が、それほど多くないような気がします。

そこで、この記事では、簡単なAndroidアプリの開発手順を説明していき、少しでも興味を持ってもらいたいと思います。

 

開発環境

Android Studio 1.5

JDK 1.8.0_66

Android 5.0.2 (デバッグ用)

 

プロジェクトの作成

まず、アプリ開発のためのプロジェクトを作成します。

ここでアプリ名、対応するAndroidのバージョン、作成するテンプレートを決定します。

対応するAndroidのバージョンは、Android 4.0.3を最小とします。

これにより、現在Google Play Storeにアクセスしているデバイスのうち、94%がこれから作成するアプリを利用できます。

f:id:Yuu-glassdog:20151219134048p:plain

テンプレートの中にはGoogleマップやログイン画面もありますが、今回は空のテンプレートを使用します。

f:id:Yuu-glassdog:20151219133650p:plain

 

Viewの作成

Androidアプリの基本構造は、ViewとActivityから成ります。

Viewはアプリで使用するボタンなどの部品と、そのレイアウトの情報です。

ここで、使用する部品を決め、配置する場所を設定します。

Activityはアプリで表示される画面です。ここにViewを配置し、画面を表示します。

また、ボタンを押した際の処理など、アプリの挙動もここで記述します。

 

まず、Viewから作成します。

各部品は、左のpaletteからドラッグアンドドロップで設置します。

部品を設置すると、そのコードが自動でファイルに記述されます。

表示やサイズを変更したい場合は、コードを編集するか、右のPropertiesを変更します。

f:id:Yuu-glassdog:20151219141301p:plain

作成したファイル activity_main.xml の内容は、以下の通りです。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.splitcost.MainActivity" >

<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="31dp" >

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/Money"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge" />

<EditText
android:id="@+id/etxtMoney"
android:layout_width="170dp"
android:layout_height="wrap_content"
android:inputType="number"
android:maxLength="9" />

<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/yen"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>

<LinearLayout
android:id="@+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/linearLayout1"
android:layout_alignParentTop="true" >

<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/numPeople"
android:textAppearance="?android:attr/textAppearanceLarge" />

<EditText
android:id="@+id/etxtNum"
android:layout_width="170dp"
android:layout_height="wrap_content"
android:inputType="number"
android:maxLength="9" >

<requestFocus />
</EditText>

<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/people"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>

<TextView
android:id="@+id/txtPerOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/button1"
android:layout_marginTop="49dp"
android:text="@string/oneMoney"
android:textAppearance="?android:attr/textAppearanceLarge" />

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/txtPerOne"
android:layout_below="@+id/txtPerOne" >

<TextView
android:id="@+id/txtOneMoney"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/result"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="50sp" />

<TextView
android:id="@+id/txtYen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/yen"
android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

<Button
android:id="@+id/button1"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/txtPerOne"
android:layout_below="@+id/linearLayout1"
android:layout_marginTop="28dp"
android:text="@string/calc" />

<Button
android:id="@+id/button2"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:layout_above="@+id/txtPerOne"
android:layout_alignParentRight="true"
android:text="@string/reset" />

</RelativeLayout>

Activityの作成

 次に、Activityを作成します。

 Activityでは、まずViewを参照して、画面に部品を設置していきます。

その後、ボタンの処理を記述すると、アプリは完成です。

作成したファイル MainActivity.java の内容は、以下の通りです。

package com.example.splitcost;

import android.app.Activity;
import android.app.AlertDialog;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends Activity {

EditText etxtNum; // 人数
EditText etxtMoney; // 金額
TextView txtOneMoney; // 計算結果
TextView txtYen; // "円"

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Viewをセット
setContentView(R.layout.activity_main);
// Viewの要素を参照
Button btn1 = (Button)findViewById(R.id.button1);
Button btn2 = (Button)findViewById(R.id.button2);
txtOneMoney = (TextView)findViewById(R.id.txtOneMoney);
txtYen = (TextView)findViewById(R.id.txtYen);
etxtNum = (EditText)findViewById(R.id.etxtNum);
etxtMoney = (EditText)findViewById(R.id.etxtMoney);

// 計算ボタンの処理
btn1.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// フォーム入力を取得
String strNum = etxtNum.getText().toString();
String strMoney = etxtMoney.getText().toString();
// フォームのどちらかが空の場合
if ( strNum.equals("") || strMoney.equals("") ) {
// アラートを表示
AlertDialog.Builder dlg1;
dlg1 = new AlertDialog.Builder(MainActivity.this);
dlg1.setTitle("エラー");
dlg1.setMessage("人数と金額 両方を入力してください.");
dlg1.setPositiveButton("OK", null);
dlg1.show();
return;
} else {
// 整数変換
int num = Integer.parseInt(strNum);
int money = Integer.parseInt(strMoney);
// 人数が0人の場合
if (num == 0) {
// アラートを表示
AlertDialog.Builder dlg2;
dlg2 = new AlertDialog.Builder(MainActivity.this);
dlg2.setTitle("エラー");
dlg2.setMessage("人数は1人以上にしてください.");
dlg2.setPositiveButton("OK", null);
dlg2.show();
// 人数 > 金額の場合
} else if (num > money) {
// アラートを表示
AlertDialog.Builder dlg3;
dlg3 = new AlertDialog.Builder(MainActivity.this);
dlg3.setTitle("エラー");
dlg3.setMessage("金額は人数以上にしてください.");
dlg3.setPositiveButton("OK", null);
dlg3.show();
// 正常な入力の場合
} else {
// 金額を計算して値をセット
int result = money / num;
txtOneMoney.setText(Integer.toString(result));
// 計算結果を描画
txtOneMoney.setVisibility(View.VISIBLE);
txtYen.setVisibility(View.VISIBLE);
}
}
}
});

// リセットボタンの処理
btn2.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// フォームと計算結果をリセット
etxtNum.setText("");
etxtMoney.setText("");
txtOneMoney.setText(getResources().getText(R.string.result));
}
});
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}

実行

いよいよ、アプリを実行します。

アプリの実行はエミュレータか、スマートフォンで行うことができます。

今回は、スマートフォン(Android 5.0.2)で実行します。

 

アプリを起動し、人数と金額を入力すると、一人当たりの金額を出力できました。

f:id:Yuu-glassdog:20151219144611p:plain

 

不正な入力を行うと、アラートが表示されました。

f:id:Yuu-glassdog:20151219144757p:plain

 

おわりに

以上が、Androidアプリ開発の大まかな手順です。

実際は、ページ移動やデータベースの利用など、この他にも様々な機能を実装することができます。

少しでも興味を持った人は、ぜひ Android Studio をインストールして、アプリ開発をやってみてください。

 

今回作成したアプリは、GitHub上で公開しています。

github.com