popupWindow自定義(2)

popupWindow自定義(1)
popupWindow自定義(2)
首先看看效果圖：


接著上篇文章的，上次講述了自定義的密碼框發現在時間使用過程中，當點擊物理按鍵返回，密碼框不消失，而是當前的Activity退出了，這次優化了這個bug一些默認的配置封裝起來了，且在使用的時候更加方便。不多說，直接貼代碼：

自定義密碼框：


import android.content.Context;
import android.graphics.drawable.ColorDrawable;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnTouchListener;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.PopupWindow;
import android.widget.TextView;

import com.skypine.skypine.R;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

public class PasswordPopupWindow extends PopupWindow {
    private Context mContext;

    private View                           mMenuView;
    private String                         mStringPassword; //輸入的密碼
    private TextView[]                     mTextViewPsw; // 用數組保存6個TextView
    private GridView                       mGridView; //支付鍵盤布局
    private ArrayList<Map<String, String>> valueList;
    private ImageView                      mImageViewCancel;
    private TextView                       mTextViewForgetPsw;
    private int currentIndex = -1;// 用于記錄當前輸入密碼格位置
    private TextView mTextViewTitle;
    private TextView mTextViewDel;
    private TextView cancelButton;
    private TextView okButton;
    private OnCancelListener cancelListener; //取消

    public PasswordPopupWindow(Context context) {
        super(context);
        mContext = context;
        LayoutInflater inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        mMenuView = inflater.inflate(R.layout.password_dialog, null);

        valueList = new ArrayList<>();
        mTextViewPsw = new TextView[6];
        mImageViewCancel = (ImageView) mMenuView.findViewById(R.id.iv_pay_back);
        mTextViewPsw[0] = (TextView) mMenuView.findViewById(R.id.tv_pass1);
        mTextViewPsw[1] = (TextView) mMenuView.findViewById(R.id.tv_pass2);
        mTextViewPsw[2] = (TextView) mMenuView.findViewById(R.id.tv_pass3);
        mTextViewPsw[3] = (TextView) mMenuView.findViewById(R.id.tv_pass4);
        mTextViewPsw[4] = (TextView) mMenuView.findViewById(R.id.tv_pass5);
        mTextViewPsw[5] = (TextView) mMenuView.findViewById(R.id.tv_pass6);
        mGridView = (GridView) mMenuView.findViewById(R.id.gv_keybord);
        mTextViewTitle = (TextView) mMenuView.findViewById(R.id.tv_pay_title);
        mTextViewForgetPsw = (TextView) mMenuView.findViewById(R.id.tv_pay_forgetPwd);
        /**/
        cancelButton = (TextView) mMenuView.findViewById(R.id.cancelButton);
        okButton = (TextView) mMenuView.findViewById(R.id.okButton);

        setView();
        //取消按鈕
        cancelButton.setOnClickListener(new OnClickListener() {

            public void onClick(View v) {
                //取消
                cancelListener.OnCancel();
                //銷毀彈出框
                dismiss();
            }
        });
    
        //設置SelectPicPopupWindow的View
        this.setContentView(mMenuView);
        //設置SelectPicPopupWindow彈出窗體的寬
        this.setWidth(LayoutParams.FILL_PARENT);
        //設置SelectPicPopupWindow彈出窗體的高
        this.setHeight(LayoutParams.WRAP_CONTENT);
        //設置SelectPicPopupWindow彈出窗體可點擊
        this.setFocusable(true);
        //設置SelectPicPopupWindow彈出窗體動畫效果
        this.setAnimationStyle(R.style.mypopwindow_anim_style);
        //實例化一個ColorDrawable顏色為半透明
        ColorDrawable dw = new ColorDrawable(0xb0000000);
        //設置SelectPicPopupWindow彈出窗體的背景
        this.setBackgroundDrawable(dw);
        //mMenuView添加OnTouchListener監聽判斷獲取觸屏位置如果在選擇框外面則銷毀彈出框
        mMenuView.setOnTouchListener(new OnTouchListener() {

            public boolean onTouch(View v, MotionEvent event) {

                int height = mMenuView.findViewById(R.id.pop_layout).getTop();
                int y = (int) event.getY();
                if (event.getAction() == MotionEvent.ACTION_UP) {
                    if (y < height) {
                        dismiss();
                    }
                }
                return true;
            }
        });

    }

