自定义Popuwidow

上面这个是我们本次需要实现的效果；

点击上面三个的时候下面出现ListView,点击litview里面的条目，点击哪一条在上面的textView改变成那个；后面俩个和前一个一样，但是上面改变的textview不能攒位置，点哪个改变那个；点击其他任何区域关闭listView，也使这里说的popuwindow；还有就是点击上面的textview时，改变其颜色；

下面开始实现：

这里我们简单实用下Toobar，所以首先取消ActionBar；

我在找控件的时候用到了butterknife,在这里需要添加一个依赖：

compile 'com.jakewharton:butterknife:7.0.1'

下面直接上代码：（里面注释非常详细，我就不在做解释了）

MainActivity:

/**
 * 1.添加butterknife的依赖，取消ActionBar，替换成ToolBar
 * 2.完成整体布局，初始化控件，设置点击事件
 * 3.初始化PopuWindow所显示的数据
 * 4.初始化Popuwindow控件的设置
 * 5.使popuwindow与Listview相关联
 * 6.三个popuwindow所依附的LinearLayout，根据点击事件，
 * 做对应的逻辑处理（改变TextView的颜色，显示效果）
 */
public class MainActivity extends AppCompatActivity {
    @Bind(R.id.supplier_list_product_tv)
    TextView mProductTv;//全部的TextView
    @Bind(R.id.supplier_list_product)
    LinearLayout mProduct;
    @Bind(R.id.supplier_list_sort_tv)
    TextView mSortTv;  //综合排序的textView
    @Bind(R.id.supplier_list_sort)
    LinearLayout mSort;
    @Bind(R.id.supplier_list_activity_tv)
    TextView mActivityTv; //优惠活动的tv
    @Bind(R.id.supplier_list_activity)
    LinearLayout mActivity;
    @Bind(R.id.supplier_list_lv)
    ListView mListLv;
    @Bind(R.id.activity_main)
    LinearLayout mMain;
    private ArrayList<Map<String, String>> mMenuData1;
    private ArrayList<Map<String, String>> mMenuData2;
    private ArrayList<Map<String, String>> mMenuData3;
    private PopupWindow mPopupMenu;
    private ListView mPopListView;
    private SimpleAdapter mMenuAdapter1;
    private SimpleAdapter mMenuAdapter2;
    private SimpleAdapter mMenuAdapter3;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        //初始化PopuWindow所显示的数据
        initData();
        //初始化popuwindow控件
        initPopMenu();

    }

    //初始化popuwindow控件
    private void initPopMenu() {
        //把包裹ListView布局的XML文件转换成View对象
        final View popview = LayoutInflater.from(this).inflate(R.layout.popwin_supp, null);
       //创建Popuwindpw的对象,参数1：popuwindow的布局，参数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有动画效果,下面这行代码必须写，没有不会执行动画
        mPopupMenu.setBackgroundDrawable(new ColorDrawable());
        //设置结束时的监听事件
        mPopupMenu.setOnDismissListener(new PopupWindow.OnDismissListener() {
            @Override
            public void onDismiss() {
                //设置TextView的颜色,把所有LinearLayout的文本颜色该为灰色
                mProductTv.setTextColor(Color.parseColor("#5a5959"));
                mSortTv.setTextColor(Color.parseColor("#5a5959"));
                mActivityTv.setTextColor(Color.parseColor("#5a5959"));
            }
        });
        //设置点击popuwindow以外的地方，使popuwindow消失
        LinearLayout list_ovttom = (LinearLayout) popview.findViewById(R.id.popwin_supplier_list_bottom);
          //popuwindow控件以外的点击事件
        list_ovttom.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View view) {
              //点击灰色区域时，popuwindow会消失
              mPopupMenu.dismiss();

          }
      });

        //获取ListView对象
        mPopListView = (ListView) popview.findViewById(R.id.popwin_supplier_list_lv);
        //创建SimpleAdapter，一个ListView安卓原生封装的适配器
        mMenuAdapter1 = new SimpleAdapter(this, mMenuData1, R.layout.item_listview_popwin, new String[]{"name"}, new int[]{R.id.listview_popwind_tv});
        mMenuAdapter2 = new SimpleAdapter(this, mMenuData2, R.layout.item_listview_popwin, new String[]{"name"}, new int[]{R.id.listview_popwind_tv});
        mMenuAdapter3 = new SimpleAdapter(this, mMenuData3, R.layout.item_listview_popwin, new String[]{"name"}, new int[]{R.id.listview_popwind_tv});
        //设置条目点击监听，当点击listiew里的一个item时，把item数据显示到最上方
        mPopListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                //让popuwindow消失
                mPopupMenu.dismiss();
                switch (index){
                    case 0:
                        String s1 = mMenuData1.get(i).get("name");
                        mProductTv.setText(s1);
                        break;
                    case 1:
                        String s2= mMenuData2.get(i).get("name");
                        mSortTv.setText(s2);
                        break;
                    case 2:
                        String s3 = mMenuData3.get(i).get("name");
                        mActivityTv.setText(s3);
                        break;
                }
            }
        });
    }
        //设置一个标记，方便对点击不同linerLayout做对应操作
    private int index=0;
    //初始化PopuWindow所显示的数据
    //初始化数据，popuwindow一共三个，封装三个数据；
    private void initData() {
        /第一组数据/
        //创建一个popuwindow加载数据的大盒子，map集合（键，值）
        mMenuData1 = new ArrayList<>();
        //存放String的字符串数组
        String[] menuStr1 = new String[]{"全部", "粮油", "衣服", "图书", "电子产品",
                "酒水饮料", "水果"};
        //创建一个小盒子，放编号和值
        Map<String, String> map1;
        //遍历数组
        for (int i = 0; i < menuStr1.length; i++) {
            map1 = new HashMap<>();
            map1.put("name", menuStr1[i]);
            mMenuData1.add(map1);
        }
        /第二组数据/
        //创建一个popuwindow加载数据的大盒子，map集合（键，值）
        mMenuData2 = new ArrayList<>();
        //存放String的字符串数组
        String[] menuStr2 = new String[]{"综合排序", "配送费最低"};

        //创建一个小盒子，放编号和值
        Map<String, String> map2;
        //遍历数组
        for (int i = 0; i < menuStr2.length; i++) {
            map2 = new HashMap<>();
            map2.put("name", menuStr2[i]);
            mMenuData2.add(map2);
        }
        /第三组数据/
        //创建一个popuwindow加载数据的大盒子，map集合（键，值）
        mMenuData3 = new ArrayList<>();
        //存放String的字符串数组
        String[] menuStr3 = new String[]{"优惠活动", "特价活动", "免配送费", "可在线支付"};
        //创建一个小盒子，放编号和值
        Map<String, String> map3;
        //遍历数组
        for (int i = 0; i < menuStr3.length; i++) {
            map3 = new HashMap<>();
            map3.put("name", menuStr3[i]);
            mMenuData3.add(map3);
        }
    }

    //三个popuwindow所依附的linearlayout,设置点击事件。也就是三个linearlayout几倍了点击事件
    @OnClick({R.id.supplier_list_product, R.id.supplier_list_sort, R.id.supplier_list_activity})
    public void onViewClicked(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对象，决定了popuwindow在那个控件下显示
                //参数2.3：决定popuwindow的坐标（x.y）;
                mPopupMenu.showAsDropDown(mProduct,0,2);
                index=0;
                break;
            //第二个popuwindow所执行的点击后的逻辑
            case R.id.supplier_list_sort://综合排序

                //设置其textView点击时为绿色
                mSortTv.setTextColor(Color.parseColor("#39ac69"));
                //设置popuwindow里的listView适配器
                mPopListView.setAdapter(mMenuAdapter2);
                //让popuwindow显示出来,参数1：view对象，决定了popuwindow在那个控件下显示
                //参数2.3：决定popuwindow的坐标（x.y）;
                mPopupMenu.showAsDropDown(mProduct,0,2);
                index=1;
                break;
            //第三个popuwindow所执行的点击后的逻辑
            case R.id.supplier_list_activity://优惠活动

                //设置其textView点击时为绿色
                mActivityTv.setTextColor(Color.parseColor("#39ac69"));
                //设置popuwindow里的listView适配器
                mPopListView.setAdapter(mMenuAdapter3);
                //让popuwindow显示出来,参数1：view对象，决定了popuwindow在那个控件下显示
                //参数2.3：决定popuwindow的坐标（x.y）;
                mPopupMenu.showAsDropDown(mProduct,0,2);
                index=3;
                break;

        }
    }
}

