今回は本家サイト「Android Developers」のTrainingを参考にして、シンプルなアプリを作ってみることにした。
シンプルなアプリを作ってみる
今回作るアプリは、テキストボックスに文字列を入力してボタンを押すと、次の画面で入力した文字が表示されるだけの簡単なアプリである。
このシンプルなアプリは、UIデザインだけでなく、画面遷移とデータの受け渡しを学習することができる。
というわけで実際に作ってみよう。
まずは Android Application Project を新規作成。以下の情報でプロジェクトを作る。
Application Name: My FirstApp
Project Name: MyFirstApp
Package Name: com.example.myfirstapp
開発者が意識すべきフォルダ＆ファイル
MyFirstApp
├src
│└com.example.myfirstapp
│ └MainActiity.java
├res
│├layout
││ └activity_main.xml
│├menu
││ └main.xml
│└values
│ ├dimens.xml
│ ├strings.xml
│ └styles.xml
└AndroidManifest.xml
まずは /res/layout/activity_main.xml (画面定義)を弄ってみる。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<EditText
android:id="@+id/edit_message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="@string/edit_message" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_send" />
</LinearLayout>
次に /res/values/strings.xml (文字リソース定義)を弄る。
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">My First App</string>
<string name="edit_message">Enter a message</string>
<string name="button_send">Send</string>
<string name="menu_settings">Settings</string>
<string name="title_activity_main">MainActivity</string>
</resources>
/res/values/menu/main.xml (メニュー？)はとりあえず空っぽで。
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
</menu>
これで、テキストボックスとボタンが配置された画面が出来上がる。言うまでもないが、この段階ではボタンを押しても何も起こらない。
なので次はボタン処理を実装する。
まずはactivity_main.xmlにButtonのonClick時の処理を追加。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<EditText
android:id="@+id/edit_message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="@string/edit_message" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendMessage"
android:text="@string/button_send" />
</LinearLayout>
さらにActivityMain.javaにsendMessageを実装。
package com.example.myfirstapp;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.EditText;
public class MainActivity extends Activity {
public final static String EXTRA_MESSAGE = "com.example.myfirstapp.MESSAGE";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
/** Called when the user clicks the Send button */
public void sendMessage(View view) {
Intent intent = new Intent(this, DisplayMessageActivity.class);
EditText editText = (EditText) findViewById(R.id.edit_message);
String message = editText.getText().toString();
intent.putExtra(EXTRA_MESSAGE, message);
startActivity(intent);
}
}
上のソースで重要なのは sendMessageメソッドの中身である。
ここではまず、Intentというものを生成している。Intentとは二つのActivity間でメッセージのやり取りを行うためのものと考えて良いだろう。この場合の二つのActivityとは、MainActivityとDisplayMessageActivityである。（※この時点ではDisplayMessageActivity.javaが存在しないのでコンパイルエラーが出ている筈。）
そして、findViewByIdの引数にテキストボックスのID（activity_main.xmlで指定）を渡してインスタンスを取得。
テキストボックスのインスタンスから入力された文字列を取得し、Intentにプット。セットするときは任意のキーを指定している。このキー(※)はプットしたデータを取り出すときに必要となる。（※後ほど遷移先のActivityを作るときに利用）
最後にstartActivityで引数にIntentを渡し、新しいActivityを立ち上げている。
ではコンパイルエラーを消すために、DisplayMessageActivity.javaを新規に作成しよう。
プロジェクトに Android Activity を追加する。入力情報は以下の通り。
Project: MyFirstApp
Activity Name: DisplayMessageActivity
Layout Name: activity_display_message
Title: DisplayMessageActivity
Hierarchical Parent: com.example.myfirstapp.MainActivity
Navigation Type: None
新規作成されたDisplayMessageActivityにちょっと手を入れる。
package com.example.myfirstapp;
import android.annotation.SuppressLint;
import android.annotation.TargetApi;
import android.app.Activity;
import android.os.Build;
import android.os.Bundle;
import android.support.v4.app.NavUtils;
import android.view.Menu;
import android.view.MenuItem;
public class DisplayMessageActivity extends Activity {
@SuppressLint("NewApi")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_display_message);
// Show the Up button in the action bar.
setupActionBar();
}
/**
* Set up the {@link android.app.ActionBar}, if the API is available.
*/
@TargetApi(Build.VERSION_CODES.HONEYCOMB)
private void setupActionBar() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
getActionBar().setDisplayHomeAsUpEnabled(true);
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.display_message, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
// This ID represents the Home or Up button. In the case of this
// activity, the Up button is shown. Use NavUtils to allow users
// to navigate up one level in the application structure. For
// more details, see the Navigation pattern on Android Design:
//
// http://developer.android.com/design/patterns/navigation.html#up-vs-back
//
NavUtils.navigateUpFromSameTask(this);
return true;
}
return super.onOptionsItemSelected(item);
}
}
string.xmlに name="title_activity_display_message" のメッセージリソースが追加されていることを確認する。
<resources>
...
<string name="title_activity_display_message">My Message</string>
</resources>
AndroidManifest.xmlにDisplayMessageActivityが追加されていることを確認する。
<application ... >
...
<activity
android:name="com.example.myfirstapp.DisplayMessageActivity"
android:label="@string/title_activity_display_message"
android:parentActivityName="com.example.myfirstapp.MainActivity" >
<meta-data
android:name="android.support.PARENT_ACTIVITY"
android:value="com.example.myfirstapp.MainActivity" />
</activity>
</application>
MainActivityで入力されたメッセージをDisplayMessageActiityへ遷移した時に表示させるために、DisplayMessageActiity#onCreateを実装する。
@SuppressLint("NewApi")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Get the message from the intent
Intent intent = getIntent();
String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE);
// Create the text view
TextView textView = new TextView(this);
textView.setTextSize(40);
textView.setText(message);
// Set the text view as the activity layout
setContentView(textView);
}
IntentのgetStringExtraメソッドにキー(※)を渡すことで、MainActivityで入力されたメッセージが取得できる。
取得したメッセージをTextViewにセットする。このTextViewも /res/layout/activity_display_message.xml に定義されている。
以上で今回目標としていたアプリは完成である。
エミュレータなり実機なり仮想Androidマシンなりで試してみよう。
