使用PopupWindow实现功能,及步骤

PopupWindow详细介绍:

PopupWindow是一个以弹窗方式呈现的控件，可以用来显示任意视图(View)，而且会浮动在当前活动(activity)的顶部”。因此我们可以通过PopupWindow实现各种各样的弹窗效果,PopupWindow自定义布局比较方便，而且在显示位置比较自由不受限制，因此受到众多开发者的青睐。

实现效果图:

 

关于实现这个功能准备以下几点:

1:在build.gradle中加入：compile 'com.jakewharton:butterknife:7.0.1'或者导入butterknife的jar包

   在最早我们通常用findviewbyid来进行绑定控件,这里我用Butterkinfe注解的方式来绑定空件,AndroidStudio有一个(Zelezny)这个插件,可以使大家在日常开发中更有效的缩短时间,下面教大家如何安装Zelezny这个插件:

(1):打开Settings选择Plugins,点击Browse Repositories
 

(2):在搜索框中输入Zelezny,选择Android ButterKnife Zelezny,点击lnstall

(3):最后点击Restart Android Studio重新启动即可

2:安装完插件以后教大家如何使用,首先我们将布局展示给大家:

  

注意:设置ToolBar背景颜色:

      在values下的styles里设置ToolBar颜色

                           

      设置ToolBar颜色

(1):在上面的代码中我们可以看出,每个控件都有id关,这里教大家使用ButterKnife 插件以注解的方式去绑定控件,下面以图的方式呈现给大家:

  

(2):按住Alt+lnsert  选择Generate Butterknife lnjections

    

 (3)最后一步选择你要绑定的控件:

    

3:Java代码:

 

//popuwindow下拉列表，属于组合式控件
public class MainActivity extends AppCompatActivity {

    @Bind(R.id.supplier_list_product_tv)
    TextView mProductTv;  // 可以修改名称
    @Bind(R.id.supplier_list_product)
    LinearLayout mProduct; // 可以修改名称
    @Bind(R.id.supplier_list_sort_tv)
    TextView mSortTv;
    @Bind(R.id.supplier_list_sort)
    LinearLayout mSort; // 可以修改名称
    @Bind(R.id.supplier_list_activity_tv)
    TextView mActivityTv;
    @Bind(R.id.supplier_list_activity)
    LinearLayout mActivity; // 可以修改名称
    @Bind(R.id.supplier_list_lv)
    ListView mSupplierListLv;


    //三个popuwindow所需的数据集合
    private ArrayList> mMenuData1;
    private ArrayList> mMenuData2;
    private ArrayList> mMenuData3;

    //popuwindow所用的listView
    private ListView mPopListView;
    private PopupWindow mPopupMenu;
    //设置三个popuwindow所需的适配器
    private SimpleAdapter mMenuAdapter1;
    private SimpleAdapter mMenuAdapter2;
    private SimpleAdapter mMenuAdapter3;

    //设置的一个标记,方便对点击不同LinearLayout做对应的操作
    private int menuIndex = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //ButterKnife的初始化
        ButterKnife.bind(this);

        //初始化Popuwindow显示的数据
        initData();
        //初始化popuwindow控件
        initPopMenu();
    }

    //初始化数据,popupwindow所需,一共有三个popupwindow,所以做3个盒子数据,这里是假数据,真实数据从网上获取.
    private void initData() {
        //创建一个存放popupwindow加载数据的大盒子1,Map集合(键,值)
        mMenuData1 = new ArrayList<>();
        //存放String的字符串数组
        String[] menuStr1 = new String[]{"全部", "粮油", "衣服", "图书", "电子产品",
                "酒水饮料", "水果"};
        //创建一个小盒子,放编号和值
        Map map1;
        for (int i = 0, len = menuStr1.length; i < len; ++i) {
            map1 = new HashMap();
            map1.put("name", menuStr1[i]);
            mMenuData1.add(map1);
        }
        //创建一个存放popupwindow加载数据的大盒子2,Map集合(键,值)
        mMenuData2 = new ArrayList<>();
        String[] menuStr2 = new String[]{"综合排序", "配送费最低"};
        Map map2;
        for (int i = 0, len = menuStr2.length; i < len; ++i) {
            map2 = new HashMap();
            map2.put("name", menuStr2[i]);
            mMenuData2.add(map2);
        }
        //创建一个存放popupwindow加载数据的大盒子3,Map集合(键,值)
        mMenuData3 = new ArrayList<>();
        String[] menuStr3 = new String[]{"优惠活动", "特价活动", "免配送费",
                "可在线支付"};
        Map map3;
        for (int i = 0, len = menuStr3.length; i < len; ++i) {
            map3 = new HashMap();
            map3.put("name", menuStr3[i]);
            mMenuData3.add(map3);
        }
    }

    //初始化popuwindow
    private void initPopMenu() {
        //把包裹的ListVIew的布局XML文件转换为VIew对象
        View popView = LayoutInflater.from(this).inflate(R.layout.popuwin_supplier_list, null);
        //创建popuwindow对象,参数1popuwindow要显示的布局,参数2,3:定义popuwindow所占用的宽高
        mPopupMenu = new PopupWindow(popView, LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
        //设置popuwindow外部可以点击
        mPopupMenu.setOutsideTouchable(true);
        //是popuwindow里填充的listView拥有焦点
        mPopupMenu.setFocusable(true);
        //如果想要让popuwindow具有一些操作,比如动画效果之类的,必须给popuwindow设置背景
        mPopupMenu.setBackgroundDrawable(new ColorDrawable());
        //设置popuwindow的动画效果
        mPopupMenu.setAnimationStyle(R.style.popwin_anim_style);
        //设置popuwindow监督事件
        mPopupMenu.setOnDismissListener(new PopupWindow.OnDismissListener() {
            @Override
            public void onDismiss() {
                //设置TextView的颜色
                mProductTv.setTextColor(Color.parseColor("#5a5959"));
                mSortTv.setTextColor(Color.parseColor("#5a5959"));
                mActivityTv.setTextColor(Color.parseColor("#5a5959"));
            }
        });
        //点击popuwindow以外的区域,使popuwindow消失(实际就是让ListView下面的LinerLayout,设置点击事件)
        LinearLayout list_bottom = (LinearLayout) popView.findViewById(R.id.popwin_supplier_list_bottom);
        list_bottom.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //当LinerLayout被点击时,这popuwindow消失
                mPopupMenu.dismiss();
            }
        });

        //获取listVIew对象
        mPopListView = (ListView) popView.findViewById(R.id.popwin_supplier_list_lv);
        //点击popuwindow以外区域时,使popuwindow消失.在这里得到了ListView下面的LinearLayout,设置监听事件
