2012年9月25日火曜日

Android AlertDialogに画像を表示する

以前のAndroid AlertDialogを表示する の「独自のレイアウトを表示する」方法を利用してAlertDialogに画像を表示します。

画像の用意


まずAlertDialogに配置する画像を用意します。
画像はファイルエクスプローラーから\res\drawableフォルダに直接配置します。
drawableフォルダがなければ作成してください。
Androidは .png ( 推奨 )、.jpg ( 容認 )、.gif ( 非推奨 ) の 3つのフォーマットのビットマップをサポートします。
Eclipseが画像を自動で認識して、プロジェクトエクスプローラのres/drawableにそれぞれの画像が表示されます。
画像が読み込まれない場合、メニュー「プロジェクト」→「クリーン」を行ってください。

リソースファイルの用意


AlertDialogのメッセージの文字色を白色にしたいので、色リソースを定義します。
Eclipseのプロジェクトエクスプローラのres/valuesを右クリックし「新規」→「その他」→「Android XML 値ファイル」を選択します。
ファイル名を「color」としルート要素に「resources」を選択します。
白色を定義します。
res/values/color.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
     <color name="white">#FFFFFF</color>
</resources>

レイアウトファイルの用意


Eclipseのプロジェクトエクスプローラのres/layoutを右クリックし「新規」→「その他」→「Android XML レイアウト・ファイル」を選択します。
ファイル名を「alert」としルート要素に「LinearLayout」を選択しました。

レイアウトファイルには
画像を表示するためのImageViewとメッセージを表示するためのTextViewを配置します。
TextViewのTextColorは先ほど作成した色リソースの白を指定します。
色リソースがEclipseに認識されない場合はプロジェクトのクリーンを行ってください。
res/layout/alert.xml
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content" >
     <ImageView
          android:id="@+id/imageAlertIcon"
          android:layout_width="60dp"
          android:layout_height="60dp" />
     <TextView
          android:id="@+id/lblMessage"
          android:layout_width="258dp"
          android:layout_height="match_parent"
          android:text="TextView"
          android:textColor="@color/white" />

</LinearLayout>

AlertDialogを表示するクラスの用意


AlertDialogを表示するクラスAlertHelperクラスを作成します。(ここら辺はおこのみで)
レイアウトファイルの用意で作成したalertレイアウトを取得し
ImageViewに画像を、TextViewにメッセージを表示します。
public class AlertHelper {
    
    /**
     * 警告メッセージを表示します。
     * @param context
     * @param message
     * @param listenerOK
     */
    public static void showWarning(Context context,String message,DialogInterface.OnClickListener listenerOK){
        LayoutInflater inflater = LayoutInflater.from(context);
        final View view = inflater.inflate(R.layout.alert,null);
        ImageView imgAlertIcon = (ImageView)view.findViewById(R.id.imageAlertIcon);
        imgAlertIcon.setImageResource(R.drawable.warning);
        TextView lblMessage = (TextView)view.findViewById(R.id.lblMessage);
        lblMessage.setText(message);
        AlertDialog.Builder alert = new AlertDialog.Builder(context);        
        alert.setPositiveButton("OK",listenerOK);
        alert.setView(view);
        alert.show();    
    }
    
    /**
     * エラーメッセージを表示します。
     * @param context
     * @param message
     * @param listenerOK
     */
    public static void showError(Context context,String message,DialogInterface.OnClickListener listenerOK){
        LayoutInflater inflater = LayoutInflater.from(context);
        final View view = inflater.inflate(R.layout.alert,null);
        ImageView imgAlertIcon = (ImageView)view.findViewById(R.id.imageAlertIcon);
        imgAlertIcon.setImageResource(R.drawable.error);
        TextView lblMessage = (TextView)view.findViewById(R.id.lblMessage);
        lblMessage.setText(message);
        AlertDialog.Builder alert = new AlertDialog.Builder(context);        
        alert.setPositiveButton("OK",listenerOK);
        alert.setView(view);
        alert.show();    
    }
    
    /**
     * 情報メッセージを表示します。
     * @param context
     * @param message
     * @param listenerOK
     */
    public static void showInformation(Context context,String message,DialogInterface.OnClickListener listenerOK){
        LayoutInflater inflater = LayoutInflater.from(context);
        final View view = inflater.inflate(R.layout.alert,null);
        ImageView imgAlertIcon = (ImageView)view.findViewById(R.id.imageAlertIcon);
        imgAlertIcon.setImageResource(R.drawable.information);
        TextView lblMessage = (TextView)view.findViewById(R.id.lblMessage);
        lblMessage.setText(message);
        AlertDialog.Builder alert = new AlertDialog.Builder(context);        
        alert.setPositiveButton("OK",listenerOK);
        alert.setView(view);
        alert.show();    
    }
    
    /**
     * 質問メッセージを表示します。
     * @param context
     * @param message
     * @param listenerOK
     */
    public static void showQuestion(Context context,String message,DialogInterface.OnClickListener listenerYes,DialogInterface.OnClickListener listenerNo){
        LayoutInflater inflater = LayoutInflater.from(context);
        final View view = inflater.inflate(R.layout.alert,null);
        ImageView imgAlertIcon = (ImageView)view.findViewById(R.id.imageAlertIcon);
        imgAlertIcon.setImageResource(R.drawable.question);
        TextView lblMessage = (TextView)view.findViewById(R.id.lblMessage);
        lblMessage.setText(message);
        AlertDialog.Builder alert = new AlertDialog.Builder(context);     
        alert.setPositiveButton("YES",listenerYes);
        alert.setNegativeButton("NO", listenerNo);
        alert.setView(view);
        alert.show();    
    }
}

質問メッセージを表示してみます。
public class MainActivity extends Activity {
     public void button1Click(View view) {
         OnClickListener listenerYes = new OnClickListener(){
            public void onClick(DialogInterface dialog, int which) {
                Toast.makeText(MainActivity.this, "Yes", Toast.LENGTH_LONG).show();
            }
         };
        AlertHelper.showQuestion(this, "質問メッセージです。", listenerYes , null);
     }
}

0 件のコメント: