このチュートリアルでは、Androidでカスタムダイアログを作成する方法を説明します。

次の手順を参照してください。

  1. カスタムダイアログレイアウト(XMLファイル)を作成します.

  2. レイアウトを `Dialog`にアタッチします.

  3. `Dialog`を表示します.

  4. 完了しました.


P.SこのプロジェクトはEclipse 3.7で開発され、Android 2.3.3.

でテストされています

1 Androidレイアウトファイル

2つのXMLファイル、1つはメイン画面用、もう1つはカスタムダイアログ用です。

ファイル:res/layout/main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout__width="fill__parent"
    android:layout__height="fill__parent"
    android:orientation="vertical" >

    <Button
        android:id="@+id/buttonShowCustomDialog"
        android:layout__width="wrap__content"
        android:layout__height="wrap__content"
        android:text="Show Custom Dialog"/>

</LinearLayout>


File:res/layout/custom.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="wrap__content"
        android:layout__height="wrap__content"
        android:layout__marginRight="5dp"/>

    <TextView
        android:id="@+id/text"
        android:layout__width="fill__parent"
        android:layout__height="wrap__content"
        android:textColor="#FFF"
        android:layout__toRightOf="@+id/image"/>/>

     <Button
        android:id="@+id/dialogButtonOK"
        android:layout__width="100px"
        android:layout__height="wrap__content"
        android:text=" Ok "
        android:layout__marginTop="5dp"
        android:layout__marginRight="5dp"
        android:layout__below="@+id/image"
       />

</RelativeLayout>

2.活動

次のステップでコメントとデモを読んで、それは自己探検でなければなりません。


File:MainActivity.java

package com.mkyong.android;

import android.app.Activity;
import android.app.Dialog;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends Activity {

    final Context context = this;
    private Button button;

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        button = (Button) findViewById(R.id.buttonShowCustomDialog);

       //add button listener
        button.setOnClickListener(new OnClickListener() {

          @Override
          public void onClick(View arg0) {

           //custom dialog
            final Dialog dialog = new Dialog(context);
            dialog.setContentView(R.layout.custom);
            dialog.setTitle("Title...");

           //set the custom dialog components - text, image and button
            TextView text = (TextView) dialog.findViewById(R.id.text);
            text.setText("Android custom dialog example!");
            ImageView image = (ImageView) dialog.findViewById(R.id.image);
            image.setImageResource(R.drawable.ic__launcher);

            Button dialogButton = (Button) dialog.findViewById(R.id.dialogButtonOK);
           //if button is clicked, close the custom dialog
            dialogButton.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    dialog.dismiss();
                }
            });

            dialog.show();
          }
        });
    }
}

デモ

これを起動すると、 “` main.xml` “レイアウトが表示されます。


アンドロイドのカスタムダイアログの例、title = "android-custom-dialog-example"、width = 318、height = 480

ボタンをクリックし、カスタムダイアログ “` custom.xml` “レイアウトを表示し、” OK “ボタンをクリックすると、ダイアログボックスが閉じます。


アンドロイドカスタムダイアログの例、title = "android-custom-dialog-example-1"、width = 318、height = 480

ソースコードをダウンロードする

ダウンロードする –

Android-カスタム – ダイアログ – 例.zip

(16 KB)

参考文献

ダイアログの例]。 link://android/android-relativelayout-example/[Android相対レイアウト

例]。リンク://android/android-prompt-user-input-dialog-example/[Android

プロンプトダイアログ(カスタムAlertDialog)の例]

リンク://タグ/アンドロイド/[アンドロイド]リンク://タグ/ダイアログ/[ダイアログ]