/*SimpleAdapter 简单数据适配器:正好有一组数据,是Map集合放到ArrayList集合,就可以使用这个适配器了,不是太常用,设置数据太麻烦.
context:上下文    data:设置所有条目的数据,一个ArrayList大集合(包含所有条目信息),里面又有一个map集合(通过map来设置一个条目的数据)
resource:引用布局资源(可以引用复杂的布局.xml文件,区别于ArrayAdapter)
from:String数组,装map条目内容的键            to:int数组,装控件id  二者具有映射关系,代表对应的内容放到对应的位置*//*
ArrayList> data=new ArrayList>();
        //注意:一个map,代表一条item的数据.
        Map map=new HashMap();
        ListView对象.setAdapter(new SimpleAdapter(context, data, resource, from, to));*/
        //创建SimpleAdapter,一个listView安卓原生封装的适配器
        mMenuAdapter1 = new SimpleAdapter(this, mMenuData1, R.layout.item_listview_popuwindow, new String[]{"name"}, new int[]{R.id.listview_popwind_tv});

        mMenuAdapter2 = new SimpleAdapter(this, mMenuData2, R.layout.item_listview_popuwindow, new String[]{"name"}, new int[]{R.id.listview_popwind_tv});

        mMenuAdapter3 = new SimpleAdapter(this, mMenuData3, R.layout.item_listview_popuwindow, new String[]{"name"}, new int[]{R.id.listview_popwind_tv});

        //设置Popuwindow里的listView点击事件,当点击listVIew里的一个item时,把这个item数据显示到最上方
        mPopListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView adapterView, View view, int position, long ld) {
                //首先让Popuwindow消失
                mPopupMenu.dismiss();
                //设置一个标识,以方便做对应LinerLayout的点击事件.
                switch (menuIndex) {
                    case 0:
                        //获取点击对应条目的文本数据
                        String currentProduct = mMenuData1.get(position).get("name");
                        //把文本数据设置到原始布局里的文本
                        mProductTv.setText(currentProduct);
                        break;
                    case 1:
                        String currentSort = mMenuData2.get(position).get("name");
                        mSortTv.setText(currentSort);
                        break;
                    case 2:
                        String currentAct = mMenuData3.get(position).get("name");
                        mActivityTv.setText(currentAct);
                        break;
                    default:
                        break;
                }
            }
        });
    }

    //三个Popuwindow所依附的LinearLayout,设置点击事件
    @OnClick({R.id.supplier_list_product, R.id.supplier_list_sort, R.id.supplier_list_activity})
    public void onClick(View view) {
        switch (view.getId()) {
            //第一个Popuwindow所执行的点击后的逻辑
            case R.id.supplier_list_product:
                //设置其TextView点击时为绿色
                mProductTv.setTextColor(Color.parseColor("#39ac69"));
                //设置Popuwindow里的ListView适配器
                mPopListView.setAdapter(mMenuAdapter1);
                //让Popuwindow显示出来.  参数1:VIew对象,决定了在哪个控件下显示,  参数2决定了Popuwindow的坐标,X轴,Y轴
                mPopupMenu.showAsDropDown(mProduct, 0, 2);
                menuIndex = 0;
                break;
            //第2个Popuwindow所执行的点击后的逻辑
            case R.id.supplier_list_sort:
                mSortTv.setTextColor(Color.parseColor("#39ac69"));
                mPopListView.setAdapter(mMenuAdapter2);
                mPopupMenu.showAsDropDown(mSort, 0, 2);
                menuIndex = 1;
                break;
            //第3个Popuwindow所执行的点击后的逻辑
            case R.id.supplier_list_activity:
                mActivityTv.setTextColor(Color.parseColor("#39ac69"));
                mPopListView.setAdapter(mMenuAdapter3);
                mPopupMenu.showAsDropDown(mActivity, 0, 2);
                menuIndex = 2;
                break;

            default:
                break;
        }
    }

}

注意:在上面代码需注意几点:

1:在初始化PopupWindow中加载下拉文本布局

2:在初始化PopupWindow中加载PopupWindow动画资源文件:

(1)在res下创建anim,在anim中创建still资源文件:

 

(2)设置PopupWindow动画

3:在获取ListView对象里设置文本布局:

文本布局: