PopuWindow實(shí)現(xiàn)下拉列表

前言

之前講過(guò)一篇關(guān)于PopuWindow的基本使用的文章，想了解的同學(xué)可以參考
PopupWindow的基本使用
其實(shí)，下拉列表Spanner(不知道控件拼寫(xiě)是否正確)就能實(shí)現(xiàn)，但是基于ui美化方面的考慮，用popuwindow實(shí)現(xiàn)是一個(gè)不錯(cuò)的選擇，今天就來(lái)講講PopuWindow實(shí)現(xiàn)下拉列表的具體實(shí)現(xiàn)吧。

正文

文章可能會(huì)有點(diǎn)長(zhǎng)，大家將就著看吧。先上波效果圖才是厚道的：

1.gif

下面開(kāi)始正式講解。
基礎(chǔ)依賴，由于下拉列表是用RecycleView實(shí)現(xiàn)，然后控件初始化用到ButterKnife，所以要在app的gradle中添加相關(guān)依賴：

 //RecycleView
    compile 'com.android.support:recyclerview-v7:25.2.0'
    //butterKnife
    compile 'com.jakewharton:butterknife:8.5.1'
    //這條千萬(wàn)不能忘記!!
    annotationProcessor 'com.jakewharton:butterknife-compiler:8.5.1'

第一步，不言而喻，肯定是上BasePopupWindow代碼：

/***
 * PopupWindow基類
 * 
 * @author pei
 * @version 1.0
 * @cretae 2016-7-21
 * @注：若要popwindow點(diǎn)擊外部消失，則設(shè)置 this.setFocusable(true)
 *     若要popwindow點(diǎn)擊外部不消失，不做setFocusable設(shè)置，也不要設(shè)置成this.setFocusable(false)
 * 
 */
public abstract class BasePopupWindow extends PopupWindow {

    protected View mLayoutView;
    protected int mLayoutId;
    protected Context mContext;
    protected int mWidth;
    protected int mHeight;

    public BasePopupWindow(int width, int height, int layoutId, Context context) {
        this.mWidth = width;
        this.mHeight = height;
        this.mLayoutId = layoutId;
        this.mContext = context;
        mLayoutView = LayoutInflater.from(context).inflate(mLayoutId, null);
        setWindow();
    }

    /** PopupWindow基本設(shè)置 **/
    protected void setWindow() {
        this.setContentView(mLayoutView);
        this.setWidth(mWidth);
        this.setHeight(mHeight);
        // this.setFocusable(true);// 可點(diǎn)擊
        // 實(shí)例化一個(gè)ColorDrawable顏色為半透明(半透明遮罩顏色代碼#66000000)
        ColorDrawable dw = new ColorDrawable(Color.TRANSPARENT);
        this.setBackgroundDrawable(dw);
    }

    /** PopupWindow背景設(shè)置 **/
    protected void setBackground(int color) {
        // 實(shí)例化一個(gè)ColorDrawable顏色為半透明
        ColorDrawable dw = new ColorDrawable(color);
        this.setBackgroundDrawable(dw);
    }

    protected abstract void initView();
    protected abstract void initData();
    protected abstract void setListener();

