Android中PopuWindow实现下拉列表实例

前言

之前讲过一篇关于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监听判断获取触屏位置如果在选择框外面则销毁弹出框
    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, 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 设置的间距(直接写数字即可，已经做过dp2px转换)
   */
  public void showatlocationbottom(view view, float margindp){
    showasdropdown(view, 0, dp2px(margindp));
    update();
  }


  /**
   * 显示在控件左方
   * 
   * @param view
   *      依赖的控件
   * @param margindp
   *      设置的间距(直接写数字即可，已经做过dp2px转换)
   */
  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
   *      设置的间距(直接写数字即可，已经做过dp2px转换)
   */
  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转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,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显示隐藏的动画

    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, list<string>datas) {
    super(screenutil.dp2px(100,context), screenutil.dp2px(150,context), r.layout.pop_order, 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,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对应的布局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实现下拉列表的知识就讲到这里了，谢谢诶。希望对大家的学习有所帮助，也希望大家多多支持。