6月 05
今日はカスタムダイアログ作成の話しです。標準のダイアログではなく iPhone のような洒落たダイアログを作成するにはどうしたら良いでしょう。そのためには、レイアウトのカスタマイズと画面遷移の際のアニメーションの設定が必要です。この2つをすることで Android でもこんなカスタムダイアログを作成できます。(サンプルの画面はそれほど洒落た画面ではありませんね。 (^^; でも頑張ればちゃんとイカした画面が作成できます!)

device-1.png device-2.png

左のダイアログは中央に表示するカスタムダイアログです。レイアウトはレイアウトファイルで自由に指定できます。右は iPhone のアクションシートのようなカスタムダイアログです。ダイアログ画面が下からせり上がります。

このような画面遷移のアニメーションはアニメーションファイル(res/anim/*.xml)で作成します。これをスタイルファイル(res/value/styles.xml)とテーマファイル(res/value/themas.xml)の設定で作成したカスタムダイアログに関連付けるのです。

今回は Android のソースに含まれている8種類の画面遷移アニメーションを利用しサンプルアプリを作成しました。ダイアログのレイアウトは3種類です。画像とソースだけではアニメーションの動きを伝えるのは難しいので是非サンプルアプリを入手しお試しください。アニメーションの Alpha, translate, scale 等を組み合わせて様々な画面遷移を実現できることを体感していただけると思います。

device-3.png

public class Main extends Activity {

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

        Button b1 = (Button)findViewById(R.id.button1);
        b1.setOnClickListener(new OnMyClickListener(R.layout.dialog1, R.style.AnimDialog));

        Button b2 = (Button)findViewById(R.id.button2);
        b2.setOnClickListener(new OnMyClickListener(R.layout.dialog1, R.style.AnimToast));

        Button b3 = (Button)findViewById(R.id.button3);
        b3.setOnClickListener(new OnMyClickListener(R.layout.dialog1, R.style.AnimWallPaper));

        Button b4 = (Button)findViewById(R.id.button4);
        b4.setOnClickListener(new OnMyClickListener(R.layout.dialog1, R.style.AnimSubmenu));

        Button b5 = (Button)findViewById(R.id.button5);
        b5.setOnClickListener(new OnMyClickListener(R.layout.dialog1, R.style.AnimInputMethod));

        Button b6 = (Button)findViewById(R.id.button6);
        b6.setOnClickListener(new OnMyClickListener(R.layout.dialog1, R.style.AnimInputMethodFancy));

        Button b7 = (Button)findViewById(R.id.button7);
        b7.setOnClickListener(new OnMyClickListener(R.layout.dialog2, R.style.AnimOptionsPanel));

        Button b8 = (Button)findViewById(R.id.button8);
        b8.setOnClickListener(new OnMyClickListener(R.layout.dialog3, R.style.AnimStatusBar));
    }

    private class OnMyClickListener implements OnClickListener {
        private int layout;
        private int style;

        public OnMyClickListener(int layout, int style) {
            this.layout = layout;
            this.style = style;
        }

        @Override
        public void onClick(View arg0) {
            final Dialog dialog = new Dialog(Main.this, style);
            dialog.setContentView(layout);

            // OK ボタン
            Button btnOk = (Button)dialog.findViewById(R.id.ok);
            btnOk.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View arg0) {
                    dialog.dismiss();
                }
            });

            // Cancel ボタン
            Button btnCancel = (Button)dialog.findViewById(R.id.cancel);
            btnCancel.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View arg0) {
                    dialog.cancel();
                }
            });

            dialog.show();
        }
    }
}

res/value/themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--
   <style name="Theme.Dialog">
       <item name="android:windowFrame">@null</item>
       <item name="android:windowTitleStyle">@android:style/DialogWindowTitle</item>
       <item name="android:windowBackground">@android:drawable/panel_background</item>
       <item name="android:windowIsFloating">true</item>
       <item name="android:windowContentOverlay">@null</item>
       <item name="android:windowAnimationStyle">@android:style/Animation.Dialog</item>
       <item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
   </style>
-->
    <style name="MyDialog" parent="android:style/Theme.Dialog">
        <item name="android:windowNoTitle">true</item>
    </style>

    <style name="AnimSubmenu" parent="MyDialog">
        <item name="android:windowBackground">@drawable/frame</item>
        <item name="android:windowAnimationStyle">@style/AnimSubmenu</item>
    </style>
    <style name="AnimToast" parent="MyDialog">
        <item name="android:windowBackground">@drawable/frame</item>
        <item name="android:windowAnimationStyle">@style/AnimToast</item>
    </style>
    <style name="AnimWallPaper" parent="MyDialog">
        <item name="android:windowBackground">@drawable/frame</item>
        <item name="android:windowAnimationStyle">@style/AnimWallPaper</item>
    </style>
    <style name="AnimDialog" parent="MyDialog">
        <item name="android:windowBackground">@drawable/frame</item>
        <item name="android:windowAnimationStyle">@style/AnimDialog</item>
    </style>
    <style name="AnimInputMethod" parent="MyDialog">
        <item name="android:windowBackground">@drawable/frame</item>
        <item name="android:windowAnimationStyle">@style/AnimInputMethod</item>
    </style>
    <style name="AnimInputMethodFancy" parent="MyDialog">
        <item name="android:windowBackground">@drawable/frame</item>
        <item name="android:windowAnimationStyle">@style/AnimInputMethodFancy</item>
    </style>
    <style name="AnimOptionsPanel" parent="MyDialog">
        <item name="android:windowBackground">@drawable/frame_0</item>
        <item name="android:windowAnimationStyle">@style/AnimOptionsPanel</item>
    </style>
    <style name="AnimStatusBar" parent="MyDialog">
        <item name="android:windowBackground">@drawable/frame_0</item>
        <item name="android:windowAnimationStyle">@style/AnimStatusBar</item>
    </style>
</resources>

res/value/styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AnimStatusBar" parent="android:Animation.Dialog">
        <item name="android:windowEnterAnimation">@anim/status_bar_enter</item>
        <item name="android:windowExitAnimation">@anim/status_bar_exit</item>
    </style>
    <style name="AnimOptionsPanel" parent="android:Animation.Dialog">
        <item name="android:windowEnterAnimation">@anim/options_panel_enter</item>
        <item name="android:windowExitAnimation">@anim/options_panel_exit</item>
    </style>
    <style name="AnimSubmenu" parent="android:Animation.Dialog">
        <item name="android:windowEnterAnimation">@anim/submenu_enter</item>
        <item name="android:windowExitAnimation">@anim/submenu_exit</item>
    </style>
    <style name="AnimToast" parent="android:Animation.Dialog">
        <item name="android:windowEnterAnimation">@anim/toast_enter</item>
        <item name="android:windowExitAnimation">@anim/toast_exit</item>
    </style>
    <style name="AnimWallPaper" parent="android:Animation.Dialog">
        <item name="android:windowEnterAnimation">@anim/wallpaper_enter</item>
        <item name="android:windowExitAnimation">@anim/wallpaper_exit</item>
    </style>
    <style name="AnimDialog" parent="android:Animation.Dialog">
        <item name="android:windowEnterAnimation">@anim/dialog_enter</item>
        <item name="android:windowExitAnimation">@anim/dialog_exit</item>
    </style>
    <style name="AnimInputMethod" parent="android:Animation.Dialog">
        <item name="android:windowEnterAnimation">@anim/input_method_enter</item>
        <item name="android:windowExitAnimation">@anim/input_method_exit</item>
    </style>
    <style name="AnimInputMethodFancy" parent="android:Animation.Dialog">
        <item name="android:windowEnterAnimation">@anim/input_method_fancy_enter</item>
        <item name="android:windowExitAnimation">@anim/input_method_fancy_exit</item>
    </style>
</resources>

サンプルコード

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



Posted by sak+

Comments are closed.

preload preload preload