    /** PopupWindow點(diǎn)擊間隙處理，根據(jù)實(shí)際情況重寫(xiě) **/
    protected void onTouchdimiss() {
        // mMenuView添加OnTouchListener監(jiān)聽(tīng)判斷獲取觸屏位置如果在選擇框外面則銷(xiāo)毀彈出框
        mLayoutView.setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent event) {
//              int height = mLayoutView.getTop();
//              int y = (int) event.getY();
//              if (event.getAction() == MotionEvent.ACTION_UP) {
//                  if (y < height) {
//                      dismiss();
//                  }
//              }
                return false;
            }
        });
    }

    /**
     * 顯示在控件正上方
     * 
     * @param view
     *            依賴的控件
     * @param marginDp
     *            設(shè)置的間距(直接寫(xiě)數(shù)字即可，已經(jīng)做過(guò)dp2px轉(zhuǎn)換)
     */
    public void showAtLocationTop(View view, float marginDp) {
        mLayoutView.measure(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED);
        int popupWidth = mLayoutView.getMeasuredWidth();
        int popupHeight = mLayoutView.getMeasuredHeight();
        int[] location = new int[2];
        view.getLocationOnScreen(location);
        showAtLocation(view, Gravity.NO_GRAVITY, (location[0] + view.getWidth() / 2) - popupWidth / 2, location[1] - popupHeight - dp2px(marginDp));
        update();
    }

    /**
     * 顯示在控件正下方
     * 
     * @param view
     *            依賴的控件
     * @param marginDp
     *            設(shè)置的間距(直接寫(xiě)數(shù)字即可，已經(jīng)做過(guò)dp2px轉(zhuǎn)換)
     */
    public void showAtLocationGravityBottom(View view, float marginDp) {
        mLayoutView.measure(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED);
        int popupWidth = mLayoutView.getMeasuredWidth();
        int popupHeight = mLayoutView.getMeasuredHeight();
        int[] location = new int[2];
        view.getLocationOnScreen(location);
        showAtLocation(view, Gravity.NO_GRAVITY, (location[0]+view.getWidth()/2)-popupWidth/2,
                location[1]+view.getHeight()+dp2px(marginDp));
        update();
    }

    /**顯示在控件下方
     *
     * @param view 依賴的控件
     * @param marginDp  設(shè)置的間距(直接寫(xiě)數(shù)字即可，已經(jīng)做過(guò)dp2px轉(zhuǎn)換)
     */
    public void showAtLocationBottom(View view, float marginDp){
        showAsDropDown(view, 0, dp2px(marginDp));
        update();
    }


    /**
     * 顯示在控件左方
     * 
     * @param view
     *            依賴的控件
     * @param marginDp
     *            設(shè)置的間距(直接寫(xiě)數(shù)字即可，已經(jīng)做過(guò)dp2px轉(zhuǎn)換)
     */
    public void showAtLocationLeft(View view, float marginDp) {
        mLayoutView.measure(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED);
        int popupWidth = mLayoutView.getMeasuredWidth();
        int popupHeight = mLayoutView.getMeasuredHeight();
        int[] location = new int[2];
        view.getLocationOnScreen(location);
        showAtLocation(view, Gravity.NO_GRAVITY, location[0] - popupWidth - dp2px(marginDp), (location[1] + view.getHeight() / 2) - popupHeight / 2);
        update();
    }

    /**
     * 顯示在控件右方
     * 
     * @param view
     *            依賴的控件
     * @param marginDp
     *            設(shè)置的間距(直接寫(xiě)數(shù)字即可，已經(jīng)做過(guò)dp2px轉(zhuǎn)換)
     */
    public void showAtLocationRight(View view, float marginDp) {
        mLayoutView.measure(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED);
        int popupWidth = mLayoutView.getMeasuredWidth();
        int popupHeight = mLayoutView.getMeasuredHeight();
        int[] location = new int[2];
        view.getLocationOnScreen(location);
        showAtLocation(view, Gravity.NO_GRAVITY, location[0] + view.getWidth() + dp2px(marginDp), (location[1] + view.getHeight() / 2) - popupHeight / 2);
        update();
    }

    /** dp轉(zhuǎn)px **/
    private int dp2px(float dpVal) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpVal, mContext.getResources().getDisplayMetrics());
    }

    /** 通過(guò)id獲得view **/
    @SuppressWarnings("unchecked")
    protected <T extends View> T getView(int viewId) {
        View view = null;
        if (mLayoutView == null) {
            mLayoutView = LayoutInflater.from(mContext).inflate(mLayoutId, null);
        }
        view = mLayoutView.findViewById(viewId);
        return (T) view;
    }

}

第二步，寫(xiě)一個(gè)OrderPop繼承于BasePopupWindow：

/**
 * Instruction:下拉列表Pop
 * <p>
 * Author:pei
 * Date: 2017/6/28
 * Description:
 */


public class OrderPop extends BasePopupWindow{

    private RecyclerView mRecyclerView;
    private List<String>mDatas;
    private ManagerPopuAdapter<String> managerPopuAdapter;

    public OrderPop(Context context, List<String>datas) {
        super(ScreenUtil.dp2px(100,context), ScreenUtil.dp2px(150,context), R.layout.pop_order, context);
        this.mDatas=datas;

        initView();
        initData();
        setListener();
    }

    @Override
    protected void initView() {
        mRecyclerView=getView(R.id.recycler_view);
    }

