欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android中PopuWindow实现下拉列表实例

程序员文章站 2022-05-17 22:34:48
前言 之前讲过一篇关于popuwindow的基本使用的文章,想了解的同学可以参考:popupwindow的基本使用 其实,下拉列表spanner(不知道控件拼写是否...

前言

之前讲过一篇关于popuwindow的基本使用的文章,想了解的同学可以参考:popupwindow的基本使用

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

正文

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

Android中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实现下拉列表的知识就讲到这里了,谢谢诶。希望对大家的学习有所帮助,也希望大家多多支持。