android 粗暴简单仿美团/大众点评搜索方式，详细标注

转载请注明出处王亟亟的大牛之路

美团和大众点评的搜索和筛选栏，不能说好看（审美flag），但是满足了我们的搜索还筛选的需求，所以今天就实现了下这样的一个小Demo

项目结构：运行效果就是下图了，就不再截图了

初始化的样子：

具体实现就是起初3个LinearLayout，点击之后出现一个ListView然后会根据对这个LisvView的点击可能会再出现下一级别的子菜单。

废话不多说，直接上代码
MainActivity

public class MainActivity extends Activity implements OnClickListener,
OnDismissListener{

    private ImageView icon1, icon2, icon3;
    private TextView fenlei, diqu, paixu;
    private LinearLayout ll_top;
    private LinearLayout ll_fenlei, ll_diqu, ll_paixu;

    private ListView lv1, lv2,lv3, lv4;
    private LinearLayout ll2;
    private PopupWindow popLeft,popMid,popRight;

    private List<father> fatlist;
    private List<son> sonlist,sonlist1,sonlist2,sonlist3,sonlist4;
    private List<son> right;
    private int screenWidth;
    private int screenHeight;
    private MyAdapterLeft adapterleft;
    private MyAdapterSon adapterleftson;
    private MyAdapterRight adapterRight;
    private int imaPosition;//选中的
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initScreenWidth();
        intifatherlist();   
        intiView();
    }

    private void intiView() {
        ll_top =(LinearLayout) findViewById(R.id.ll_layout);
        ll_fenlei = (LinearLayout) findViewById(R.id.ll_quyu);
        ll_diqu = (LinearLayout) findViewById(R.id.ll_jiage);
        ll_paixu = (LinearLayout) findViewById(R.id.ll_huxing);

        fenlei = (TextView) findViewById(R.id.fenlei);
        diqu  = (TextView) findViewById(R.id.diqu);
        paixu = (TextView) findViewById(R.id.paixu);

        icon1 = (ImageView) findViewById(R.id.icon1);
        icon2 = (ImageView) findViewById(R.id.icon2);
        icon3 = (ImageView) findViewById(R.id.icon3);
        ll_fenlei.setOnClickListener(this);
        ll_diqu.setOnClickListener(this);
        ll_paixu.setOnClickListener(this);  

        getPopLeft();
        getPopRight();
    }

    /**初始化父类和子类*/
    private void intifatherlist() {
        fatlist = new ArrayList<father>();
        sonlist = new ArrayList<son>();
        sonlist1 = new ArrayList<son>();
        sonlist2 = new ArrayList<son>();
        sonlist3 = new ArrayList<son>();
        sonlist4 = new ArrayList<son>();

        for (int i = 0; i < 5; i++) {
            son s = new son();
            s.setId(i+"");
            s.setName("子菜单"+i);
            sonlist.add(s);
        }
        for (int i = 0; i < 15; i++) {
            son s = new son();
            s.setId(i+"");
            s.setName("子菜单"+i);
            sonlist1.add(s);
        }
        for (int i = 0; i < 5; i++) {
            son s = new son();
            s.setId(i+"");
            s.setName("子菜单"+i);
            sonlist2.add(s);
        }
        for (int i = 0; i < 6; i++) {
            son s = new son();
            s.setId(i+"");
            s.setName("子菜单"+i);
            sonlist3.add(s);
        }
        for (int i = 0; i < 13; i++) {
            son s = new son();
            s.setId(i+"");
            s.setName("子菜单"+i);
            sonlist4.add(s);
        }
        /**初始化父类*/
        for (int i = 0; i < 5; i++) {
            father father = new father();
            father.setId(i+"");
            father.setName("主菜单"+i);
            if (i==0) {
                father.setImage(R.drawable.ic_category_all);
                father.setSonList(null);
            }
            if (i==1) {
                father.setImage(R.drawable.ic_category_entertainment);
                father.setSonList(sonlist1);
            }
            if (i==2) {
                father.setImage(R.drawable.ic_category_food);
                father.setSonList(sonlist2);
            }
            if (i==3) {
                father.setImage(R.drawable.ic_category_health); 
                father.setSonList(sonlist3);
            }
            if (i==4) {
                father.setImage(R.drawable.ic_category_hot);
                father.setSonList(sonlist4);
            }
            fatlist.add(father);
        }
    }

    /**
     * @Title: initScreenWidth
     * @Description: 查看自身的宽高
     * @author yimei
     * @return void 返回类型
     */
    private void initScreenWidth() {
        DisplayMetrics dm = new DisplayMetrics();
        dm = getResources().getDisplayMetrics();
        screenHeight = dm.heightPixels;
        screenWidth = dm.widthPixels;
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.ll_quyu:
            getPopLeft();
            popLeft.showAsDropDown(ll_top);
            break;
        case R.id.ll_jiage:

            break;
        case R.id.ll_huxing:
            getPopRight();
            popRight.showAsDropDown(ll_top);
            break;
        }
    }
    @Override
    public void onDismiss() {

    }

    /***获取PopupWindow实例 .分类*/ 
    private void getPopLeft() { 
    if (null != popLeft) { 
        popLeft.dismiss(); 
        return ; 
    } else {
    //初始化分类弹窗
        initPopLeft();
    }
} 

    /***获取PopupWindow实例 .分类*/ 
    private void getPopRight() { 
    if (null != popRight) { 
        popRight.dismiss(); 
        return ; 
    } else {
    //初始化分类弹窗
        initPopRight();
    }
} 
    /** 
    * 创建分类弹出PopupWindow 
    */ 
    protected void initPopLeft() { 
    // 获取自定义布局文件pop.xml的视图 
    View left_view = getLayoutInflater().inflate
            (R.layout.popleft, null, false); 
    left_view.setFocusable(true); // 这个很重要
    left_view.setFocusableInTouchMode(true);

    // PopupWindow(布局，宽度，高度)
    popLeft = new PopupWindow(left_view,screenWidth, screenHeight, true);
    popLeft.setFocusable(true);
    // 重写onKeyListener,按返回键消失
    left_view.setOnKeyListener(new OnKeyListener() {
        @Override
        public boolean onKey(View v, int keyCode, KeyEvent event) {
            if (keyCode == KeyEvent.KEYCODE_BACK) {
                popLeft.dismiss();
                //为空的话就会重新构建不会保留
//              popLeft = null;
                return true;
            }
            return false;
        }
    });
    // 设置动画效果 
//  popupWindow.setAnimationStyle(R.style.AnimationFade); 
    //点击其他地方消失 
    left_view.setOnTouchListener(new OnTouchListener() { 
    @Override 
    public boolean onTouch(View v, MotionEvent event) { 
    if (popLeft != null && popLeft.isShowing()) { 
        popLeft.dismiss(); 
     } 
    return false; 
  }}); 

    // pop.xml视图里面的控件 
    lv1 = (ListView) left_view.findViewById(R.id.lv1); 
    lv2 = (ListView) left_view.findViewById(R.id.lv2); 
    ll2 = (LinearLayout) left_view.findViewById(R.id.ll2);

    adapterleft = new MyAdapterLeft(MainActivity.this, fatlist);
    lv1.setAdapter(adapterleft);

    //listview的监听
    lv1.setOnItemClickListener(new OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> arg0, View arg1, int position,
            long arg3) {

        adapterleft.setSelectItem(position);
        imaPosition = position;
        adapterleft.notifyDataSetChanged();
        adapterleftson =new MyAdapterSon(MainActivity.this,
                fatlist.get(position).getSonList());
        lv2.setAdapter(adapterleftson);     
        //二维数组里面有元素
        if (fatlist.get(position).getSonList()!=null) {
            //不为空才显示
            lv2.setVisibility(View.VISIBLE);
            lv2.setOnItemClickListener(new OnItemClickListener() {
                @Override
                public void onItemClick(AdapterView<?> parent,
                        View view, int position, long id) {
                    //变色效果
                    adapterleftson.setSelectItem(position);
                    String name =
                    adapterleftson.getItem(position).getName();
                    setHeadText(1, name,fatlist.get(imaPosition).getImage());
                    popLeft.dismiss();
                }
            });
        //没元素   
        } else {
            // 当没有下级时直接将信息设置textview中
            String name = fatlist.get(position).getName();
            int img = fatlist.get(position).getImage();
            //第一个都是1
            setHeadText(1, name,img);
            popLeft.dismiss();
        }

    }});
    }



    /**最右边的弹窗，排序*/
    protected void initPopRight() { 
        // 获取自定义布局文件pop.xml的视图 
        View left_right = getLayoutInflater().inflate
                (R.layout.popright, null, false); 
        left_right.setFocusable(true); // 这个很重要
        left_right.setFocusableInTouchMode(true);

        // PopupWindow(布局，宽度，高度)
        popRight = new PopupWindow(left_right,screenWidth, screenHeight, true);
        popRight.setFocusable(true);
        // 重写onKeyListener,按返回键消失
        left_right.setOnKeyListener(new OnKeyListener() {
            @Override
            public boolean onKey(View v, int keyCode, KeyEvent event) {
                if (keyCode == KeyEvent.KEYCODE_BACK) {
                    popRight.dismiss();
                    //为空的话就会重新构建不会保留
//                  popLeft = null;
                    return true;
                }
                return false;
            }
        });
        // 设置动画效果 
//      popupWindow.setAnimationStyle(R.style.AnimationFade); 
        //点击其他地方消失 
        left_right.setOnTouchListener(new OnTouchListener() { 
        @Override 
        public boolean onTouch(View v, MotionEvent event) { 
        if (popRight != null && popRight.isShowing()) { 
            popRight.dismiss(); 
         } 
        return false; 
      }}); 

        // pop.xml视图里面的控件 
        lv3 = (ListView) left_right.findViewById(R.id.lv3); 
        right = new ArrayList<son>();
        for (int i = 0; i < 4; i++) {
            son s = new son();
            s.setId(i+"");
            if (i==0) {
                s.setName("智能排序");
            }
            if (i==1) {
                s.setName("好评优先");
            }
            if (i==2) {
                s.setName("离我最近");
            }
            if (i==3) {
                s.setName("人均最低");
            }
            right.add(s);
        }
        adapterRight = new MyAdapterRight(MainActivity.this, right);
        lv3.setAdapter(adapterRight);

        lv3.setOnItemClickListener(new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> arg0, View arg1, int position,
                    long arg3) {
                adapterRight.setSelectItem(position);
                // 当没有下级时直接将信息设置textview中
                String name = right.get(position).getName();
                setHeadText(3, name,0);
                popRight.dismiss();
            }
        });


    }



    /**
     * @Title: setHeadText
     * @Description: 点击之后设置在上边的TextView里
     * @author yimei
     * @return void 返回类型
     */
    private void setHeadText(int idx, String text,int image) {
        switch (idx) {
        case 1:
            fenlei.setText(text);
            icon1.setImageResource(image);
            break;
        case 2:
            diqu.setText(text);
            break;
        case 3:
            paixu.setText(text);
            break;
        }
    }   


}