    @Override
    protected void initData() {
        setFocusable(true);
        setAnimationStyle(R.style.popuwindow_up_style);//popuwindow顯示隱藏的動(dòng)畫(huà)

        mRecyclerView.setHasFixedSize(true);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(mContext));
        managerPopuAdapter = new ManagerPopuAdapter<String>(mContext, mDatas);
        mRecyclerView.setAdapter(managerPopuAdapter);
    }

    @Override
    protected void setListener(){

    }

    public ManagerPopuAdapter getAdapter(){
        return managerPopuAdapter;
    }

    public void notifyDataSetChanged(){
        if(managerPopuAdapter!=null){
            managerPopuAdapter.notifyDataSetChanged();
        }
    }

    public void setCurrentIndex(int position){
        if(managerPopuAdapter!=null){
            managerPopuAdapter.setIndex(position);
        }
    }
}

OrderPop類中涉及到的內(nèi)容挺多，以下將細(xì)細(xì)講解。
1.--- 聲明中涉及到RecycleView的一個(gè)適配器ManagerPopuAdapter,其代碼如下:

/**
 * Instruction: Orderpop的適配器
 * <p>
 * Author:pei
 * Date: 2017/6/29
 * Description:
 */


public class ManagerPopuAdapter<T> extends RecyclerView.Adapter {

    protected Context mContext;
    protected View mLayoutView;
    protected List<T> mData;
    private ViewHolder mViewHolder;
    protected OnRecyclerItemClickListener mOnRecyclerItemClickListener;

    private int mIndex;

    public void setOnRecyclerItemClickListener(OnRecyclerItemClickListener onRecyclerItemClickListener) {
        this.mOnRecyclerItemClickListener = onRecyclerItemClickListener;
    }

    public ManagerPopuAdapter(Context context, List<T> data) {
        this.mContext = context;
        this.mData = data;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        //注：不可使用view=LayoutInflater.from(mContext).inflate(R.layout.item_layout，null);不然會(huì)報(bào)錯(cuò)
        mLayoutView = LayoutInflater.from(mContext).inflate(R.layout.item_popu_order_layout, parent, false);
        return new ViewHolder(mLayoutView);
    }

    @Override
    public int getItemViewType(int position) {
        return super.getItemViewType(position);
    }

    @Override
    public int getItemCount() {
        return mData == null ? 0 : mData.size();
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        mViewHolder = ((ViewHolder) holder);

        initData(position);
        setListener(position);
    }

    private void initData(int position) {
        String content =mData.get(position).toString();
        mViewHolder.tvContent.setText(content);

        if(mIndex==position){
            mViewHolder.tvContent.setSelected(true);
        }else{
            mViewHolder.tvContent.setSelected(false);
        }

    }

    private void setListener(final int position) {
        mViewHolder.tvContent.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mOnRecyclerItemClickListener != null) {
                    mOnRecyclerItemClickListener.onRecyclerClick(position);
                }
            }
        });
    }

    public void setIndex(int index){
        this.mIndex=index;
    }

    class ViewHolder extends RecyclerView.ViewHolder {

        TextView tvContent;

        public ViewHolder(View view) {
            super(view);
            tvContent=(TextView)view.findViewById(R.id.tv_content);
        }
    }

    public interface OnRecyclerItemClickListener {
        void onRecyclerClick(int position);
    }
}

2.--- ManagerPopuAdapter.java對(duì)應(yīng)的layout----- item_popu_order_layout.xml代碼：

<?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="wrap_content"
    android:layout_marginTop="3dp"
    android:layout_marginBottom="3dp">

    <TextView
        android:id="@+id/tv_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:lineSpacingExtra="1dp"
        android:lineSpacingMultiplier="1.0"
        android:layout_marginLeft="2dp"
        android:layout_marginRight="2dp"
        android:padding="3dp"
        android:background="@drawable/manager_fragment_popu_bg"
        android:textColor="@drawable/text_color_bg"
        android:textSize="12sp"/>

</LinearLayout>

3.--- item_popu_order_layout.xml中android:background="@drawable/manager_fragment_popu_bg"對(duì)應(yīng)的drawable文件為：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/manager_fragment_popu_pressed" android:state_selected="true" />
    <item android:drawable="@drawable/manager_fragment_popu_normal" android:state_selected="false"/>
