Android中制作自定義dialog對(duì)話(huà)框的實(shí)例分享

更新時(shí)間：2016年04月29日 15:16:57 作者：zhoulc

這篇文章主要介紹了Android中制作自定義dialog對(duì)話(huà)框的實(shí)例分享,安卓自帶的Dialog顯然不夠用,因而我們要繼承Dialog類(lèi)來(lái)制作自己的對(duì)話(huà)框,需要的朋友可以參考下

自定義dialog基礎(chǔ)版
很多時(shí)候，我們?cè)谑褂胊ndroid sdk提供的alerdialog的時(shí)候，會(huì)因?yàn)槟愕南到y(tǒng)的不同而產(chǎn)生不同的效果，就好比如你刷的是MIUI的系統(tǒng)，彈出框都會(huì)在頂部顯示！這里簡(jiǎn)單的介紹自定義彈出框的應(yīng)用。

首先創(chuàng)建布局文件dialog：

代碼:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical" >
  <EditText 
    android:id="@+id/edit"
    android:layout_width="250dip"
     android:layout_height="wrap_content"
    />
  <Button 
    android:id="@+id/clickbtn"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="click me" />
  

</LinearLayout>

其次創(chuàng)建MyCustomDialog類(lèi)繼承Dialog：

代碼:

package com.xzw.custom.dialog;

import android.app.Dialog;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
/**
* 自定義dialog
*/
public class MyCustomDialog extends Dialog {
    //定義回調(diào)事件，用于dialog的點(diǎn)擊事件
    public interface OnCustomDialogListener{
        public void back(String name);
    }
    
    private String name;
    private OnCustomDialogListener customDialogListener;
    EditText etName;

    public MyCustomDialog(Context context,String name,OnCustomDialogListener customDialogListener) {
        super(context);
        this.name = name;
        this.customDialogListener = customDialogListener;
    }
    
    @Override
    protected void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.dialog);
        //設(shè)置標(biāo)題
        setTitle(name); 
        etName = (EditText)findViewById(R.id.edit);
        Button clickBtn = (Button) findViewById(R.id.clickbtn);
        clickBtn.setOnClickListener(clickListener);
    }
    
    private View.OnClickListener clickListener = new View.OnClickListener() {
        
        @Override
        public void onClick(View v) {
            customDialogListener.back(String.valueOf(etName.getText()));
          MyCustomDialog.this.dismiss();
        }
    };

}

最后再完成MainActivity：

代碼:

package com.xzw.custom.dialog;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity implements OnClickListener {
   private TextView resultText;
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    resultText = (TextView) findViewById(R.id.result);
    Button showDialogBtn = (Button) findViewById(R.id.showdialog);
    showDialogBtn.setOnClickListener(this);
    
   
  }

    @Override
    public void onClick(View v) {
         MyCustomDialog dialog = new MyCustomDialog(this,"Enter your name",new MyCustomDialog.OnCustomDialogListener() {
                
                @Override
                public void back(String name) {
                    resultText.setText("Enter name is "+name);
                    
                }
            });
            dialog.show();
        
  }
         
  
}

效果如圖：

2016429151132630.jpg (322×489)

炫酷升級(jí)版
在日常開(kāi)發(fā)過(guò)程中，Android自帶的對(duì)話(huà)框控件美觀程度遠(yuǎn)遠(yuǎn)滿(mǎn)足不了開(kāi)發(fā)的要求，特別是相對(duì)于移植開(kāi)發(fā)，下面描述的demo是基于1280X720分辨率實(shí)現(xiàn)的效果。

自定義對(duì)話(huà)框和上次記錄的自定義RatingBar非常類(lèi)似，都是通過(guò)在styles.xml里面繼承父類(lèi)(此處是Dialog)的樣式。
styles.xml

<style name="NoticeDialog" parent="@android:style/Theme.Dialog">
    <item name="android:windowFrame">@null</item><!--邊框-->
    <item name="android:windowIsFloating">true</item><!--是否浮現(xiàn)在activity之上-->
    <item name="android:windowIsTranslucent">false</item><!--半透明-->
    <item name="android:windowNoTitle">true</item><!--無(wú)標(biāo)題-->
    <item name="android:windowBackground">@drawable/tck_bg</item><!--背景透明-->
    <item name="android:backgroundDimEnabled">false</item><!--模糊-->
  </style>

我們下面將要做下面三個(gè)效果：
（1）帶選擇確認(rèn)框的提示

2016429151333943.jpg (601×258)

（2）圖片+文字的提示

