adakoda

Android 標準のアニメーション補間クラス（Interpolator）の名前と効果がわかりづらかったので、グラフ化してみました。

グラフ化にあたっては、入力を 0.00 から 1.00 まで0.01 ずつ変化させ、プロットしています。

グラフ化してみると、AnticipateOvershootInterpolator のように、

出力の範囲（0.00～1.00）を飛び越えているものもあり、興味深いですね。

※@esmasui さんが作ってくださったアニメーション「Android Interpolations」（要Chrome？）が わかりやすいです！

AccelerateDecelerateInterpolator

core/java/android/view/animation/AccelerateDecelerateInterpolator.java

AccelerateInterpolator

core/java/android/view/animation/AccelerateInterpolator.java

AnticipateInterpolator

core/java/android/view/animation/AnticipateInterpolator.java

AnticipateOvershootInterpolator

core/java/android/view/animation/AnticipateOvershootInterpolator.java

BounceInterpolator

core/java/android/view/animation/BounceInterpolator.java

CycleInterpolator

core/java/android/view/animation/CycleInterpolator.java

DecelerateInterpolator

core/java/android/view/animation/DecelerateInterpolator.java

LinearInterpolator

core/java/android/view/animation/LinearInterpolator.java

OvershootInterpolator

core/java/android/view/animation/OvershootInterpolator.java

ソースコード

グラフ化にあたっては、Android 上で以下のようなソースコードを実装しました。

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawColor(Color.WHITE);
    
    Paint paint = new Paint();
    paint.setColor(Color.BLUE);
    paint.setAntiAlias(true);
    
    OvershootInterpolator interpolator = new OvershootInterpolator();
    
    PointF points[] = new PointF[100];
    for (int i = 0; i < 100; i++) {
        points[i] = new PointF();
        points[i].x = i;
        points[i].y = 100 - interpolator.getInterpolation((float) i / 100) * 100;
    }
    
    canvas.save();
    {
        PointF offset = new PointF(50.0f, 150.0f);
        canvas.translate(offset.x, offset.y);
        for (int i = 0; i < 99; i++) {
            canvas.drawLine(points[i].x, points[i].y,
                    points[i + 1].x, points[i + 1].y, paint);
        }
        Paint framePaint = new Paint();
        framePaint.setColor(Color.BLUE);
        framePaint.setAntiAlias(true);
        framePaint.setStyle(Style.STROKE);
        canvas.drawRect(0, 0, 100, 100, framePaint);
    }
    canvas.restore();
}

備考

• 上記補間クラスを用いた実際のアニメーションについては、ApiDemos/Views/Animation/Interpolators で確認できます
• Interpolator インタフェースを実装したクラスを作成すれば、好きな補間クラスを作成できます
• ちなみに ActionScript を触っていた頃は下図のような補間関数を実装した Tweener ライブラリを使っていました
  （誰か、Android にも移植しないかな＾＾； Android 標準だと少ないですもんね。。。）

追記

• 2011/08/22：グラフの縦軸の座標系がわかりづらかったので、下から上に0から1に増えるように修正しました（@zaki50さんThanks!）
• 2011/08/23：以下のページのようなライブラリもあると教えて頂きました（@itoz さんThanks!）
  「[Java][Android] Javaのトゥイーンライブラリ「Java Universal Tween Engine」を使ってみた。 | R o m a t i c A : Blog : Archive」
• 2011/08/27：@esmasui さんが Processing.js でアニメーションしてくれました！
  「Android Interpolations」
  

Twitter API の中でも一、二を争うであろう面白い API である UserStream（ユーザーストリーム）を使ってみました。

Android 上でも Twitter4J ライブラリーを使用すると、簡単に実装できます。

以下、twitter4j-android-2.2.4 で確認しました。

Twitter4J で UserStream を呼び出す手順

1. TwitterStreamFactory をインスタンス化する

