Hatena::Groupandroid

lnzntの Android 日記 このページをアンテナに追加 RSSフィード

2012年04月15日(日)

EGit インストール

23:28 | EGit インストール - lnzntの Android 日記 を含むブックマーク はてなブックマーク - EGit インストール - lnzntの Android 日記 EGit インストール - lnzntの Android 日記 のブックマークコメント

EGit プラグインを Eclipse にインストールしたので簡単にメモします。

EGit は 分散バージョン管理システム git を扱うプラグインです。

インストール

インストールは "Help" > "Install New Software..." から行います。

リポジトリは以下です。(無効でしたが登録済みでした。以前入れたかな?)

使い方

設定は "Window" > "Preferences" の "Team" > "Git" から行います。

"Configuration" に構成があります。既存の ~/.gitconfig を読み込むようです。

ここで設定すると ~/.gitconfig に反映されるらしいです。

---

まだ、リポジトリを作ってないプロジェクトを右クリックして "Team" > "Share Project..." を選択すると(GitCVS か選べて)リポジトリを作る画面になります。

---

リポジトリを作ったプロジェクトのファイルを右クリックして "Team" を選択すると、"Commit" とか "Add to Index"(これが add) などの操作メニューがでます。

ここから commit や add などの操作ができます。

---

簡単ですが、以上。

Drawable Animation

16:19 | Drawable Animation - lnzntの Android 日記 を含むブックマーク はてなブックマーク - Drawable Animation - lnzntの Android 日記 Drawable Animation - lnzntの Android 日記 のブックマークコメント

上の文書に書かれている Drawable Animation を書いてみました。

Tweened Animation は 1コマずつの画像を連続表示して実現したアニメーションみたいです。

f:id:lnznt:20120415160749j:image

実装

上の文書の例のとおり真似しました。

画像は GIMP で適当につくりました。

res/drawable/animation.xml (アニメーションの定義。res/drawable に置く)

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">
    <item android:drawable="@drawable/count03" android:duration="1000" />
    <item android:drawable="@drawable/count02" android:duration="1000" />
    <item android:drawable="@drawable/count01" android:duration="1000" />
    <item android:drawable="@drawable/count00" android:duration="1000" />
</animation-list>

以下の画像を res/drawable-hdpi に置きます。

f:id:lnznt:20120415160753p:image

count03.png

f:id:lnznt:20120415160752p:image

count02.png

f:id:lnznt:20120415160751p:image

count01.png

f:id:lnznt:20120415160750p:image

count00.png

res/layout/main.xml

(ImageView の android:src は設定しない。アニメーションにかぶさって見えなくなってしまうので)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/anim_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/anim_view_description"/>

    <Button
        android:id="@+id/start_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/start_button_label" android:onClick="onStartAnim"/>

    <Button
        android:id="@+id/stop_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/stop_button_label" android:onClick="onStopAnim"/>

</LinearLayout>

res/values/string.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World, AnimSampleActivity!</string>
    <string name="app_name">AnimSample</string>
    <string name="start_button_label">Start</string>
    <string name="stop_button_label">Stop</string>
    <string name="anim_view_description">Anime View</string>
</resources>

src/.../DrawableAnimSampleActivity .java

package com.example.drawableanimsample;

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;

public class DrawableAnimSampleActivity extends Activity {
	AnimationDrawable animation;
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        ImageView animImage = (ImageView) findViewById(R.id.anim_view);
        animImage.setBackgroundResource(R.drawable.animation);
        animation = (AnimationDrawable) animImage.getBackground();
    }
    
    public void onStartAnim(View v) {
    	animation.start();
    }
    
    public void onStopAnim(View v) {
    	animation.stop();
    }
}

Tweened Animation

14:37 | Tweened Animation - lnzntの Android 日記 を含むブックマーク はてなブックマーク - Tweened Animation - lnzntの Android 日記 Tweened Animation - lnzntの Android 日記 のブックマークコメント