    /*********************
     * 取消
     ******************/
    public interface OnCancelListener {
        public void OnCancel();
    }

    public void setCancelListener(OnCancelListener cancelListener) {
        this.cancelListener = cancelListener;
    }


    // 初始化按鈕上應該顯示的數字

    private void setView() {
        for (int i = 1; i < 13; i++) {
            Map<String, String> map = new HashMap<>();
            if (i < 10) {
                map.put("name", String.valueOf(i));
            } else if (i == 10) {//沒有
                map.put("name", "");
            } else if (i == 11) {//
                map.put("name", String.valueOf(0));
            } else if (i == 12) {
                map.put("name", "");
            } else if (i == 13) {
                map.put("name", " ");
            } else if (i == 14) {
                map.put("name", "");
            }
            valueList.add(map);
        }
        mGridView.setAdapter(adapter);
    }

    public interface OnPasswordInputFinish {
        public void inputFinish();
    }

    /**
     * 設置監聽方法，在第6位輸入完后觸發
     */
    public void setOnFinishInput(final OnPasswordInputFinish pass) {
        mTextViewPsw[5].addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
            }

            @Override
            public void afterTextChanged(Editable s) {
                if (s.toString().length() == 1) {
                    mStringPassword = ""; //每次觸發都要將mStringPassword置空再重新獲取，避免由于輸入刪除再輸入造成混亂
                    for (int i = 0; i < 6; i++) {
                        mStringPassword += mTextViewPsw[i].getText().toString().trim();
                    }
                    pass.inputFinish();//接口中要實現的方法，完成密碼輸入完成后的響應邏輯
                }
            }
        });


    }


    /**
     * 清除所有密碼
     */

    public void clearAll() {
        //        currentIndex= -1;
        //        mTextViewPsw[0].setBackgroundResource(R.drawable.bg_circle_num_pwd);
        //        mTextViewPsw[1].setBackgroundResource(R.drawable.bg_circle_num_pwd);
        //        mTextViewPsw[2] .setBackgroundResource(R.drawable.bg_circle_num_pwd);
        //        mTextViewPsw[3]. setBackgroundResource(R.drawable.bg_circle_num_pwd);
        //        mTextViewPsw[4]. setBackgroundResource(R.drawable.bg_circle_num_pwd);
        //        mTextViewPsw[5].setBackgroundResource(R.drawable.bg_circle_num_pwd);
        //        mTextViewPsw[0].setText("");
        //        mTextViewPsw[1].setText("");
        //        mTextViewPsw[2] .setText("");
        //        mTextViewPsw[3]. setText("");
        //        mTextViewPsw[4]. setText("");
        //        mTextViewPsw[5].setText("");
        currentIndex = 5;

        while (true)
            if (currentIndex - 1 >= -1) { // 判斷是否刪除完畢
                TextView temp = mTextViewPsw[currentIndex--];
                temp.setText("");
                temp.setBackgroundResource(R.drawable.bg_circle_num_pwd);
            } else {
                break;
            }


    }

    /**
     * 獲取輸入的密碼
     */
    public String getPassword() {
        return mStringPassword;
    }

    /**
     * 返回取消支付的ImageView
     */
    public ImageView getCancel() {
        return mImageViewCancel;
    }
    //    /**
    //     * 返回取消
    //     */
    //    public TextView getmTextViewCancel() {
    //        return mTextViewCancel;
    //    }


    /**
     * 返回忘記密碼的TextView
     */
    public TextView getForgetPsw() {
        return mTextViewForgetPsw;
    }

    /**
     * 返回標題的TextView
     */
    public TextView getTitle() {
        return mTextViewTitle;
    }

    /**
     * GridView的適配器
     */
    BaseAdapter adapter = new BaseAdapter() {
        @Override
        public int getCount() {
            return valueList.size();
        }

        @Override
        public Object getItem(int position) {
            return valueList.get(position);
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(final int position, View convertView, ViewGroup parent) {
            ViewHolder holder;
            if (convertView == null) {
                convertView = View.inflate(mContext, R.layout.item_pay_gride, null);
                holder = new ViewHolder();
                holder.btnKey = (Button) convertView.findViewById(R.id.btn_keys);
                convertView.setTag(holder);
            } else {
                holder = (ViewHolder) convertView.getTag();
            }
            holder.btnKey.setText(valueList.get(position).get("name"));
            if (position == 12) {
                holder.btnKey.setText("取消");
            }
            if (position == 14) {
                mTextViewDel = holder.btnKey;
                holder.btnKey.setText("刪除");
            }
            if (position == 9 || position == 11 || position == 13) {
                holder.btnKey.setBackground(null);
                holder.btnKey.setText("");
            }
            okButton.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (currentIndex - 1 >= -1) { // 判斷是否刪除完畢
                        TextView temp = mTextViewPsw[currentIndex--];
                        temp.setText("");
                        temp.setBackgroundResource(R.drawable.bg_circle_num_pwd);
                    }
                }
            });

            holder.btnKey.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (position < 11 && currentIndex != 9 && position != 9) { //點擊0-9按鈕
                        if (currentIndex >= -1 && currentIndex < 5) { //判斷輸入位置
                            TextView temp = mTextViewPsw[++currentIndex];
                            temp.setText(valueList.get(position).get("name"));
                            temp.setBackgroundResource(R.drawable.bg_circle_num_pwd_visiable);
                        }
                    } else {
                        if (position == 14) { //點擊退格鍵
                            if (currentIndex - 1 >= -1) { // 判斷是否刪除完畢
                                TextView temp = mTextViewPsw[currentIndex--];
                                temp.setText("");
                                temp.setBackgroundResource(R.drawable.bg_circle_num_pwd);
                            }
                        }
                        if (position == 12) {
                            //退出
                            cancelListener.OnCancel();
                        }
                    }
                }
            });
            return convertView;
        }
    };

    static class ViewHolder {
        public Button btnKey;
    }

}

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="wrap_content"
                android:gravity="center_horizontal"
                android:orientation="vertical">

    <LinearLayout
        android:id="@+id/pop_layout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center_horizontal"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:orientation="vertical">

            <LinearLayout
                android:id="@+id/ll_main_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="50dp">

                    <ImageView
                        android:id="@+id/iv_pay_back"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerVertical="true"
                        android:layout_marginLeft="10dp"/>

                    <TextView
                        android:id="@+id/tv_pay_title"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerHorizontal="true"
                        android:layout_marginLeft="15dp"
                        android:layout_marginTop="15dp"
                        android:text="@string/pin_id"
                        android:textColor="@color/white"
                        android:textSize="18dp"/>
                </RelativeLayout>

                <!-- 6位密碼框布局，需要一個圓角邊框的shape作為layout的背景 -->
                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="@dimen/dp_15"
                    android:gravity="center"
                    android:orientation="horizontal">
                    <!-- inputType設置隱藏密碼明文
                    textSize設置大一點，否則“點”太小了，不美觀 -->
                    <TextView
                        android:id="@+id/tv_pass1"
                        android:layout_width="@dimen/dp_15"
                        android:layout_height="@dimen/dp_15"
                        android:layout_marginLeft="@dimen/dp_10"
                        android:layout_marginRight="@dimen/dp_10"
                        android:background="@drawable/bg_circle_num_pwd"
                        android:gravity="center"
                        android:inputType="numberPassword"
                        android:paddingBottom="@dimen/dp_5"
                        android:textColor="@color/pwd_gray"
                        android:textSize="12sp"/>


                    <TextView
                        android:id="@+id/tv_pass2"
                        android:layout_width="@dimen/dp_15"
                        android:layout_height="@dimen/dp_15"
                        android:layout_marginLeft="@dimen/dp_10"
                        android:layout_marginRight="@dimen/dp_10"
                        android:background="@drawable/bg_circle_num_pwd"
                        android:gravity="center"
                        android:inputType="numberPassword"
                        android:textColor="@color/pwd_gray"
                        android:textSize="15sp"/>


                    <TextView
                        android:id="@+id/tv_pass3"
                        android:layout_width="@dimen/dp_15"
                        android:layout_height="@dimen/dp_15"
                        android:layout_marginLeft="@dimen/dp_10"
                        android:layout_marginRight="@dimen/dp_10"
                        android:background="@drawable/bg_circle_num_pwd"
                        android:gravity="center"
                        android:inputType="numberPassword"
                        android:textColor="@color/pwd_gray"
                        android:textSize="15sp"/>


                    <TextView
                        android:id="@+id/tv_pass4"
                        android:layout_width="@dimen/dp_15"
                        android:layout_height="@dimen/dp_15"
                        android:layout_marginLeft="@dimen/dp_10"
                        android:layout_marginRight="@dimen/dp_10"
                        android:background="@drawable/bg_circle_num_pwd"
                        android:gravity="center"
                        android:inputType="numberPassword"
                        android:textColor="@color/pwd_gray"
                        android:textSize="15sp"/>


                    <TextView
                        android:id="@+id/tv_pass5"
                        android:layout_width="@dimen/dp_15"
                        android:layout_height="@dimen/dp_15"
                        android:layout_marginLeft="@dimen/dp_10"
                        android:layout_marginRight="@dimen/dp_10"
                        android:background="@drawable/bg_circle_num_pwd"
                        android:gravity="center"
                        android:inputType="numberPassword"
                        android:textColor="@color/pwd_gray"
                        android:textSize="15sp"/>


                    <TextView
                        android:id="@+id/tv_pass6"
                        android:layout_width="@dimen/dp_15"
                        android:layout_height="@dimen/dp_15"
                        android:layout_marginLeft="@dimen/dp_10"
                        android:layout_marginRight="@dimen/dp_10"
                        android:background="@drawable/bg_circle_num_pwd"
                        android:gravity="center"
                        android:inputType="numberPassword"
                        android:textColor="@color/pwd_gray"
                        android:textSize="15sp"/>
                </LinearLayout>

                <TextView
                    android:id="@+id/tv_pay_forgetPwd"
                    android:layout_width="@dimen/dp_20"
                    android:layout_height="@dimen/dp_20"
                    android:textColor="@color/white"
                    android:visibility="gone"/>

            </LinearLayout>
            <!-- 輸入鍵盤 -->
            <GridView
                android:id="@+id/gv_keybord"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:layout_marginTop="@dimen/dp_50"
                android:horizontalSpacing="0.5dp"
                android:numColumns="3"
                android:textColor="@color/colorPrimary"
                android:verticalSpacing="0.5dp"/>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:orientation="horizontal"
                android:padding="@dimen/dp_10">

                <TextView
                    android:id="@+id/cancelButton"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="@dimen/dp_10"
                    android:text="@string/pay_cancle"
                    android:textColor="@color/white"
                    android:textSize="@dimen/sp_15"/>

                <TextView
                    android:id="@+id/okButton"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:layout_gravity="right"
                    android:padding="@dimen/dp_10"
                    android:text="@string/pay_delete"
                    android:textColor="@color/white"
                    android:textSize="@dimen/sp_15"/>
            </RelativeLayout>

        </RelativeLayout>

    </LinearLayout>
