转载请注明出处王亟亟的大牛之路
美团和大众点评的搜索和筛选栏,不能说好看(审美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
部分内容参考互联网,如有重复请见谅
版权声明:本文为博主原创文章,未经博主允许不得转载。
- 1楼heotaeyoung昨天 17:09
- 楼主厉害哦