Android中PopuWindow实现下拉列表实例

概述前言之前讲过一篇关于PopuWindow的基本使用的文章，想了解的同学可以参考：PopupWindow的基本使用

前言

之前讲过一篇关于PopuWindow的基本使用的文章，想了解的同学可以参考：PopupWindow的基本使用

其实，下拉列表Spanner(不知道控件拼写是否正确)就能实现，但是基于ui美化方面的考虑，用popuwindow实现是一个不错的选择，今天就来讲讲PopuWindow实现下拉列表的具体实现吧。

正文

文章可能会有点长，大家将就着看吧。先上波效果图才是厚道的：

下面开始正式讲解。

基础依赖，由于下拉列表是用RecycleVIEw实现，然后控件初始化用到ButterKnife，所以要在app的gradle中添加相关依赖：

 //RecycleVIEw  compile 'com.androID.support:recyclervIEw-v7:25.2.0'  //butterKnife  compile 'com.jakewharton:butterknife:8.5.1'  //这条千万不能忘记!!  annotationProcessor 'com.jakewharton:butterknife-compiler:8.5.1'

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

/*** * PopupWindow基类 *  * @author pei * @version 1.0 * @cretae 2016-7-21 * @注：若要popwindow点击外部消失，则设置 this.setFocusable(true) *   若要popwindow点击外部不消失，不做setFocusable设置，也不要设置成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基本设置 **/  protected voID setwindow() {    this.setContentVIEw(mLayoutVIEw);    this.setWIDth(mWIDth);    this.setHeight(mHeight);    // this.setFocusable(true);// 可点击    // 实例化一个colorDrawable颜色为半透明(半透明遮罩颜色代码#66000000)    colorDrawable DW = new colorDrawable(color.transparent);    this.setBackgroundDrawable(DW);  }  /** PopupWindow背景设置 **/  protected voID setBackground(int color) {    // 实例化一个colorDrawable颜色为半透明    colorDrawable DW = new colorDrawable(color);    this.setBackgroundDrawable(DW);  }  protected abstract voID initVIEw();  protected abstract voID initData();  protected abstract voID setListener();  /** PopupWindow点击间隙处理，根据实际情况重写 **/  protected voID ontouchdimiss() {    // mMenuVIEw添加OntouchListener监听判断获取触屏位置如果在选择框外面则销毁d出框    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   *      设置的间距(直接写数字即可，已经做过dp2px转换)   */  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   *      设置的间距(直接写数字即可，已经做过dp2px转换)   */  public voID showAtLocationGravityBottom(VIEw vIEw,(location[0]+vIEw.getWIDth()/2)-popupWIDth/2,location[1]+vIEw.getHeight()+dp2px(marginDp));    update();  }  /**显示在控件下方   *   * @param vIEw 依赖的控件   * @param marginDp 设置的间距(直接写数字即可，已经做过dp2px转换)   */  public voID showAtLocationBottom(VIEw vIEw,float marginDp){    showAsDropDown(vIEw,dp2px(marginDp));    update();  }  /**   * 显示在控件左方   *    * @param vIEw   *      依赖的控件   * @param marginDp   *      设置的间距(直接写数字即可，已经做过dp2px转换)   */  public voID showAtLocationleft(VIEw vIEw,location[0] - popupWIDth - dp2px(marginDp),(location[1] + vIEw.getHeight() / 2) - popupHeight / 2);    update();  }  /**   * 显示在控件右方   *    * @param vIEw   *      依赖的控件   * @param marginDp   *      设置的间距(直接写数字即可，已经做过dp2px转换)   */  public voID showAtLocationRight(VIEw vIEw,location[0] + vIEw.getWIDth() + dp2px(marginDp),(location[1] + vIEw.getHeight() / 2) - popupHeight / 2);    update();  }  /** dp转px **/  private int dp2px(float dpVal) {    return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,dpVal,mContext.getResources().getdisplayMetrics());  }  /** 通过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;  }}

第二步，写一个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,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显示隐藏的动画    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类中涉及到的内容挺多，以下将细细讲解。

1.--- 声明中涉及到RecycleVIEw的一个适配器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);不然会报错    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对应的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"对应的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对应的其实都是纯颜色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>

也许有的同学会问androID:background="@drawable/manager_fragment_popu_bg文件中为什恶魔不直接用color属性设置背景切换，而要用color写个drawable供调用，其实我一开始也是这样弄的，无奈报错，具体原因不详，知道的同学可以回复下，此处不做重点。

4.--- item_popu_order_layout.xml中androID:textcolor="@drawable/text_color_bg"对应的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的构造函数

 public OrderPop(Context context,context);    this.mDatas=datas;    initVIEw();    initData();    setListener();  }

这里我其实是图方便，所以直接传了个固定宽度 ScreenUtil.dp2px(100,context) 进去了，实际开发中因为是点击某个控件然后在控件下面显示出来，那么应该传那个控件的宽度。

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"是设置滚动条方向，androID:scrollbarThumbVertical="@color/blue"是设置滚动条颜色，androID:scrollbarStyle="outsIDeOverlay"设置滚动条样式

7.---讲讲OrderPop的显隐动画问题

在OrderPop类中的initData()方法中涉及到这样一行代码：

复制代码 代码如下:
setAnimationStyle(R.style.popuwindow_up_style);//popuwindow显示隐藏的动画

涉及到popuwindow的显隐动画问题，大家可以参考的前言中提到的popuwindow的基本使用文章，这里就不废话了。

第三步，OrderPop写好了，就该看看在MainActivity中是怎么调用的了，贴出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项点击事件    mOrderPop.getAdapter().setonRecyclerItemClickListener(new ManagerPopuAdapter.OnRecyclerItemClickListener() {      @OverrIDe      public voID onRecyclerClick(int position) {        showShortToast(mOrderList.get(position));        //更新mTvOrder显示内容        setbarContent(mTvOrder,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对应的布局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对应的代码如下：

<?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对应的分别是一张箭头向上的图片和一张箭头向下的图片，这里就不多说了。

androID:textcolor="@drawable/text_color_bg"的话是设置文字选中和未被选中时显示的颜色，在上面的第二步第四条已经讲过了，这里就不说了。

ok，整个实现过程大致就是这样的。今天关于PopuWindow实现下拉列表的知识就讲到这里了，谢谢诶。希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android中PopuWindow实现下拉列表实例全部内容，希望文章能够帮你解决Android中PopuWindow实现下拉列表实例所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。