アニメーション / 各種テスト2012/03/21(水)@PRO&BSC         樋口 祐紀 (higuchi_yuki@probsc.jp)
本日の内容• アニメーション –User eXperience を高めましょう  • 楽しい感じに  • 処理待ちのイライラを軽減• 各種テスト –単体/結合/安定化試験を自動化し、  アプリの品質を高めましょう                ...
アニメーション    クラス名                   概要 AlphaAnimation    フェードイン/アウト RotateAnimation   回転 ScaleAnimation    拡大/縮小TranslateAni...
サンプルのレイアウト<?xml version="1.0" encoding="utf-8"?>                     main.xml<LinearLayout  xmlns:android="http://schemas....
AlphaAnimation: フェードイン/アウトpublic class MainActivity extends Activity {  public void onCreate(Bundle savedInstanceState) {...
RotateAnimation: 回転RotateAnimation rotate = new RotateAnimation(      0, 360, v.getWidth() / 2, v.getHeight() / 2);rotate....
TranslateAnimation: 移動TranslateAnimation translate = new TranslateAnimation(      -10, 10, -10, 10);translate.setDuration(...
アニメーションを利用したビューア• APK  – http://goo.gl/LLYXP• ソース  – http://goo.gl/oWcyG• ソースのインポート方法  – Eclipse の [ファイル(F)] – [インポート    (...
Tips: メニューの追加方法/** メニューID (バージョン) */static final int MENU_ID_MENU1 = (Menu.FIRST + 1);public boolean onCreateOptionsMenu(M...
Tips: ハードウェアキーの補足public boolean onKeyDown(int keyCode, KeyEvent event) {  super.onKeyDown(keyCode, event);    switch (keyC...
Tips: 回転後も消えないダイアログ/** ダイアログID (バージョン) */static final int DIALOG_ID_VERSION = 0;protected Dialog onCreateDialog(int id) { ...
Tips: FrameLayout の使い方<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res...
各種テスト                  ツール                                  概要    junit.framework.TestCase                    ①単体試験       ...
テストプロジェクトの追加• Androidプロジェクト作成時に追加できます                            14
サンプル(SimpleCalc)の用意①<?xml version="1.0" encoding="utf-8"?>                   <Button<LinearLayout xmlns:android=          ...
サンプル(SimpleCalc)の用意②package jp.probsc.simplecalc;                                               ・src/.../Calculator.java/*...
サンプル(SimpleCalc)の用意③package jp.probsc.simplecalc;                                  final EditText num2 =                  ...
サンプル(SimpleCalc)の完成        • ソース         – サンプルプロジェクト            • http://goo.gl/SQ0LW         – テストプロジェクト            • ht...
①単体試験          単体試験の準備 • ロジックを試験します   – テストプロジェクトに「CalculatorTest.java」を追加              package jp.probsc.simplecalc.test;...
①単体試験            単体試験の実施 • クラスを右クリックし、[実行(R)]-[Android JUnit Test]を実行  1つでもパスしないテストケース  があると、バーが赤色になります テスト実施はテストケース(メソッ ド...
②結合試験                            結合試験の準備   • UIを試験します                        ※テストプロジェクトに「MainActivityTest.java」を追加package ...
②結合試験           結合試験の実施 • テ ス ト プ ロ ジ ェ ク ト を 選 択 し て [ 実 行 (R)]-   [Android JUnit Test] を実行することで、先   ほどの単体試験と同時にテストを実施できま...
③安定化試験               Monkey Runner の利用                                                         # テストの実施#!/usr/bin/python# ...
③安定化試験      Monkey Runner の実行結果・コマンドプロンプトに下記コマンドを入力してMonkey Runnerを起動しますc:¥>c:¥>C:¥android¥android-sdk-windows¥tools¥monke...
よりテストを実施しやすくするために• 今回ご紹介したUIテストとMonkey Runnerで  は、ウィジェットのIDや画面上の座標を知っている  必要があり、「OKボタンを押す」などの直観的な  テストをかけない... NativeDrive...
本日の課題• イメージビューアの改善 – 縦画面と横画面のそれぞれに異なる1つ以上のアニ   メーションを追加しましょう – メニューに1つ以上の独自の機能を追加しましょう• SimpleCalc とテストの改善 – SimpleCalc に足...
Upcoming SlideShare
Loading in …5
×

Android Lecture #04 @PRO&BSC Inc.

6,669 views

Published on

2012/03/21 に株式会社 PRO&BSC にて行った Android 研修の資料 #4 です。

Published in: Education, Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,669
On SlideShare
0
From Embeds
0
Number of Embeds
5,361
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Android Lecture #04 @PRO&BSC Inc.

  1. 1. アニメーション / 各種テスト2012/03/21(水)@PRO&BSC 樋口 祐紀 (higuchi_yuki@probsc.jp)
  2. 2. 本日の内容• アニメーション –User eXperience を高めましょう • 楽しい感じに • 処理待ちのイライラを軽減• 各種テスト –単体/結合/安定化試験を自動化し、 アプリの品質を高めましょう 2
  3. 3. アニメーション クラス名 概要 AlphaAnimation フェードイン/アウト RotateAnimation 回転 ScaleAnimation 拡大/縮小TranslateAnimation 移動 AnimationSet アニメーションの合成
  4. 4. サンプルのレイアウト<?xml version="1.0" encoding="utf-8"?> main.xml<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center"><Button android:layout_width="wrap_content" android:padding="20dp" android:id="@+id/button" android:layout_height="wrap_content" android:text="Hello World !!" /></LinearLayout> 4
  5. 5. AlphaAnimation: フェードイン/アウトpublic class MainActivity extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Button btn = (Button)findViewById(R.id.button); btn.setOnClickListener(new OnClickListener() { public void onClick(View v) { AlphaAnimation alpha = new AlphaAnimation(1.0f, 0.0f); alpha.setDuration(3000); v.startAnimation(alpha); } }); }} 5
  6. 6. RotateAnimation: 回転RotateAnimation rotate = new RotateAnimation( 0, 360, v.getWidth() / 2, v.getHeight() / 2);rotate.setDuration(3000);v.startAnimation(rotate); ScaleAnimation: 拡大/縮小ScaleAnimation scale = new ScaleAnimation( 1, 2, 1, 2, v.getWidth() / 2, v.getHeight() / 2);scale.setDuration(3000);scale.setInterpolator(new CycleInterpolator(3));v.startAnimation(scale); 6
  7. 7. TranslateAnimation: 移動TranslateAnimation translate = new TranslateAnimation( -10, 10, -10, 10);translate.setDuration(3000);translate.setInterpolator(new CycleInterpolator(3));v.startAnimation(translate); AnimationSet: アニメーションの合成AnimationSet set = new AnimationSet(true);set.addAnimation(alpha);set.addAnimation(rotate); これまでのアニメーションの定set.addAnimation(scale); 義 部 分 ( startAnimationv.startAnimation(set); 以外)を残しておき、それらの 定義の下に書いてみましょう 7
  8. 8. アニメーションを利用したビューア• APK – http://goo.gl/LLYXP• ソース – http://goo.gl/oWcyG• ソースのインポート方法 – Eclipse の [ファイル(F)] – [インポート (I)...] から「インポート」ダイアログを開く – [一般] - [既存プロジェクトをワークスペー スへ] を選び、「ルート・ディレクトリーの選 択」にてインポート対象フォルダを選択して 取り込み完了 8
  9. 9. Tips: メニューの追加方法/** メニューID (バージョン) */static final int MENU_ID_MENU1 = (Menu.FIRST + 1);public boolean onCreateOptionsMenu(Menu menu) { // メニュー (バージョン) の追加 MenuItem menuVersion = menu.add( Menu.NONE, MENU_ID_MENU1, Menu.NONE, "バージョン"); menuVersion.setIcon(android.R.drawable.ic_menu_info_details); return super.onCreateOptionsMenu(menu);}public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case MENU_ID_MENU1: // バージョン表示 showDialog(DIALOG_ID_VERSION); break; default: return super.onOptionsItemSelected(item); } return true;} 9
  10. 10. Tips: ハードウェアキーの補足public boolean onKeyDown(int keyCode, KeyEvent event) { super.onKeyDown(keyCode, event); switch (keyCode) { case KeyEvent.KEYCODE_VOLUME_DOWN: case KeyEvent.KEYCODE_DPAD_DOWN: case KeyEvent.KEYCODE_DPAD_RIGHT: case KeyEvent.KEYCODE_SPACE: case KeyEvent.KEYCODE_ENTER: ... (省略) ... return true; case KeyEvent.KEYCODE_VOLUME_UP: case KeyEvent.KEYCODE_DPAD_UP: case KeyEvent.KEYCODE_DPAD_LEFT: case KeyEvent.KEYCODE_DEL: ... (省略) ... return true; } return false;} 10
  11. 11. Tips: 回転後も消えないダイアログ/** ダイアログID (バージョン) */static final int DIALOG_ID_VERSION = 0;protected Dialog onCreateDialog(int id) { Dialog dialog; switch (id) { case DIALOG_ID_VERSION: AlertDialog.Builder builder = new AlertDialog.Builder(this); builder.setIcon(R.drawable.icon); builder.setTitle("イメージビューア"); builder.setMessage("version 3.0"); builder.setPositiveButton("OK", null); dialog = builder.create(); break; onCreateDialogを経由して表示するこ とでダイアログのライフサイクルをActivity default: dialog = null; に管理してもらうことになります。 } このため、正確に書くと「(画面の)回転後 も消えない」ではなく、「(画面の)回転後 return dialog; にActivityの再生成に伴ってダイアログ} も再生成される」が正しくなります。 ... (省略) ... showDialog(DIALOG_ID_VERSION); 11
  12. 12. Tips: FrameLayout の使い方<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@android:color/white" android:padding="10dp" > <ImageView android:id="@+id/imgView" android:layout_width="fill_parent" android:layout_height="fill_parent" アンカーを明示しないと android:src="@drawable/img01" /> 左上に配置されます <Button android:id="@+id/btnLeft" android:layout_width="100dp" android:layout_height="wrap_content" android:layout_gravity="bottom|left" android:text="←" どこにアンカーを置くか android:textSize="24sp" /> がポイントになります ... (省略) ... 12
  13. 13. 各種テスト ツール 概要 junit.framework.TestCase ①単体試験 (主な対象: ロジック)android.test.ActivityInstrumentationTestCase2 ②結合試験 (主な対象: UI) Monkey Runner ③安定化試験 (主な対象: メモリリーク)
  14. 14. テストプロジェクトの追加• Androidプロジェクト作成時に追加できます 14
  15. 15. サンプル(SimpleCalc)の用意①<?xml version="1.0" encoding="utf-8"?> <Button<LinearLayout xmlns:android= android:id="@+id/btnMul" "http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_height="wrap_content" android:text="×" android:layout_gravity="center_horizontal" android:textSize="22sp" /> android:orientation="horizontal" > <Button <EditText android:id="@+id/btnDiv" android:id="@+id/editNum1" android:layout_width="fill_parent" android:layout_width="68dp" android:layout_height="wrap_content" android:layout_height="wrap_content" android:text="÷" android:layout_gravity="center_vertical" android:textSize="22sp" /> android:gravity="center" </LinearLayout> android:inputType="number" /> <EditText <LinearLayout android:id="@+id/editNum2" android:layout_width="48dp" android:layout_width="68dp" android:layout_height="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" > android:layout_gravity="center_vertical" <Button android:gravity="center" android:id="@+id/btnAdd" android:inputType="number" /> android:layout_width="fill_parent" <TextView android:layout_height="wrap_content" android:layout_width="48dp" android:text="+" android:layout_height="wrap_content" android:textSize="22sp" /> android:layout_gravity="center_vertical" <Button android:gravity="center" android:id="@+id/btnSub" android:text="=" android:layout_width="fill_parent" android:textSize="22sp" /> android:layout_height="wrap_content" <EditText android:text="-" android:id="@+id/editAnswer" android:textSize="22sp" /> android:layout_width="68dp" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:editable="false" android:gravity="center" />・res/layout/main.xml </LinearLayout> 15
  16. 16. サンプル(SimpleCalc)の用意②package jp.probsc.simplecalc; ・src/.../Calculator.java/** *計算クラス */public class Calculator { /** 足し算 */ public static int Add(int a, int b) { return a + b; } /** 引き算 */ public static int Sub(int a, int b) { return a - b; } /** 掛け算 */ public static int Mul(int a, int b) { return a * b; } /** 割り算 */ public static double Div(int a, int b) { return a / b; }} 16
  17. 17. サンプル(SimpleCalc)の用意③package jp.probsc.simplecalc; final EditText num2 = (EditText)findViewById(R.id.editNum2);import android.app.Activity; num2.setSelectAllOnFocus(true);import android.os.Bundle;import android.view.View; final EditText numAnswer =import android.view.View.OnClickListener; (EditText)findViewById(R.id.editAnswer);import android.widget.Button;import android.widget.EditText; Button btnAdd = (Button)findViewById(R.id.btnAdd);/** btnAdd.setOnClickListener(new OnClickListener() { * シンプル電卓クラス public void onClick(View v) { */ int ret = Calculator.Add(public class MainActivity extends Activity { escape(num1), escape(num2)); /** numAnswer.setText(String.valueOf(ret)); * onCreate コールバックメソッド } */ }); public void onCreate(Bundle savedInstanceState) { } super.onCreate(savedInstanceState); setContentView(R.layout.main); /** * EditText をエスケープして整数値を返す // ウィジェットの初期化 * init(); * @param target エスケープ対象の EditText ウィジェット } * @return 整数値 */ /** public static int escape(EditText target) { * ウィジェットの初期化 try { */ return Integer.parseInt(target.getText().toString()); private void init() { } catch (Exception ex) { final EditText num1 = target.setText("0"); (EditText)findViewById(R.id.editNum1); return 0; num1.setSelectAllOnFocus(true); } }・src/.../MainActivity.java } 17
  18. 18. サンプル(SimpleCalc)の完成 • ソース – サンプルプロジェクト • http://goo.gl/SQ0LW – テストプロジェクト • http://goo.gl/KM1bW • この四則演算を行うアプリの テストを行います。試験は下 記の4種類です – ① 単体試験 – ② 結合試験 – ③ 安定化試験 18
  19. 19. ①単体試験 単体試験の準備 • ロジックを試験します – テストプロジェクトに「CalculatorTest.java」を追加 package jp.probsc.simplecalc.test; import jp.probsc.simplecalc.Calculator; import junit.framework.TestCase; public class CalculatorTest extends TestCase { public void testAdd() { assertEquals(0, Calculator.Add(0, 0)); assertEquals(1, Calculator.Add(1, 0)); assertEquals(2, Calculator.Add(2, 0)); assertEquals(1, Calculator.Add(0, 1)); assertEquals(2, Calculator.Add(0, 2)); assertEquals(2, Calculator.Add(1, 1)); assertEquals(4, Calculator.Add(2, 2)); } } 19
  20. 20. ①単体試験 単体試験の実施 • クラスを右クリックし、[実行(R)]-[Android JUnit Test]を実行 1つでもパスしないテストケース があると、バーが赤色になります テスト実施はテストケース(メソッ ド)ごと、クラスごと、プロジェクトご との単位にて実施できます。 20
  21. 21. ②結合試験 結合試験の準備 • UIを試験します ※テストプロジェクトに「MainActivityTest.java」を追加package jp.probsc.simplecalc.test; getInstrumentation() .waitForIdleSync();import android.test.ActivityInstrumentationTestCase2; getActivity().runOnUiThread(import android.widget.Button; new Runnable() {import android.widget.EditText; public void run() {import jp.probsc.simplecalc.MainActivity; num1.setText("2"); num2.setText("4");public class MainActivityTest extends btnAdd.performClick(); ActivityInstrumentationTestCase2<MainActivity> { } public MainActivityTest() { }); super(MainActivity.class); } getInstrumentation() .waitForIdleSync(); public void testCalc() { EditText numAnswer = (EditText) final EditText num1 = getActivity().findViewById( (EditText)getActivity().findViewById( jp.probsc.simplecalc.R.id.editAnswer); jp.probsc.simplecalc.R.id.editNum1); assertEquals("6", final EditText num2 = numAnswer.getText().toString()); (EditText)getActivity().findViewById( } jp.probsc.simplecalc.R.id.editNum2); } final Button btnAdd = (Button)getActivity().findViewById( jp.probsc.simplecalc.R.id.btnAdd); 21
  22. 22. ②結合試験 結合試験の実施 • テ ス ト プ ロ ジ ェ ク ト を 選 択 し て [ 実 行 (R)]- [Android JUnit Test] を実行することで、先 ほどの単体試験と同時にテストを実施できます UIのテストは実機、またはエ ミュレータ上で実行されます。 22
  23. 23. ③安定化試験 Monkey Runner の利用 # テストの実施#!/usr/bin/python# coding: UTF-8 def doTest(): mr_simplecalc.py device = init()from com.android.monkeyrunner import MonkeyRunner,MonkeyDevice snapshot(device) Pythonスクリプトですimport datetime for i in range(1, 1001):# 日時文字列の取得 printMsg(cnt: %d % i)def getDate(): d = datetime.datetime.today() # 1つめの数値を入力 return d.strftime(%Y%m%d_%H%M%S) MonkeyRunner.sleep(1) device.touch(65, 215, DOWN_AND_UP)# スナップショットの取得 device.type(%d % i)# (monkeyrunner.bat と同階層に snapshot フォルダを準備のこと)def snapshot(device): # 2つめの数値を入力 MonkeyRunner.sleep(1) MonkeyRunner.sleep(1) result = device.takeSnapshot() device.touch(240, 215, DOWN_AND_UP) result.writeToFile( num = i * 2 snapshot/%s.png % getDate(), png) device.type(%d % num)# テスト初期化 # 「+」ボタンを押下def init(): MonkeyRunner.sleep(1) device = MonkeyRunner.waitForConnection() device.touch(155, 110, DOWN_AND_UP) device.startActivity( component=jp.probsc.simplecalc/.MainActivity) snapshot(device) return device # テストの開始# 標準出力へメッセージを出力 printMsg(test start.)def printMsg(msg): doTest() print [%s] %s % (getDate(), msg) printMsg(test end.) 23
  24. 24. ③安定化試験 Monkey Runner の実行結果・コマンドプロンプトに下記コマンドを入力してMonkey Runnerを起動しますc:¥>c:¥>C:¥android¥android-sdk-windows¥tools¥monkeyrunner.bat C:¥mr_simplecalc.py[20120318_145102] test start.[20120318_145117] cnt: 1[20120318_145132] cnt: 2 今回のスクリプトの場合、1000回の足し算が[20120318_145148] cnt: 3 自動的に実行されます。別途、メモリ使用状[20120318_145201] cnt: 4[20120318_145215] cnt: 5 況などを監視してアプリの安定化を図ります...・monkeryrunner.bat と同階層の snapshot フォルダに下記が保存されます 24
  25. 25. よりテストを実施しやすくするために• 今回ご紹介したUIテストとMonkey Runnerで は、ウィジェットのIDや画面上の座標を知っている 必要があり、「OKボタンを押す」などの直観的な テストをかけない... NativeDriver や Scirocco などのツールの利用が便利です!• これまでJavaのプロジェクトではもっくオブジェクト を使って試験を行えたが、AndroidはVMが異な るため、既存ツールを利用できない... EasyMock の知識を Android Mock に活かせます! 25
  26. 26. 本日の課題• イメージビューアの改善 – 縦画面と横画面のそれぞれに異なる1つ以上のアニ メーションを追加しましょう – メニューに1つ以上の独自の機能を追加しましょう• SimpleCalc とテストの改善 – SimpleCalc に足し算以外の機能を追加しましょう – テストプロジェクトに足し算以外の機能のテストケース を追加しましょう 26

×