7月 31
我が家に3代目の Mac がやってきました。

1代目が白のMacbook、2代目の Macbook Pro、そして3代目が今回ゲットした Macbook Air です。

MBA.png

Macbook Air には同日に発表された MacOS の最新版 Lion 搭載です。使ったユーザの評判はあまり芳しくはありませんが、私が使った感じでは好印象です。特に全画面アプリは私には使い易いですね。スクロールするの向きが逆になった件も意外と違和感なく使えてます。

これまで使っていた Macbook Pro より、さらに軽くなった重量のおかげで外に持ち出す機会も一層増えそうです。(^^



記念撮影

これまでの Mac を並べて記念撮影です (^^

まずは閉じた状態で

MB1.png


次に開いた状態で

MB2.png


重ねて

MB3.png

少しずらして

MB4.png


古い Mac は順次子供達にバトンタッチして有効活用しています (^^



Posted by sak+

7月 18
インターネットアクセスには時間がかかる場合が多いので、画面遷移中にプログレスダイアログを表示させたい場合があります。今日はそんな時に使用できる Tips です。

ただ WebView の画面遷移中にプログレスダイアログを出すだけでは面白くないのでダイアログにはカスタムビューを使用します。また、進捗を分かり易く表現するためにアニメーションを使用してみましょう。

サンプルアプリ

今日のサンプルアプリではページの切替時に以下のような進捗を示すダイアログを表示させます。ちょっと見づらいですが画面中央に透過の背景を持つダイアログが表示されています。中央のインディケータはアニメーションしています。

device-1.png

ダイアログの表示/非表示のタイミング

ダイアログを表示/非表示させるタイミングには WebView の持つ WebViewClient の onPageStarted, onPageFinished を使います。標準の振る舞いを変えるために WebViewClient を継承したクラスを作成したうえで onPageStarted, onPageFinished をオーバライドします。(onPageStarted でダイアログの生成と表示、onPageFinished でダイアログの非表示と破棄)ここで作成したクラスを WebView の setWebViewClient に設定します。

        WebView wv = (WebView)findViewById(R.id.webview);
        wv.setWebViewClient(new MyWebViewClient());

    (略)

    private class MyWebViewClient extends WebViewClient {
        private AnimationDrawable animation;
       
        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            Log.d("debug", "onPageStarted: " + url);
            if (dialog != null) {
                dialog.dismiss();
            }
            dialog = new Dialog(Main.this, R.style.MyProgressTheme);
            dialog.setContentView(R.layout.my_progress_dialog);
            dialog.show();

            // アニメーションの動作
            ImageView iv = (ImageView)dialog.findViewById(R.id.image);
            iv.setBackgroundResource(R.drawable.ic_spinner);
            animation = (AnimationDrawable)iv.getBackground();
            startAnimation();
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            Log.d("debug", "onPageFinished: " + url);
            stopAnimation();
            dialog.dismiss();
            dialog = null;
        }

        @Override
        public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
            Log.d("debug", "onReceivedError: " + failingUrl + " (code: " + errorCode + ")");
            stopAnimation();
            dialog.dismiss();
            dialog = null;
        }
       
    (略)
    }

Main.java

カスタムダイアログ

ダイアログのカスタマイズは、ダイアログ生成時にテーマを指定することで簡単に行えます。(手を加えるファイルが多いので一見複雑ですが慣れれば簡単です。)

            dialog = new Dialog(Main.this, R.style.MyProgressTheme);
            dialog.setContentView(R.layout.my_progress_dialog);

(layout/my_progress_dialog.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   >
    <ImageView
       android:id="@+id/image"
       android:layout_width="90dp"
       android:layout_height="90dp"
       android:background="@drawable/ic_spinner"
       android:layout_centerInParent="true"
       />
</RelativeLayout>

(values/themes.xml)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MyProgressTheme" parent="android:style/Theme.Dialog">
        <item name="android:windowBackground">@drawable/my_progress_frame</item>
        <item name="android:windowNoTitle">true</item>
    </style>
</resources>

(drawable/my_progress_frame.xml)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#80808080"/>
    <corners android:radius="20dp"/>
    <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
    <stroke android:width="0dp" android:color="#a0808080" />
</shape>

アニメーション

イメージをアニメーションさせるには AnimationDrawable を使用します。アニメーションは何もしなければ始まりません。onPageStarted でダイアログを表示させた後でアニメーションを開始させます。終了時には onPageFinished, onReceivedError でアニメーションを停止させます。

(drawable/ic_spinner.xml)

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
   android:oneshot="false" >
    <item android:drawable="@drawable/ic_spinner1" android:duration="60" />
    <item android:drawable="@drawable/ic_spinner2" android:duration="60" />
    <item android:drawable="@drawable/ic_spinner3" android:duration="60" />
    <item android:drawable="@drawable/ic_spinner4" android:duration="60" />
    <item android:drawable="@drawable/ic_spinner5" android:duration="60" />
    <item android:drawable="@drawable/ic_spinner6" android:duration="60" />
    <item android:drawable="@drawable/ic_spinner7" android:duration="60" />
    <item android:drawable="@drawable/ic_spinner8" android:duration="60" />
</animation-list>

(Main.java)

            // アニメーションの動作
            ImageView iv = (ImageView)dialog.findViewById(R.id.image);
            iv.setBackgroundResource(R.drawable.ic_spinner);
            animation = (AnimationDrawable)iv.getBackground();
            startAnimation();

      (略)

        private void startAnimation() {
            handler.post(new Runnable() {
                @Override
                public void run() {
                    animation.start();
                }
            });
        }

サンプルコード

サンプルアプリのソースコードは Google Code で公開しています。完全なサンプルコードを参照したい場合はそちらをどうぞ。


Posted by sak+

Tagged with:
7月 06
今回のテーマは Scroller を使用したカスタムビューの作成です。Scroller は座標を管理するオブジェクトで初期位置とターゲットの座標、あとそれに要する時間を指定してあげることでその時点での座標を計算し取得できます。オブジェクトの生成時に Interpolator を指定できるので移動量を任意に調整することもできます。

また View には computeScroll というメソッド持ち、その表示位置を変更させることができます。カスタムビューの中で computeScroll をオーバーライドしてあげることでカスタムビューにアニメーションを持たせる事ができるようになります。Scroller はここで使います。こんな感じで。

    @Override
    public void computeScroll() {
        if (mScroller.computeScrollOffset()) {
            scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
            postInvalidate();
        }
    }

SlideView.java

サンプルアプリ

では今回のサンプルアプリです。画面の中に3つのボタンがあります。3つのボタンを押すと選択されたビュー(カスタムビュー)がスライドして現れます。(View1 は左から、View2 は右から、View3 は下から)既に表示されたボタンを押すとスライドで閉じます。なお、ビューは同時には一枚しか開けないように制御しており、既に画面上に他のカスタムビューが表示されている場合はそのビューはスライドで自動的に閉じます。

device-1.png

device-2.png

device-3.png

作成したカスタムビューはパラメータの指定で諸条件を指定できるようにしています。

    <RelativeLayout
       android:layout_width="fill_parent"
       android:layout_height="fill_parent"
       >
        <sak.samples.slideview.MyView1
           android:id="@+id/myview1"
           android:layout_width="160dp"
           android:layout_height="120dp"
           android:layout_alignParentLeft="true"
           android:layout_marginTop="10dp"
           sak:distance="160dp"
           sak:duration="1000"
           sak:location="left"
           sak:init_opened="false"
           />

        <sak.samples.slideview.MyView2
           android:id="@+id/myview2"
           android:layout_width="180dp"
           android:layout_height="180dp"
           android:layout_alignParentRight="true"
           android:layout_marginTop="140dp"
           sak:distance="180dp"
           sak:duration="1000"
           sak:location="right"
           sak:init_opened="true"
           />

        <sak.samples.slideview.MyView3
           android:id="@+id/myview3"
           android:layout_width="140dp"
           android:layout_height="320dp"
           android:layout_alignParentBottom="true"
           android:layout_marginLeft="50dp"
           sak:distance="320dp"
           sak:duration="500"
           sak:location="bottom"
           sak:init_opened="false"
           />
    </RelativeLayout>

main.xml

実際に動かしている映像はこちらです。

サンプルコード

サンプルアプリのソースコードは Google Code で公開しています。完全なサンプルコードを参照したい場合はそちらをどうぞ。


Posted by sak+

Tagged with:
7月 04
7/3(日)に東京の六本木ヒルズのGoogleのオフィスで開催された Android Developer Lab Tokyo 2011(ADL2011)に行ってきました。テーマは Honeycomb。日本発のすばらしいアプリを作ってもらい Honeycomb を広めたいというのが開催趣旨のようです。 午前中は Google の中の人のセッション(英語+日本語通訳)で、午後からは予め用意されたカリキュラムに沿ったコードラボです。コードラボではドコモさんが用意した実機(Optimus Pad L-06C)を使って行いました。この実機は参加者にプレゼントされました。(ドコモさん感謝です!)

DSC_1.png

今回のセッションの内容は先の Google I/O で行われたセッションの内容をベースにしたものということで既に公開されている資料もあります。イベントで使用した資料から公開資料へのリンクが張られています。興味があれば参照してください。

http://j.mp/adltokyo2011

今回は教えてもらった情報をもとに Honeycomb アプリ(実際には Backport で Honeycomb 以前のバージョンでも動作可能)を動かしてみました。

device-0.png

device-1.png

device-2.png

このアプリのソースは公開されていて以下から入手できます。入手には Mercurial が必要で若干苦戦しました。また、入手したソースは私の環境ではそのまま動かなかったため若干の修正が必要でした。

http://code.google.com/p/iosched/

このイベントの約3ヶ月後にフォローアップイベントが予定されており、優秀な Honeycomb アプリを開発した開発者には次回の Google I/O のチケットをプレゼントされるということです。そこを目指して Honeycomb アプリを作ってみようかな?


Posted by sak+

preload preload preload