2016429151417413.jpg (599×274)

（3）圖片+圖片

2016429151439752.jpg (613×273)

實(shí)現(xiàn)上面三個(gè)效果我們只需要繼承一個(gè)Dialog類(lèi)，然后根據(jù)不同的布局添加相對(duì)應(yīng)的xml布局就可以簡(jiǎn)單實(shí)現(xiàn)功能擴(kuò)展的效果了。
1.繼承Dialog類(lèi)，重寫(xiě)父類(lèi)的方法，并添加子類(lèi)自己的方法。
NoticeDialog.java，繼承于Dialog父類(lèi)，實(shí)現(xiàn)了點(diǎn)擊事件的接口，如果有確認(rèn)選擇框，則把確認(rèn)選擇框的控件添加click事件監(jiān)聽(tīng)，通過(guò)在回調(diào)方法在UI主線(xiàn)程里面實(shí)現(xiàn)界面更新和邏輯操作。

package com.zlc.dialog;
 
import android.app.Dialog;
import android.content.Context;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.TextView;
 
 
public class NoticeDialog extends Dialog implements OnClickListener{
  Context context;
  private NoticeDialogListener listener;
  //對(duì)話(huà)框事件監(jiān)聽(tīng)接口，用于處理回調(diào)點(diǎn)擊事件
  public interface NoticeDialogListener {
    public void onClick(View view);
  }  
  public NoticeDialog(Context context) {
    super(context);
    // TODO Auto-generated constructor stub
    this.context = context;
  }
  public NoticeDialog(Context context,int theme){
    super(context, theme);
    this.context = context;
  }
  public NoticeDialog(Context context,int theme,NoticeDialogListener listener){
    super(context, theme);
    this.context = context;
    this.listener = listener;
  }
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    TextView enter = (TextView)findViewById(R.id.dialog_enter);//確定控件
    TextView cancel = (TextView)findViewById(R.id.dialog_cancle);//取消控件
    if(enter != null && cancel != null){//如果是不帶確認(rèn)選擇框，不做事件監(jiān)聽(tīng)操作
      enter.setOnClickListener(this);
      cancel.setOnClickListener(this);
      enter.requestFocus();
    }
   
  }
  @Override
  public void onClick(View v) {
    // TODO Auto-generated method stub
    listener.onClick(v);
  }
}

2.對(duì)應(yīng)上面三個(gè)效果，添加不同的xml布局。
（1）帶選擇確認(rèn)框的提示dialog_notice_choise.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="652dp"
  android:layout_height="352dp"
  >
  <LinearLayout
     android:layout_width="500dp"
     android:layout_height="200dp"
    android:layout_marginLeft="76dp"
    android:layout_marginTop="76dp"
    android:orientation="vertical"
    android:background="@drawable/tck01">
    <LinearLayout
       android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_marginTop="5dp"
      android:layout_marginLeft="10dp"
       
      >
      <TextView
      android:textSize="26sp"
       android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:textColor="@color/dialog_title"
      android:text="@string/dialog_title"
         android:focusable="false"
      />
    </LinearLayout>
     
    <LinearLayout
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_marginTop="40dp"
      android:gravity="center"
      >  
      
       <TextView
      android:id="@+id/notice_value"
      android:textSize="32sp"
      android:layout_marginLeft="10dp"
       android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:textColor="@color/dialog_content"
      android:text="@string/dialog_uninstall"
        android:focusable="false"
      />
      </LinearLayout>
    <LinearLayout
      android:layout_width="fill_parent"
      android:layout_height="44dp"
      android:layout_marginTop="35dp"
      android:layout_marginLeft="4dp"
      >  
      <TextView
        android:id="@+id/dialog_enter"
        android:textSize="25sp"
         android:layout_width="246dp"
      android:layout_height="fill_parent"
      android:text="@string/dialog_enter"
      android:gravity="center"
      android:textColor="@drawable/app_manager_dialog_textcolor"
      android:background="@drawable/app_manager_dialog_btn_color"
      android:focusable="true"
        />
      <TextView
        android:id="@+id/dialog_cancle"
         android:textSize="25sp"
         android:layout_width="246dp"
      android:layout_height="fill_parent"
       android:text="@string/dialog_cancel"
       android:gravity="center"
        android:textColor="@drawable/app_manager_dialog_textcolor"
         android:background="@drawable/app_manager_dialog_btn_color"
          android:focusable="true"
        />
      </LinearLayout>
       
    </LinearLayout>
</LinearLayout>