</selector>

manager_fragment_popu_pressed和manager_fragment_popu_normal對(duì)應(yīng)的其實(shí)都是純顏色xml文件。
manager_fragment_popu_pressed.xml代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="@color/color_f5cc1d"></solid>
</shape>

manager_fragment_popu_normal.xml代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="@color/transparent"></solid>
</shape>

也許有的同學(xué)會(huì)問(wèn)android:background="@drawable/manager_fragment_popu_bg文件中為什惡魔不直接用color屬性設(shè)置背景切換，而要用color寫(xiě)個(gè)drawable供調(diào)用，其實(shí)我一開(kāi)始也是這樣弄的，無(wú)奈報(bào)錯(cuò)，具體原因不詳，知道的同學(xué)可以回復(fù)下，此處不做重點(diǎn)。

4.--- item_popu_order_layout.xml中android:textColor="@drawable/text_color_bg"對(duì)應(yīng)的drawable文件如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/color_ff5b0a" android:state_selected="true"/>
    <item android:color="@color/black" android:state_selected="false"/>
</selector>

5.---講講OrderPop的構(gòu)造函數(shù)

 public OrderPop(Context context, List<String>datas) {
        super(ScreenUtil.dp2px(100,context), ScreenUtil.dp2px(150,context), R.layout.pop_order, context);
        this.mDatas=datas;

        initView();
        initData();
        setListener();
    }

這里我其實(shí)是圖方便，所以直接傳了個(gè)固定寬度 ScreenUtil.dp2px(100,context) 進(jìn)去了，實(shí)際開(kāi)發(fā)中因?yàn)槭屈c(diǎn)擊某個(gè)控件然后在控件下面顯示出來(lái)，那么應(yīng)該傳那個(gè)控件的寬度，至于怎么在MainActivity的oncreate方法中獲取控件寬度，大家可以看
android獲取控件寬高
這里就不廢話了。

6.---OrderPop的layout布局pop_order.xml代碼如下：

<?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:background="@color/color_c0c0c0">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical"
        android:scrollbarThumbVertical="@color/blue"
        android:scrollbarStyle="outsideOverlay"/>

</LinearLayout>

其中，android:scrollbars="vertical"是設(shè)置滾動(dòng)條方向，android:scrollbarThumbVertical="@color/blue"是設(shè)置滾動(dòng)條顏色，android:scrollbarStyle="outsideOverlay"設(shè)置滾動(dòng)條樣式

7.---講講OrderPop的顯隱動(dòng)畫(huà)問(wèn)題
在OrderPop類中的initData()方法中涉及到這樣一行代碼：

setAnimationStyle(R.style.popuwindow_up_style);//popuwindow顯示隱藏的動(dòng)畫(huà)

涉及到popuwindow的顯隱動(dòng)畫(huà)問(wèn)題，大家可以參考的前言中提到的popuwindow的基本使用文章，這里就不廢話了。

第三步，OrderPop寫(xiě)好了，就該看看在MainActivity中是怎么調(diào)用的了，貼出MainActivity的代碼：

/**
 * Created by Admin on 2017/5/19.
 */

public class MainActivity extends BaseActivity implements View.OnClickListener{

    @BindView(R.id.tv_order)
    TextView mTvOrder;

    private static final int DEFAULT_INDEX=0;
    private List<String> mOrderList=new ArrayList<>();
    private OrderPop mOrderPop;

    @Override
    protected int getContentViewId() {
        return R.layout.activity_main;
    }

    @Override
    protected void initData() {
        initOrderTextBar();
    }

    /**訂單列表**/
    private void initOrderTextBar(){
        mOrderList.add("野蠻人");
        mOrderList.add("圣騎士");
        mOrderList.add("亞馬遜");
        mOrderList.add("死靈法師");
        mOrderList.add("法師");
        mOrderList.add("德魯伊");
        mOrderList.add("刺客");
        mOrderPop=new OrderPop(mContext,mOrderList);
        setBarContent(mTvOrder,mOrderList,DEFAULT_INDEX);

        mOrderPop.setOnDismissListener(new PopupWindow.OnDismissListener() {
            @Override
            public void onDismiss(){
                mTvOrder.setSelected(false);
            }
        });
        //mOrderPop項(xiàng)點(diǎn)擊事件
        mOrderPop.getAdapter().setOnRecyclerItemClickListener(new ManagerPopuAdapter.OnRecyclerItemClickListener() {
            @Override
            public void onRecyclerClick(int position) {
                showShortToast(mOrderList.get(position));
                //更新mTvOrder顯示內(nèi)容
                setBarContent(mTvOrder,mOrderList,position);
                //更新mOrderPop視圖選中背景
                mOrderPop.setCurrentIndex(position);
                mOrderPop.notifyDataSetChanged();
            }
        });
    }