　※コンストラクターには、OAuth 情報をセットした ConfigurationBuilder インスタンスを渡す

2. TwitterStream をインスタンス化する

　※1 の TwitterStreamFactory インスタンスから取得できる

3. UserStream 受信時に応答する（UserStreamListener）リスナーを実装する

　※必要な onXXX() をオーバーライドする

4. TwitterStream に UserStreamListener を実装したインスタンスを設定する

5. TwitterStream#user() を呼び出し、ユーザーストリームを開始する

6. UserStream 受信時、3 で実装したメソッドが呼び出されるので必要な処理をする

サンプルソースコード

http://code.google.com/p/adakoda-android-sample/source/browse/trunk#trunk%2FTwitter4JUserStream

package com.adakoda.android.twitter4juserstream;

import twitter4j.Status;
import twitter4j.TwitterStream;
import twitter4j.TwitterStreamFactory;
import twitter4j.UserStreamAdapter;
import twitter4j.conf.Configuration;
import twitter4j.conf.ConfigurationBuilder;
import android.app.Activity;
import android.app.Notification;
import android.app.NotificationManager;
import android.app.PendingIntent;
import android.content.Context;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.util.Log;

public class Twitter4JUserStreamActivity extends Activity {

    private MyUserStreamAdapter mMyUserStreamAdapter;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        mMyUserStreamAdapter = new MyUserStreamAdapter();

        // ここは別途OAuth認証して情報を取得する。。。
        String oAuthConsumerKey = "あなたのTwitterクライアントで取得したものに置き換えてください";
        String oAuthConsumerSecret = "あなたのTwitterクライアントで取得したものに置き換えてください";
        String oAuthAccessToken = "あなたのTwitterクライアントで認証したユーザーの情報に置き換えてください";
        String oAuthAccessTokenSecret = "あなたのTwitterクライアントで認証したユーザーの情報に置き換えてください";

        // Twitter4Jに対してOAuth情報を設定
        ConfigurationBuilder builder = new ConfigurationBuilder();
        {
            // アプリ固有の情報
            builder.setOAuthConsumerKey(oAuthConsumerKey);
            builder.setOAuthConsumerSecret(oAuthConsumerSecret);
            // アプリ＋ユーザー固有の情報
            builder.setOAuthAccessToken(oAuthAccessToken);
            builder.setOAuthAccessTokenSecret(oAuthAccessTokenSecret);
        }

        // 1. TwitterStreamFactory をインスタンス化する
        Configuration conf = builder.build();
        TwitterStreamFactory twitterStreamFactory = new TwitterStreamFactory(conf);
        // 2. TwitterStream をインスタンス化する
        TwitterStream twitterStream = twitterStreamFactory.getInstance();
        
        // ユーザーストリーム操作
        {
            // 4. TwitterStream に UserStreamListener を実装したインスタンスを設定する
            twitterStream.addListener(mMyUserStreamAdapter);
            // 5. TwitterStream#user() を呼び出し、ユーザーストリームを開始する
            twitterStream.user();
        }
    }
    
    // 3. UserStream 受信時に応答する（UserStreamListener）リスナーを実装する
    class MyUserStreamAdapter extends UserStreamAdapter {

        // 新しいツイート（ステータス）を取得する度に呼び出される
        @Override
        public void onStatus(Status status) {
            super.onStatus(status);
            // 6. UserStream 受信時、3 で実装したメソッドが呼び出されるので必要な処理をする
            // サンプルログ出力
            Log.v("Twitter4JUserStreamActivity", status.getText());
            // ここではサンプルとして通知発行メソッドを呼び出している
            Twitter4JUserStreamActivity.notify(Twitter4JUserStreamActivity.this,
                    status.getId(), status.getText(),
                    status.getUser().getId(), status.getUser().getScreenName());
        }
    }

    // おまけ：ツイート内容から通知を発行する
    private static void notify(Context context, long statusId,
            String statusText, long userId, String userScreenName) {
        // NotificationManager取得
        NotificationManager nm = (NotificationManager) context
                .getSystemService(Context.NOTIFICATION_SERVICE);
        // Notification構築
        Notification notification = new Notification(R.drawable.icon,
                statusText, System.currentTimeMillis());
        // 通知をタップした時に起動するペンディングインテント
        PendingIntent contentIntent = PendingIntent.getActivity(context, 0,
                // ウェブのURLを処理するアプリを起動する
                new Intent(Intent.ACTION_VIEW,
                        // 通知で表示されているツイートのURL
                        Uri.parse("http://twitter.com/#!/" + userId + "/status/" + statusId)),
                        Intent.FLAG_ACTIVITY_NEW_TASK);
        // 通知に表示する内容を設定
        notification.setLatestEventInfo(context, statusText, userScreenName, contentIntent);
        // 通知を発行
        nm.notify(0, notification);
    }

}