布局文件

<RelativeLayout 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="#FFFFFF"
    tools:context=".MainActivity" >

    <LinearLayout
        android:id="@+id/ll_layout"
        android:layout_width="match_parent"
        android:layout_height="40dip"
        android:background="#FFFFFF"
        android:orientation="horizontal" >

        <LinearLayout
            android:id="@+id/ll_quyu"
            android:layout_width="0dip"
            android:layout_height="40dip"
            android:layout_weight="1"
            android:gravity="center_vertical|center_horizontal"
            android:orientation="horizontal"
            android:paddingLeft="10dip" >
            <ImageView
                android:id="@+id/icon1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/documents" />
            <TextView
                android:id="@+id/fenlei"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:text="@string/quyu"
                android:textColor="#4d4d4d" />
        </LinearLayout>

        <View
            android:layout_width="1dip"
            android:layout_height="20dip"
            android:layout_gravity="center_vertical"
            android:background="#e6e6e6" />

        <LinearLayout
            android:id="@+id/ll_jiage"
            android:layout_width="0dip"
            android:layout_height="40dip"
            android:layout_weight="1"
            android:gravity="center_vertical|center_horizontal"
            android:orientation="horizontal"
            android:paddingLeft="10dip" >
                <ImageView
                android:id="@+id/icon2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/location_pin" />
            <TextView
                android:id="@+id/diqu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:text="@string/jiage"
                android:textColor="#4d4d4d" />
        </LinearLayout>

        <View
            android:layout_width="1dip"
            android:layout_height="20dip"
            android:layout_gravity="center_vertical"
            android:background="#e6e6e6" />

        <LinearLayout
            android:id="@+id/ll_huxing"
            android:layout_width="0dip"
            android:layout_height="40dip"
            android:layout_weight="1"
            android:gravity="center_vertical|center_horizontal"
            android:orientation="horizontal"
            android:paddingLeft="10dip" >

            <ImageView
                android:id="@+id/icon3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/resize_100" />
            <TextView
                android:id="@+id/paixu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:text="@string/huxing"
                android:textColor="#4d4d4d" />
        </LinearLayout>
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dip"
        android:layout_below="@id/ll_layout"
        android:background="#e6e6e6" />