    @Override
    protected void setListener() {
        mTvOrder.setOnClickListener(this);
    }

    @Nullable
    @Override
    protected BasePresenter getPresenter() {
        return null;
    }

    @Override
    protected void onDestroy(){
        super.onDestroy();
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.tv_order:
                if(mOrderPop!=null&&!mOrderPop.isShowing()){
                    mTvOrder.setSelected(true);//控制mTvOrder變色
                    mOrderPop.showAtLocationGravityBottom(mTvOrder,3);//顯示mOrderPop
                    //更新mOrderPop視圖選中背景
                    mOrderPop.setCurrentIndex(getIndexByTag(mTvOrder));
                    mOrderPop.notifyDataSetChanged();
                }
                break;
            default:
                break;
        }
    }

    private void setBarContent(TextView textView,List<String>data,int position){
        textView.setTag(position);
        textView.setText(data.get(position).toString());
    }

    private int getIndexByTag(TextView textView){
        int index=DEFAULT_INDEX;
        Object obj=textView.getTag();
        if(obj!=null){
            try {
                index=Integer.valueOf(obj.toString());
            } catch (NumberFormatException e) {
                e.printStackTrace();
            }
        }
        return index;
    }
}

MainActivity對(duì)應(yīng)的布局activity_main.xml代碼如下：

<LinearLayout 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"
    android:background="@color/white"
    android:gravity="center"
    android:orientation="vertical">


    <TextView
        android:id="@+id/tv_order"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:lineSpacingExtra="1dp"
        android:lineSpacingMultiplier="1.0"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:drawableRight="@drawable/manager_fragment_order_bg"
        android:textColor="@drawable/text_color_bg"
        android:textSize="14sp"/>
</LinearLayout>

android:drawableRight="@drawable/manager_fragment_order_bg"中manager_fragment_order_bg.xml對(duì)應(yīng)的代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/ic_drop_up" android:state_selected="true" />
    <item android:drawable="@mipmap/ic_drop_down" android:state_selected="false"/>
</selector>

ic_drop_up和ic_drop_down對(duì)應(yīng)的分別是一張箭頭向上的圖片和一張箭頭向下的圖片，這里就不多說(shuō)了。
android:textColor="@drawable/text_color_bg"的話是設(shè)置文字選中和未被選中時(shí)顯示的顏色，在上面的第二步第四條已經(jīng)講過(guò)了，這里就不說(shuō)了。

ok，整個(gè)實(shí)現(xiàn)過(guò)程大致就是這樣的。今天關(guān)于PopuWindow實(shí)現(xiàn)下拉列表的知識(shí)就講到這里了，謝謝誒。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,157評(píng)論 25贊 708
  • afinalAfinal是一個(gè)android的ioc，orm框架 https://github.com/yangf...
    passiontim閱讀 15,889評(píng)論 2贊 45
  • ￥開(kāi)啟￥ 【iAPP實(shí)現(xiàn)進(jìn)入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開(kāi)一個(gè)線程，因...
    小菜c閱讀 7,358評(píng)論 0贊 17
  • 下雨了，才知道誰(shuí)會(huì)給你送傘；遇事了，才知道誰(shuí)對(duì)你真心。有些人，只會(huì)錦上添花，不會(huì)雪中送炭；有些人，只會(huì)火上澆油，不...
    心羽暖姐姐閱讀 1,280評(píng)論 0贊 0
  • 課間十分鐘，給孩子們每人發(fā)一個(gè)毽子讓他們踢，看著他們的動(dòng)作笨拙又可愛(ài)，一時(shí)興起，和孩子們一起踢...... 我的表...
    李小五閱讀 478評(píng)論 0贊 1

友情鏈接更多精彩內(nèi)容