上の文書に書かれている Tweened Animation を書いてみました。

Tweened Animation は画像変換を連続表示して実現したアニメーションみたいです。

f:id:lnznt:20120415142341j:image

作成

上の文書に書かれている XML を流用しました。

res/anim/animation.xml (アニメーションの定義。res/anim に置く)

ここでは、<scale>、<rotate> しか使ってませんが、<alpha>、<translate>というのもあるようです。

<?xml version="1.0" encoding="UTF-8"?>

<set android:shareInterpolator="false"
     xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromXScale="1.0"
        android:toXScale="1.4"
        android:fromYScale="1.0"
        android:toYScale="0.6"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fillAfter="false"
        android:duration="700" />
    <set android:interpolator="@android:anim/decelerate_interpolator">
        <scale
           android:fromXScale="1.4"
           android:toXScale="0.0"
           android:fromYScale="0.6"
           android:toYScale="0.0"
           android:pivotX="50%"
           android:pivotY="50%"
           android:startOffset="700"
           android:duration="400"
           android:fillBefore="false" />
        <rotate
           android:fromDegrees="0"
           android:toDegrees="-45"
           android:toYScale="0.0"
           android:pivotX="50%"
           android:pivotY="50%"
           android:startOffset="700"
           android:duration="400" />
    </set>
</set>

res/layout/main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/anim_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" android:contentDescription="@string/anim_view_description"/>

    <Button
        android:id="@+id/start_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/start_button_label" android:onClick="onStartAnim"/>

    <Button
        android:id="@+id/stop_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/stop_button_label" android:onClick="onStopAnim"/>

</LinearLayout>

res/values/string.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">AnimSample</string>
    <string name="start_button_label">Start</string>
    <string name="stop_button_label">Stop</string>
    <string name="anim_view_description">Anime View</string>
</resources>

src/.../AnimSampleActivity.java

package com.example.animsample;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

public class AnimSampleActivity extends Activity {
	private ImageView animView;
	private Animation animation;
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    
        animView = (ImageView)findViewById(R.id.anim_view);
        animation = AnimationUtils.loadAnimation(this, R.anim.animation);   
    }
    
    public void onStartAnim(View v) {
    	animView.startAnimation(animation);
    }
    
    public void onStopAnim(View v) {
    	animView.clearAnimation();
    }
}

2D 描画 API

10:51 | 2D 描画 API - lnzntの Android 日記 を含むブックマーク はてなブックマーク - 2D 描画 API - lnzntの Android 日記 2D 描画 API - lnzntの Android 日記 のブックマークコメント

Android には 2D 描画 API があります。

で、上の文書によると以下の方法があります。(以下、抜粋引用)

  • a. Draw your graphics or animations into a View object from your layout.
  • b. Draw your graphics directly to a Canvas.

Option "a," drawing to a View, is your best choice when you want to draw simple graphics that do not need to change dynamically and are not part of a performance-intensive game.

Option "b," drawing to a Canvas, is better when your application needs to regularly re-draw itself.

「drawing to a View」方法

こちらのブログで、とても分かりやすく説明されていました。

要点はこんな感じ。(上のブログ読んでやっと分かりました。。。)

public class CustomView extends View {        // View を作る
                 :
    @Override
    public void onDraw(Canvas canvas) {
                 :
        canvas.xxxx(..., ... ); // Canvas に描画
                 :
        canvas.yyyy(..., ... ); 
                 :
    }
                 :
}

public class CustomActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new CustomView(this)); // View を設定
    }
                  :

Android Developers に載っていた例

Drawable を取得した場合とどう等価かわからなかったのでメモ。

public class DrawableSampleActivity extends Activity {
	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		LinearLayout mLinearLayout = new LinearLayout(this);

		ImageView i = new ImageView(this);
		