</RelativeLayout>

style

  <!--  這個是popwindow -->
    <style name="mypopwindow_anim_style">
        <item name="android:windowEnterAnimation">@anim/popshow_anim</item>
        <!-- 指定顯示的動畫xml -->

        <item name="android:windowExitAnimation">@anim/pophidden_anim</item>
        <!-- 指定消失的動畫xml -->
    </style>

popshow_anim

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="500"
        android:fromYDelta="100%p"
        android:toYDelta="0" />

    <alpha
        android:duration="500"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
</set>

pophidden_anim

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="500"
        android:fromYDelta="0"
        android:toYDelta="50%p" />

    <alpha
        android:duration="500"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />
</set>

如果大家看懂了這個，再也不怕任何自定義的彈框，根據這個原理，可以封裝任意的彈框
比如看看下面類似滴滴打車的搜索頁面可以用PopWindow 實現，可以自己試試。
感謝批評與指導


最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,349評論 25贊 708
  • ￥開啟￥ 【iAPP實現進入界面執行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個線程，因...
    小菜c閱讀 6,524評論 0贊 17
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,245評論 4贊 61
  • 01 一個陰雨綿綿的周末，我正窩在床上刷淘寶，突然聽見有人敲門，問是誰，半天才聽見一個帶著沙啞嗓音、明顯有著哭腔的...
    何初見閱讀 736評論 35贊 29
  • 鮮酒灑滿云端 像被驢血渲染的青麥 暗紫色涌動的風 分不清是黑夜還是黎明 天那邊是什么？ 是充滿藻荇的黃河， 還是水...
    卡貝田閱讀 284評論 1贊 2