下面是布局：

activity_main

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
>
    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#f333ff">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffff"
            android:text="周边"
            android:layout_gravity="center_horizontal"
            android:textSize="20dp"/>
    </android.support.v7.widget.Toolbar>

    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="#E2E2E2"
        />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="#fff"
        android:orientation="horizontal"
        >

        <LinearLayout
            android:id="@+id/supplier_list_product"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:gravity="center"
            >

            <TextView
                android:id="@+id/supplier_list_product_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="全部"
                android:textSize="14dp"
                />

            <ImageView
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:src="@drawable/icon_arrow_down"/>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/supplier_list_sort"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:gravity="center"
            >

            <TextView
                android:id="@+id/supplier_list_sort_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="综合排序"
                android:textSize="14dp"
                />

            <ImageView
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:src="@drawable/icon_arrow_down"/>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/supplier_list_activity"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:gravity="center"
            >

            <TextView
                android:id="@+id/supplier_list_activity_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="优惠活动"
                android:textSize="14dp"
                />

            <ImageView
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:src="@drawable/icon_arrow_down"/>
        </LinearLayout>

    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="#E2E2E2"
        />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ListView
            android:id="@+id/supplier_list_lv"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="10dp"
            android:cacheColorHint="#00000000"
            android:divider="#f0f0f0"
            android:dividerHeight="10dp"
            android:fadingEdge="none"
            android:listSelector="#00000000"
            android:scrollbarStyle="outsideOverlay"
            android:scrollingCache="false"
            >
        </ListView>

</RelativeLayout>
</LinearLayout>

item_listview_popwin:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#ffffff"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/listview_popwind_tv"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:gravity="center_vertical"
        android:text="地点"
        android:textColor="#5a5959"
        android:textSize="18dp" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:background="#E2E2E2" />

</LinearLayout>

popwin_supp:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="#5000"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ListView
        android:id="@+id/popwin_supplier_list_lv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:cacheColorHint="#00000000"
        android:divider="#0000"
        android:dividerHeight="0dp"
        android:fadingEdge="none"
        android:listSelector="#00000000"
        android:scrollbarStyle="outsideOverlay"
        android:scrollbars="none"
        android:scrollingCache="false"
        >
    </ListView>

    <LinearLayout
        android:id="@+id/popwin_supplier_list_bottom"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_height="0dp"
        android:orientation="vertical"
        >
    </LinearLayout>

</LinearLayout>