実行結果

新しいツイート（ステータス）を受信するたびに、リアルタイムで通知が飛びます＾＾；

※上記のように通知領域を表示したままだと、どんどん入れ替わります

また、通知をタップすると、URL を処理できるアプリで表示できます（以下は Twicca）。

注意点

UserStream 受信時に呼び出されるリスナーは、メインスレッドとは別のスレッドから呼び出されているため、

UI 操作を行う場合には、handler#post() などから呼び出す必要があります。

あわせて読みたい

• [Android] Android+Twitter4JでOAuthするためのソースコード - adakoda ※上記のOAuth情報で使用

複数のビューページを右から左などのスワイプ操作で切り替えることができる API （※）が、

Android Compatibility package, revision 3 からサポートされました！

※API ："ViewPager" ≒ "びゅーぶいーんぶいーん"

少しわかりにくいので、身近な Android アプリケーションで例えると、

以下のアプリケーションのようなビュー切り替え機能です（伝わるかな＾＾；）。

• 標準の Launcher （ホーム）アプリの画面（ワークスペース）切り替え
• Google I/O アプリのスケジュール切り替え
• Google+ アプリのストリーム切り替え
• TweetDeck アプリのカラム切り替え

サンプルアプリ実行結果

Compatible package に含まれる、Support v4 Demos というサンプルアプリの実行結果。

　→　 　→　 　→　

サンプルアプリのソース

com.example.android.supportv4.app.FragmentPagerSupport

サンプルアプリのソースがわかりやすかったのですが、

フラグメントを使ってスワイプ操作に対応したビューの切り替えを実現したい場合、

ビューの切り替えをしたい領域に android.support.v4.view.ViewPager を配置・作成、

ページとフラグメントの紐づけを行う android.support.v4.app.FragmentPagerAdapter を作成し、

ViewPager インスタンスに FragmentPagerAdapter のインスタンスをセットするだけです。

興味のある方は、Compatibility package, revision 3 の以下のソースコードを読んでみると面白いと思います。

ViewPager は、ViewGroup で実現されていました。

• /extras/android/compatibility/v4/src/java/android/support/v4/view/PagerAdapter.java
• /extras/android/compatibility/v4/src/java/android/support/v4/view/ViewPager.java
• /extras/android/compatibility/v4/src/java/android/support/v4/app/FragmentPagerAdapter.java
• /extras/android/compatibility/v4/src/java/android/support/v4/app/FragmentStatePagerAdapter.java

x86 版の emulator をビルドされていた方 がいらっしゃったので、自分でも試してみました。

x86 環境で同エミュレーターを使用すると arm のエミュレートをしなくて済む分、実行速度が速くなります。

事前準備

Android Open Source Project の master ソースを取得する（repo sync）。

※Ubuntu 10.10(64bit) / Core2 Duo 2GHz + Memory 2GB 環境で試しました

ビルド方法

% cd mydroid
% source build/envsetup.sh
% lunch full_x86-eng
% make -j2

