转载请注明出处王亟亟的大牛之路
美团和大众点评的搜索和筛选栏，不能说好看（审美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
部分内容参考互联网，如有重复请见谅
版权声明：本文为博主原创文章，未经博主允许不得转载。
时间： 2024-10-01 04:10:30