		i.setImageResource(R.drawable.my_image);
//		上の行は、以下のコードと等価
//		--------
//		Resources res = getResources();
//		Drawable myImage = res.getDrawable(R.drawable.my_image);
//		i.setImageDrawable(myImage);
//		--------
		i.setAdjustViewBounds(true);
		i.setLayoutParams(new Gallery.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

		mLinearLayout.addView(i);

		setContentView(mLinearLayout);
	}
}

画像ファイルは res/drawable/ に置く。

my_image.gif を置いても ID (の一部)になるのはベース名(my_image)のみ。

サポートされる画像形式は、JPEG(.jpg)、PNG(.png)、GIF(.gif)、NinePatch(.9.png)。

----

XML で書いた場合の例

android:contentDescription が無いと warning が出ます。

    <ImageView
      android:contentDescription="@string/image_description" 
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:tint="#55ff0000"
      android:src="@drawable/my_image"/>

SVG

01:43 | SVG - lnzntの Android 日記 を含むブックマーク はてなブックマーク - SVG - lnzntの Android 日記 SVG - lnzntの Android 日記 のブックマークコメント

HTML5 の Small Simple Sample 第3弾。

SVG を使った簡単な HTML5 文書を、ホストの Ubuntu Linux に置いて、エミュレータでアクセスしてみました。

f:id:lnznt:20120415013355j:image

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8"/>
    <title>SVG Sample</title>
</head>
<body>
    <h1>SVG サンプル</h1>
    <svg>
       <circle cx="50"  cy="50"  r="50" fill="red" />
       <circle cx="100" cy="100" r="50" fill="yellowgreen" />
       <circle cx="150" cy="150" r="50" fill="blue" />
    </svg>
</body>
</html>

HTML5 の Canvas

01:30 | HTML5 の Canvas - lnzntの Android 日記 を含むブックマーク はてなブックマーク - HTML5 の Canvas - lnzntの Android 日記 HTML5 の Canvas - lnzntの Android 日記 のブックマークコメント

Canvas API を使った簡単な HTML5 文書を、ホストの Ubuntu Linux に置いて、エミュレータでアクセスしてみました。

f:id:lnznt:20120415011812j:image

ボタンクリックで三角が描けました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8"/>
    <title>Canvas Sample</title>
    <script>
        function drawTriangle() {
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");

            ctx.beginPath();
            ctx.moveTo(50, 10);
            ctx.lineTo(90, 90);
            ctx.lineTo(10, 90);
            ctx.closePath();

            ctx.stroke();
        }
    </script>
</head>
<body>
    <h1>Canvas サンプル</h1>
    <button onclick="drawTriangle()">三角を描く</button>
    <canvas id="canvas"></canvas>
</body>
</html>

Web ブラウザでの HTML5 の audio 音楽再生

00:44 | Web ブラウザでの HTML5 の audio 音楽再生 - lnzntの Android 日記 を含むブックマーク はてなブックマーク - Web ブラウザでの HTML5 の audio 音楽再生 - lnzntの Android 日記 Web ブラウザでの HTML5 の audio 音楽再生 - lnzntの Android 日記 のブックマークコメント

エミュレータで Youtube の動画を見ると画面が真っ暗で音だけ聞こえます。

ググってみましたがよく分かりません。どうも、性能の問題らしいですが。

(「Max VM application heap」は 48 から 128 にしてますが、関係無い??)

----

ホストの Ubuntu Linux に 音楽を再生する HTML5 文書を置いて、エミュレータでブラウズしました。

再生できました。オーディオは Vorbis Ogg 形式です。

f:id:lnznt:20120415004229j:image

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8"/>
    <title>Play Music Sample</title>
</head>
<body>
    <h1>音楽再生サンプル (Ogg Vorbis)</h1>
    <audio controls="controls" src="music/sample.ogg">
        ブラウザが未対応です
    </audio>
</body>
</html>

sample.ogg は適当に用意。

動画は?

サンプル動画を探すのが面倒になり、以下のサイトのサンプルに直接アクセスしてみました。

やっぱり音は聞こえますが、画像が表示されませんでした。