</RelativeLayout>

参数的适配器（就贴一个了，这部分没什么，看源码更清楚）

public class MyAdapterLeft extends BaseAdapter {
    private List<father> l;
    private Context context;
    private int selectItem = -1;

    public MyAdapterLeft(Context context, List<father> l) {
        this.context = context;
        this.l = l;
    }

    @Override
    public int getCount() {
        return l.size();
    }

    @Override
    public Object getItem(int position) {
        return l.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        Holder holder = null;
        if (convertView == null) {
            holder = new Holder();
            convertView = LayoutInflater.from(context).inflate(R.layout.item,
                    null);
            holder.name = (TextView) convertView.findViewById(R.id.name);
            holder.img = (ImageView) convertView.findViewById(R.id.img);
            convertView.setTag(holder);
        } else {
            holder = (Holder) convertView.getTag();
        }
            holder.name.setText(l.get(position).getName());
            holder.img.setImageResource(l.get(position).getImage());

        if (position == selectItem) {
            convertView.setBackgroundColor(context.getResources().getColor(R.color.click));
            holder.name.setTextColor(Color.BLUE);
        } else {
            convertView.setBackgroundColor(context.getResources().getColor(R.color.defult));
            holder.name.setTextColor(Color.BLACK);
        }
        return convertView;
    }

    public void setSelectItem(int selectItem) {
        this.selectItem = selectItem;
    }

    class Holder {
        TextView name;
        ImageView img;
    }
    private void show(String str) {
        Toast.makeText(context, str, 0).show();
    }
}

一些比较重要的内容就这些了，子层级的item啊，father son的对象声明啊，看源码吧，只是用于填充数据的容器而已
源码：http://yunpan.cn/cmwJbWZ3FdpdZ 访问密码 493b

部分内容参考互联网，如有重复请见谅