※make -j○ の部分はコア数に応じて設定してください（上記は Dual Core 環境なので 2）

※ビルド時間計測結果（real 124m0.992s、user 205m43.170s、sys 8m54.030s）

エミュレーター起動方法

% emulator-x86

※ただし、source build/envsetup.sh を実行済みであること

エミュレーターバージョン確認結果

あわせて読みたい

• Android SDKのQEMUでArmv7対応 - Android Zaurusの日記
• Google I/O "Android Development Tools"のメモ - 組み込みの人
• Boot logs of various Android devices « Koba's blog
• Amazon EC2でAndroid(gingerbread)をビルドする(設定編) : Happy my life
• Amazon EC2でAndroid(gingerbread)をビルドする(ベンチマーク編) : Happy my life

あわせてフォローしたい

• Follow @androidzaurus
• Follow @androidsola
• Follow @tetsu_koba
• Follow @checkela
• Follow @l_b__

ListFragment 内で表示する View をカスタマイズするには、

onCreateView() 内で、差し替えたい View をインフレートします。

以下では、ListFragment のビューを差し替えるために、ListFragment を継承した CustomListFragment クラスを作成し、

オーバーライドした onCreateView() 内で、自作のカスタムビューのリソース（R.layout.custom_listfragment）をインフレートしています。

リソースは、ListFragment の説明ページのもの（緑背景）に対して、幅を 250dp に変更したものを xml に記述しました。

ソースコード

package com.adakoda.android.sample.customlistfragmentsample;

import android.app.Activity;
import android.app.ListFragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;

public class CustomListFragmentSampleActivity extends Activity {
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        if (getFragmentManager().findFragmentById(android.R.id.content) == null) {
            CustomListFragment fragment = new CustomListFragment();
            getFragmentManager().beginTransaction().add(android.R.id.content,
                    fragment).commit();
        }
    }

    public static class CustomListFragment extends ListFragment {

        public static final String[] ITEMS = { "1", "2", "3", "4", "5", "6",
                "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17",
                "18", "20" };

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            // 1. 画面幅いっぱいにレイアウトされる
//            View view = inflater.inflate(R.layout.custom_listfragment, null);
            
            // 2. クラッシュする
//            View view = inflater.inflate(R.layout.custom_listfragment, container);
            
            // 3. 期待した幅でレイアウトされる（正解）
            View view = inflater.inflate(R.layout.custom_listfragment, container, false);
            
            // 4. クラッシュする
//            View view = inflater.inflate(R.layout.custom_listfragment, container, true);
            return view;
        }

        @Override
        public void onActivityCreated(Bundle savedInstanceState) {
            super.onActivityCreated(savedInstanceState);
            setListAdapter(new ArrayAdapter<String>(getActivity(),
                    android.R.layout.simple_list_item_1, ITEMS));
        }

    }

}

リソース（res\layout\custom_listfragment.xml）

<?xml version="1.0" encoding="utf-8"?>
<!-- View の幅を250dpに変更しています（通常はmatch_parent）-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="250dp"
    android:layout_height="match_parent"
    android:paddingLeft="8dp"
    android:paddingRight="8dp">
    <!-- ListView用（idは定義済みのandroid:list）-->
    <ListView android:id="@id/android:list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#00FF00"
        android:layout_weight="1"
        android:drawSelectorOnTop="false" />
    <!-- アイテムが空の場合に使用するテキスト（idは定義済みのandroid:empty）-->
    <TextView android:id="@id/android:empty"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FF0000"
        android:text="No data" />
 </LinearLayout>

結果

※画面が小さくてわかりにくいですが、ListView アイテムの背景が緑、幅が250dpになっています

※追記：android:empty だと setEmptyText() で IllegalStateException が発生します。。。（正しい id は？）

※追記2：続きはこちら・・・「Y.A.M の 雑記帳: Android ListFragment でカスタムレイアウトを使うと setEmptyText() が使えない」