▼Androidメモ▼
カスタムボタンとカスタムダイアログ


カスタマイズしたボタンとダイアログを生成して利用するプログラムを作成する。


描画リソース
drawable-nodpi/box.9.png

drawable-nodpi/button.9.png

drawable-nodpi/button_pressed.9.png

drawable-nodpi/button_focused.9.png


drawable-nodpi/custombutton.xml 
<?xml version="1.0" encoding="UTF-8"?>
<!-- カスタムボタンのセレクタ -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/button_pressed" android:state_pressed="true" />
    <item android:drawable="@drawable/button_focused" android:state_focused="true" />
    <item android:drawable="@drawable/button" />
</selector>

レイアウト
layout/customdialog.xml 
<?xml version="1.0" encoding="utf-8"?>
<!-- カスタムダイアログのレイアウト -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:minWidth="200sp"
    android:gravity="center">
    <TextView android:text="" 
        android:id="@+id/text" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:padding="12sp"/>
    <Button android:text="OK" 
        android:id="@+id/btnOK" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:minWidth="80sp"/>
 </LinearLayout>

テーマとスタイル
values/styles.xml 
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- カスタムダイアログのアニメーション -->
    <style name="Animation.CustomDialog" parent="android:Animation.Dialog">
        <item name="android:windowEnterAnimation">@anim/enter</item>
        <item name="android:windowExitAnimation">@anim/exit</item>
    </style>

    <!-- カスタムボタンのスタイル -->
    <style name="Style_CustomButton" parent="android:Widget.Button">
        <item name="android:background">@drawable/custombutton</item>
    </style>
</resources>

values/themes.xml 
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- カスタムダイアログのテーマ -->
    <style name="Theme_CustomDialog" parent="android:style/Theme.Dialog">
        <item name="android:windowAnimationStyle">@style/Animation.CustomDialog</item>
        <item name="android:windowBackground">@drawable/box</item>
        <item name="android:buttonStyle">@style/Style_CustomButton</item>
        <item name="android:textColor">#FF0000</item>
        <item name="android:windowNoTitle">true</item>
    </style>
</resources>

アニメーション
anim/enter.xml 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@anim/overshoot">
    <scale
        android:fromXScale="0.0" 
        android:toXScale  ="1.0"
        android:fromYScale="0.0" 
        android:toYScale  ="1.0"
        android:pivotX    ="50%" 
        android:pivotY    ="50%" 
        android:duration  ="350"/>
</set>

anim/exit.xml 
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@anim/anticipate">
    <scale
        android:fromXScale="1.0" 
        android:toXScale  ="0.0"
        android:fromYScale="1.0" 
        android:toYScale  ="0.0"
        android:pivotX    ="50%" 
        android:pivotY    ="50%" 
        android:duration  ="350"/>
</set>

anim/overshoot.xml 
<?xml version="1.0" encoding="utf-8"?>
<overshootInterpolator xmlns:android="http://schemas.androd.com/apk/res/android" 
    android:tension="1.0"/>

anim/anticipate.xml 
<?xml version="1.0" encoding="utf-8"?>
<anticipateInterpolator xmlns:android="http://schemas.androd.com/apk/res/android" 
    android:tension="1.0"/>

ソースコード
CustomDialogEx.java 
package net.npaka.customdialogex;
import android.app.Activity;
import android.app.Dialog;
import android.content.Context;
import android.content.DialogInterface;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;

//カスタムダイアログ
public class CustomDialogEx extends Activity implements 
    View.OnClickListener,
    DialogInterface.OnClickListener {
    private final static int WC=LinearLayout.LayoutParams.WRAP_CONTENT;
    
    //初期化
    @Override
    public void onCreate(Bundle icicle) {
        super.onCreate(icicle);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        
        //レイアウトの生成
        LinearLayout layout=new LinearLayout(this);
        layout.setBackgroundColor(Color.rgb(255,255,255));
        layout.setOrientation(LinearLayout.VERTICAL);
        setContentView(layout);
        
        //カスタムボタンの生成
        Button button=new Button(this);
        button.setBackgroundResource(R.drawable.custombutton);
        button.setText("カスタムダイアログの表示");
        button.setOnClickListener(this);
        button.setLayoutParams(new LinearLayout.LayoutParams(WC,WC));
        layout.addView(button);
    }
    
    //カスタムダイアログの表示
    public static void showDialog(Context context,String text,
        final DialogInterface.OnClickListener listener) { 
        //カスタムダイアログの生成
        final Dialog dialog=new Dialog(context,R.style.Theme_CustomDialog);
        dialog.setContentView(R.layout.customdialog);
        
        //テキストの指定
        TextView textView=(TextView)dialog.findViewById(R.id.text);
        textView.setText(text);

        //ボタンの指定
        Button btnOK=(Button)dialog.findViewById(R.id.btnOK);
        btnOK.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                dialog.dismiss();
                listener.onClick(dialog,0);
            }
        });
        dialog.show();
    }
    
    //ボタンクリック時に呼ばれる
    public void onClick(View view) {
        showDialog(this,"これはカスタムダイアログです。",this);
    }

    //ダイアログボタンクリック時に呼ばれる
    public void onClick(DialogInterface dialog,int which) {  
        dialog.dismiss();
    } 
}



コーディングによるカスタムボタンの設定
コーディングによってボタンの状態別画像を設定する方法は次の通り。
falseの時はマイナスの値を指定。 
            StateListDrawable drawables=new StateListDrawable();
            int statePressed=android.R.attr.state_pressed;
            drawables.addState(new int[]{statePressed},new BitmapDrawable(bmp[1]));
            drawables.addState(new int[]{            },new BitmapDrawable(bmp[0]));
            handle.setBackgroundDrawable(drawables);


−戻る−