（2）圖片+文字的提示dialog_notice_ing.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="652dp"
  android:layout_height="352dp"
  >
  <LinearLayout
     android:layout_width="500dp"
     android:layout_height="200dp"
    android:layout_marginLeft="76dp"
       android:layout_marginTop="76dp"
    android:orientation="vertical"
    android:background="@drawable/tck01">
    <LinearLayout
       android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_marginTop="5dp"
      android:layout_marginLeft="10dp"
       
      >
      <TextView
      android:textSize="26sp"
       android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:textColor="@color/dialog_title"
      android:text="@string/dialog_title"
      />
    </LinearLayout>
     
    <LinearLayout
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_marginTop="50dp"
       android:gravity="center"
      >  
      <ImageView
         android:layout_width="38dp"
         android:layout_height="42dp"
        android:src="@drawable/uninstall_icon"/>
       <TextView
         android:id="@+id/dialog_in_msg"
      android:textSize="32sp"
      android:layout_marginLeft="10dp"
       android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:textColor="@color/dialog_content"
      android:text="@string/dialog_uninstall_in"
      />
      </LinearLayout>
       
    </LinearLayout>
</LinearLayout>

（3）圖片+圖片dialog_notice_finish.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="652dp"
  android:layout_height="352dp"
  >
  <LinearLayout
     android:layout_width="500dp"
     android:layout_height="200dp"
    android:layout_marginLeft="76dp"
       android:layout_marginTop="76dp"
    android:orientation="vertical"
    android:background="@drawable/tck01">
    <LinearLayout
       android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_marginTop="5dp"
      android:layout_marginLeft="10dp"
       
      >
      <TextView
      android:textSize="26sp"
       android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:textColor="@color/dialog_title"
      android:text="@string/dialog_title"
      />
    </LinearLayout>
     
    <LinearLayout
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_marginTop="40dp"
       android:gravity="center"
      >  
      <ImageView
         android:layout_width="66dp"
         android:layout_height="67dp"
        android:src="@drawable/cg"/>
       <ImageView
      android:id="@+id/dialog_finish_img"
      android:layout_marginLeft="20dp"
       android:layout_width="165dp"
         android:layout_height="36dp"
        android:src="@drawable/uninstall_ok"
      />
      </LinearLayout>
       
    </LinearLayout>
</LinearLayout>

3.在MainActivity實(shí)現(xiàn)對(duì)自定義對(duì)話(huà)框的添加顯示。
MainActivity.java，在進(jìn)行對(duì)話(huà)框切換顯示的時(shí)候，只需要設(shè)置不同的xml配置文件就行了。（注意：NoticeDialog里面的構(gòu)造方法的context參數(shù)只能是XXXActivity.this，不能是通過(guò)getApplicationContext獲取的context對(duì)象）

package com.zlc.dialog;
 
 
import java.util.Timer;
import java.util.TimerTask;
 
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.View;
 
import com.zlc.dialog.NoticeDialog.NoticeDialogListener;
 
public class MainActivity extends Activity {
  private Context context;
  private NoticeDialog notiDialog;
  int count = 0;
  Handler handler;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    context = getApplicationContext();
    notiDialog = new NoticeDialog(MainActivity.this,
        R.style.NoticeDialog, new NoticeDialogListener() {
      @Override
      public void onClick(View view) {
        try {
          if(view.getId() == R.id.dialog_enter){
            notiDialog.dismiss();
            //TODO 購(gòu)買(mǎi)
          }
          notiDialog.dismiss();
        } catch (Exception e) {
          e.printStackTrace();
        }
      }
    });
    notiDialog.setContentView(R.layout.dialog_notice_choise);
    notiDialog.show();
    Timer timer = new Timer();
    handler = new Myhandler();
     
    timer.schedule(new TimerTask() {
      @Override
      public void run() {
        // TODO Auto-generated method stub
        count = count % 4;
        notiDialog.cancel();
        handler.sendEmptyMessage(count);
        count ++;
      }
    }, 3000, 3000);
  }
  private class Myhandler extends Handler{
    @Override
    public void handleMessage(Message msg) {
      // TODO Auto-generated method stub
      switch (msg.what) {
      case 0:
        notiDialog.setContentView(R.layout.dialog_notice_ing);
        break;
      case 1:
        notiDialog.setContentView(R.layout.dialog_notice_finish);
        break;
      case 2:
        notiDialog.setContentView(R.layout.dialog_notice_choise);
        break;
      default:
        break;
      }
      notiDialog.show();
    }
  }
 
}

您可能感興趣的文章: