2. 程式人生 > >簡單實現自定義Dialog彈窗

簡單實現自定義Dialog彈窗

阿新 • • 發佈：2019-01-05

前言

這幾天都在學習Web端的技術點，對於Android這麼好玩的技術，那麼也不能丟落。時間擠一擠，說不定還能擠出一條溝，呵呵..這幾天看到小夥伴們在專案中在為dialog相關的問題不知所措，看了大概的需求，都涉及到自定義dialog，其實也蠻簡單的，在日常開發中遇到自定義dialog的需求還是蠻多的，所以擠點時間出來練練手先.

Ⅰ.簡述

看看小夥伴的效果圖

效果圖1

這裡寫圖片描述

效果圖2

這裡寫圖片描述

看上面的效果圖，應該不是很難吧，Android系統提供的dialog往往都不滿足產品的需求，所以就需要自定義了，那麼先簡單說說怎麼實現的吧！主要就是繼承dialog類，然後給其設定佈局，再進行點選事件的回撥等等

Ⅱ.自定義Dialog實現

以上面圖1為效果圖，首頁先來個佈局，那麼下面簡單看下佈局吧


    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
 
>

        <RelativeLayout
            android:id="@+id/container"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true">

            <TextView
                android:id="@+id/bg"
                android:layout_width
 
="250dp"
                android:layout_height="160dp"
                android:background="#c9f4fe"
                android:layout_below="@+id/iv_success"
                android:text="成功領取優惠劵"
                android:gravity="bottom|center"
                android:textColor="#0096ff"
                android:textSize="16sp"/>

            <ImageView
                android:id="@+id/iv_success"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/receive_success"
                android:layout_centerInParent="true"/>

        </RelativeLayout>


        <Button
            android:id="@+id/btn_cancel"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:background="@drawable/receive_success_close"
            android:layout_alignRight="@id/container"
            android:layout_marginTop="150dp" />


        <Button
            android:id="@+id/share"
            android:layout_width="250dp"
            android:layout_height="60dp"
            android:background="#0096ff"
            android:layout_below="@id/container"
            android:layout_centerHorizontal="true"
            android:text="立即分享"
            android:textSize="18sp"
            android:textColor="#ffffff"/>

    </RelativeLayout>

本來接著是要繼承dialog並給其設定上面的佈局，但是考慮到專案中對dialog彈窗的使用頻率還是挺高的，所以簡單抽取dialog，以抽象類的方式提供給其他dialog去繼承，那麼下面看看抽取的BaseDialog的程式碼：


    /**
     * Created by wyk on 2016/12/28.
     */
    public abstract class BaseDialog extends Dialog implements View.OnClickListener{

        public Context mContext;

        public BaseDialog(Context context){
            super(context);
            this.mContext = context;
            initView();
        }

        public BaseDialog(Context context, int themeResId){
            super(context,themeResId);
            this.mContext = context;
            initView();
        }

        public abstract void initView();
        public abstract void onDialogClick(View v);

        /** 查詢子控制元件，省強轉 */
        public <T> T findView(int id) {
            T view = (T) findViewById(id);
            return view;
        }

        public void showToast(String text) {    //Toast
            //tell user
        }

        @Override
        public void onClick(View v) {           //點選事件
            onDialogClick(v);
        }
    }

接著就來實現自定義的dialog，自定義的dialog繼承自BaseDialog，看下面程式碼:


    /**
     * Created by wyk on 2016/12/28.
     */
    public class MyDialog extends BaseDialog{
        //dialog對應佈局上的點選事件，該介面進行回撥
        private OnCallResult mOnCallResult;
        private Button mBtnCancel;
        private Button mBtnShare;

        public MyDialog(Context context) {
            super(context);
            initDate();
            initListener();
        }

        /** 設定事件的回撥介面*/
        public void setCallBackListen(OnCallResult onCallResult){
            mOnCallResult = onCallResult;
        }

        /**該方法提供於操作佈局控制元件*/
        @Override
        public void initView() {
            Window window = getWindow();
            window.requestFeature(Window.FEATURE_NO_TITLE);
            window.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
            setContentView(R.layout.page_dialog);

            WindowManager.LayoutParams params = window.getAttributes();
            params.gravity = Gravity.CENTER;
            //這裡是設定dialog彈出、隱藏的動畫效果
            //params.windowAnimations = R.style.MyDialogAnimation;      


            mBtnCancel = findView(R.id.btn_cancel);
            mBtnShare = findView(R.id.share);
        }
        /**該方法提供於操作資料*/
        public void initDate() {
        }
        /**該方法提供於設定監聽事件*/
        public void initListener() {
            mBtnCancel.setOnClickListener(this);
            mBtnShare.setOnClickListener(this);
        }
        /**佈局的監聽函式*/
        @Override
        public void onDialogClick(View v) { 
            if(mOnCallResult!=null){
                switch (v.getId()) {
                    case R.id.btn_cancel:               //取消監聽
                       // MyDialog.this.cancel();
                        mOnCallResult.onCancel();
                        break;
                    case R.id.share:                    //分享監聽
                        mOnCallResult.onShare();
                        break;
                    default:
                        break;
                }
            }
        }
    }

上面程式碼的OnCallResult物件，註釋是回撥的介面，可是OnCallResult長怎樣的呢??看下面程式碼

    /**
     * Created by WYK on 2016/12/28.
     */
    public interface OnCallResult {

        void onCancel();
        void onShare();
    }

Ⅲ.效果展示

上面的程式碼邏輯應該還是比較清晰的，都做了註釋說明，力求做到簡單易懂，接著使用上面自定義的MyDialog，看看效果如何。為了實現方便，就在MainActivity的佈局上新增一個按鈕，點選該按鈕彈出MyDialog，然後可點選取消dialog等,看程式碼：

    /**
     * Created by wyk on 2016/12/28.
     */
    public class MainActivity extends AppCompatActivity {
        private Button mShowDialog;
        private MyDialog mDialog;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            initView();
            initListener();
        }

        /**該方法提供於操作佈局控制元件*/
        private void initView() {
            mShowDialog = (Button) findViewById(R.id.btn_show_dialog);
            mDialog = new MyDialog(this);
        }

        /**該方法提供於設定監聽事件*/
        private void initListener() {
            mDialog.setCallBackListen(new OnCallResult() {
                @Override
                public void onCancel() {
                    mDialog.cancel();
                }
                @Override
                public void onShare() {
                    Toast.makeText(MainActivity.this, "Share Success!!!", Toast.LENGTH_SHORT).show();
                    mDialog.show();
                }
            });
            mShowDialog.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    mDialog.show();
                }
            });
        }

        @Override
        protected void onDestroy() {        
            super.onDestroy();
            if(mDialog!=null){              //防止突發狀態造成 窗體洩露
                mDialog.cancel();           
                mDialog = null;
            }
        }
    }

下面是MainActivity的佈局,順便也貼上

    <!--activity_main佈局-->
    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.wyk.dialogtest.MainActivity">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="show dialog"
            android:id="@+id/btn_show_dialog"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="173dp" />
    </RelativeLayout>

上面的操作基本可以展示MyDialog，也可以點選取消/點選進行分享(分享程式碼略)，佈局和程式碼都很簡單吧，也沒什麼邏輯，就這樣完成了，是不是挺So easy 的。在專案開發中，dialog的坑還是蠻多的，比如上面MainActivity標識出來的窗體洩露，找時間再寫篇文章總結下遇到的坑。還有1點沒說的，應該看到上面的BaseDialog裡的 “params.windowAnimations = R.style.MyDialogAnimation; “這一行註釋的程式碼吧，這個是設定Dialog彈出、隱藏的動畫效果，之前有篇文章已經提到，下面是Dialog動畫效果那篇文章的地址，這裡就不扯了。

最後還是來看看上面程式碼執行的效果圖(佈局醜死咯~~~怪我了)：
這裡寫圖片描述

Ⅳ.總結

  • 1.在瀏覽了Dialog的程式碼，其實針對BaseDialog還可以進一步抽取的，筆者追求實用即可，就不再抽取了

  • 2.針對專案中Dialog的坑，打算之後再寫個文章記錄下，這就當留個空白吧！

  • 3.2016還剩幾天，抓緊時間，別讓心長野草了。

    扯了這麼多，嗚嗚···還是先撤了。

相關推薦

簡單實現自定義Dialog彈窗

前言 這幾天都在學習Web端的技術點，對於Android這麼好玩的技術，那麼也不能丟落。時間擠一擠，說不定還能擠出一條溝，呵呵..這幾天看到小夥伴們在專案中在為dialog相關的問題不知所措，看了大概的需求，都涉及到自定義dialog，其實也蠻簡單的，在

Jquery實現自定義訊息彈窗

當覺得瀏覽器的alert彈框太難看時，就會想動手自行編輯彈框啦，首先在html頁面0的插入彈框div。 寫在body結束標籤前就行了。 <div id="cjy-maskBox"><

自定義Dialog彈窗及軟體盤的隱藏和顯示

1.佈局檔案<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" androi

FlycoDialog 簡單實用的自定義Android彈窗對話方塊之Dialog篇

效果圖鎮樓 FlycoDialog是一款非常棒的彈窗對話方塊處理框架，今天在這裡主要講一下他的自定義彈出對話方塊的功能，這裡以第二幅效果圖為例，圖片已經放在部落格最下方，X號自己隨便找一個東西代替吧。 首先我們還是先新增依賴

[Android] 仿IOS實現自定義Dialog，底部彈窗和中間彈窗工具

用過Android的預設對話方塊的都懂，不管是哪個版本的對話方塊，都醜到爆！就算是Google推崇的Material Design風格的彈窗一樣不好看，基本每款APP都不會去使用預設的對話方塊樣式，他們都有自己的風格，怎樣去改變預設的對話方塊樣式呢？只能自定義了，將系統對話方

自定義web彈窗/層：簡易風格的msg與可拖放的dialog

　　前言 　　做過web專案開發的人對layer彈層元件肯定不陌生，作為layUI的一個重要元件，使用簡單、介面引數豐富，功能健壯，深受廣大開發者的喜愛，作為一個熱（經）愛（常）工（劃）作（水），喜歡鑽研探索技術的程式設計師（狗），我們自己來實現一個web彈窗/層，一窺layer的本源（/手動滑稽臉），進步

JS簡單實現自定義右鍵菜單

ans idt 右鍵 動畫 忘記 span spa round 部分 RT，一個簡單的例子，僅僅講述原理 <div id="menu" style="width: 0;height: 0;background: cadetblue;position: absolu

微信小程序之自定義toast彈窗

pla cnblogs display pan false 返回 頁面 文件 src 微信小程序裏面的自帶彈窗icon只有兩種，success和loading。有時候用戶輸入錯誤的時候想加入一個提醒圖標，也可以使用wx.showToast中的image來添加圖片達到使用自定

微信小程式自定義分享彈窗

效果圖： 多種觸發條件使用同一個彈窗： *.js觸發處： this.setData({ isWrong:true, wrongtap:1, dialogWord:"wrong", wrongDec:"答案錯誤，是否向好友求助？" })  

Spring Security簡單實現自定義退出功能

1.前端頁面寫法 <a href="javascript:;" onclick="logoutBackground()">退出</a> 2.js /** * 退出後臺 */ function logoutBackground() { $.get("/

自定義Dialog彈框和其背景陰影顯示

昨天研究了一下自定義Dialog的彈框，其實要點都是把自定義好的view用setContentView(view)的方法設定進dialog裡，首先我們先看一個簡單的自定義Dialog。 一、寫佈局檔案：custom_dialog_layout.xml(這個佈局就是一個簡單的提示內容，下面有一

Qt自定義按鈕彈窗控制元件

  一直以為做一個按鈕彈窗控制元件很簡單，可做起來發現並不是那麼順利，折騰了挺長時間的，先看下效果： 前言   嘗試過兩種方案，方案一：使用QToolButton控制元件，我們可以自定義一個widget，然後setMenu設定為該widget；方案二：點選一個

vue 小知識總結 ------ 自定義公共彈窗

1 新建彈窗元件檔案 selfToast.vue 主體內容： <!-- template --> <template>     <transition name="main-bg-fade">         <div class=

簡單的自定義dialog並且加入listview

一個簡單的自定義dialog嵌套了listview,當點選了listview的條目時，將選中的資料回傳到相應的activity裡，方便使用。採用的方法是在dialog裡定義了一個介面，需要用到資料的activity實現此介面！程式碼如下： public clas

Android實現自定義dialog

Android自定Dialog 先上效果圖： 1.先在drawable下新建一個drawble resource file，這個檔案用於dialog的圓角背景 <?xml version="1.0" encoding="utf-8"?>

一個簡單的自定義Dialog

在平時的開發中，我們可能時常需要自定義Dialog,比如常見的需求，通知提示使用者的dialog,第二種是從底部彈出的dialog,第三種是帶輸入框的dialog等。下面就是對一個自定義dialog的簡單的封裝。 直接看效果，不會作圖，圖都是網上找的。

android 自定義dialog彈出和消失動畫

自定義dialog視窗，根據座標可隨意設定dialog顯示位置，實現了視窗彈出動畫 Java程式碼： package com.sunxu.org.IndividualityDialog; import android.app.Activity; import and

Ultra-Pull-To-Refresh超簡單實現自定義動畫（二）

前言 接上一篇部落格，Ultra-Pull-To-Refresh超簡單終極實現下拉重新整理、上拉載入 入門實現（一） 上一篇是實現了簡單的自帶的重新整理和載入功能。但是這樣簡單的動畫往往不能滿足我們的需求，所以這一片用一個京東重新整理的例子來實現自定義，就

自定義dialog彈框效果

自定義dialog及動畫效果 通常專案中會用到比較特殊的彈框，則就需要自定義寫一個dialog，需要重新畫個佈局新增到dialog中。這裡就需要自定義一個Dialog類繼承與Dialog。也有可能需要動畫效果來增加UI效果。 直接上程式碼： package com.wuj

簡單實現自定義橫向滾動選擇View

今日科技快訊 昨日有人舉行記者招待會，實名舉報頁遊運營平臺4399大股東蔡文勝涉嫌偷逃國家稅款3.6億元人民幣。舉報人稱4399隱瞞重大事實，意圖欺騙上市。而蔡文勝迴應稱2013