本文实例讲述了Android开发实现仿京东商品搜索选项卡弹窗功能。分享给大家供大家参考，具体如下：

一、效果图：

二、思路：

（1）首先顶部布局由通过LinearLayout水平按比重平均分配各个item宽度。
（2）每个item设置两种状态，点击状态与未点击状态
（3）弹窗由PopupWindow实现

三、布局

（1）item布局

<!-- 优先筛选条件布局 --><RelativeLayout android:id="@+id/rl_priority_filter" android:layout_width="fill_parent" android:layout_height="@dimen/dp38" android:layout_below="@+id/v_line_1" android:background="@color/f8f8f8" android:paddingTop="@dimen/dp7" > <!-- 底部线条 --> <View android:id="@+id/v_line" android:layout_width="match_parent" android:layout_height="@dimen/px1" android:layout_alignParentBottom="true" android:layout_marginTop="-1dp" android:background="@color/e5e5e5" android:visibility="gone" /> <LinearLayout android:layout_width="match_parent" android:layout_height="fill_parent" android:layout_marginLeft="@dimen/dp8" android:layout_marginRight="@dimen/dp8" android:orientation="horizontal" > <!-- 单个优先搜索条件1 --> <LinearLayout android:id="@+id/ll_priority_1" android:layout_width="@dimen/dp0" android:layout_height="@dimen/dp24" android:layout_weight="1" android:background="@drawable/rounded_priority_search" android:gravity="center" android:orientation="horizontal" android:visibility="invisible" > <!-- 条件1 --> <TextView android:id="@+id/tv_condition_1" android:layout_width="wrap_content" android:layout_height="@dimen/dp24" android:gravity="center" android:text="品牌品牌" android:textSize="@dimen/sp13" android:textColor="@color/c_666666"/> <!-- 优先筛选条件弹窗提示图标1 --> <ImageView android:id="@+id/iv_codition_tip1" android:layout_width="@dimen/dp8" android:layout_height="@dimen/dp4" android:layout_marginLeft="@dimen/dp4" android:background="@drawable/priority_search_down" android:contentDescription="@string/img_desc" /> </LinearLayout> <!-- 单个优先搜索条件2 --> <LinearLayout android:id="@+id/ll_priority_2" android:layout_width="@dimen/dp0" android:layout_height="@dimen/dp24" android:layout_marginLeft="@dimen/dp14" android:layout_weight="1" android:background="@drawable/rounded_priority_search" android:gravity="center" android:orientation="horizontal" android:visibility="invisible" > <!-- 条件2 --> <TextView android:id="@+id/tv_condition_2" android:layout_width="wrap_content" android:layout_height="@dimen/dp24" android:gravity="center" android:text="品牌时间" android:textSize="@dimen/sp13" android:textColor="@color/c_666666"/> <!-- 优先筛选条件弹窗提示图标2 --> <ImageView android:id="@+id/iv_codition_tip2" android:layout_width="@dimen/dp8" android:layout_height="@dimen/dp4" android:layout_marginLeft="@dimen/dp4" android:background="@drawable/priority_search_down" android:contentDescription="@string/img_desc" /> </LinearLayout> <!-- 单个优先搜索条件3 --> <LinearLayout android:id="@+id/ll_priority_3" android:layout_width="@dimen/dp0" android:layout_height="@dimen/dp24" android:layout_marginLeft="@dimen/dp14" android:layout_weight="1" android:background="@drawable/rounded_priority_search" android:gravity="center" android:orientation="horizontal" android:visibility="invisible" > <!-- 条件3 --> <TextView android:id="@+id/tv_condition_3" android:layout_width="wrap_content" android:layout_height="@dimen/dp24" android:gravity="center" android:text="上市品牌" android:textSize="@dimen/sp13" android:textColor="@color/c_666666" /> <!-- 优先筛选条件弹窗提示图标3 --> <ImageView android:id="@+id/iv_codition_tip3" android:layout_width="@dimen/dp8" android:layout_height="@dimen/dp4" android:layout_marginLeft="@dimen/dp4" android:background="@drawable/priority_search_down" android:contentDescription="@string/img_desc" /> </LinearLayout> <!-- 单个优先搜索条件4 --> <LinearLayout android:id="@+id/ll_priority_4" android:layout_width="@dimen/dp0" android:layout_height="@dimen/dp24" android:layout_marginLeft="@dimen/dp14" android:layout_weight="1" android:background="@drawable/rounded_priority_search" android:gravity="center" android:orientation="horizontal" android:visibility="invisible" > <!-- 条件4 --> <TextView android:id="@+id/tv_condition_4" android:layout_width="wrap_content" android:layout_height="@dimen/dp24" android:gravity="center" android:text="上市时间" android:textSize="@dimen/sp13" android:textColor="@color/c_666666"/> <!-- 优先筛选条件弹窗提示图标4 --> <ImageView android:id="@+id/iv_codition_tip4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="@dimen/dp4" android:background="@drawable/priority_search_down" android:contentDescription="@string/img_desc" /> </LinearLayout> </LinearLayout></RelativeLayout>

（2）点击item与未点击item背景

(2.1)点击item背景

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <!-- 定义圆角矩形 --> <shape android:shape="rectangle" > <!-- 填充颜色 --> <solid android:color="@color/e5e5e5" /> <!-- 圆角 --> <corners android:radius="@dimen/dp4" /> <!-- 内容内边距 --> <padding android:bottom="@dimen/dp2" android:left="@dimen/dp0" android:right="@dimen/dp0" android:top="@dimen/dp2" /> <!-- 边框颜色 --> <stroke android:width="@dimen/px1" android:color="@color/e5e5e5" /> </shape> </item></layer-list>

(2.2)未点击item背景

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 灰色圆角矩形底层 --> <item> <!-- 定义矩形 --> <shape android:shape="rectangle" > <!-- 设置矩形顶部圆角 --> <corners android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp" android:topLeftRadius="@dimen/dp4" android:topRightRadius="@dimen/dp4" /> <!-- 设置填充颜色 --> <solid android:color="@color/e5e5e5" /> </shape> </item> <!-- 叠加一个白色的矩形 --> <item android:left="@dimen/px1" android:right="@dimen/px1" android:top="@dimen/px1" android:bottom="@dimen/dp0"> <!-- 定义白色矩形 --> <shape android:shape="rectangle" > <!-- 设置矩形顶部圆角 --> <corners android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp" android:topLeftRadius="@dimen/dp4" android:topRightRadius="@dimen/dp4" /> <!-- 设置填充颜色 --> <solid android:color="@color/ffffffff" /> <!-- 设置内容padding值 --> <padding android:bottom="@dimen/dp2" android:left="@dimen/dp0" android:right="@dimen/dp0" android:top="-4dp" /> </shape> </item></layer-list>

（3）item切换逻辑

/** * 设置优先筛选弹窗选中类型 * * @Description * @author XiongJie * @param selectType */public void setSelectState(int selectType) { //4、设置每个筛选条件布局的参数 switch (selectType) { case 0: v_line.setVisibility(View.VISIBLE); llPriority1.setBackgroundResource(R.drawable.rounded_priority_search_selected); llPriority2.setBackgroundResource(R.drawable.rounded_priority_search); llPriority3.setBackgroundResource(R.drawable.rounded_priority_search); llPriority4.setBackgroundResource(R.drawable.rounded_priority_search); ivCoditionTip1.setBackgroundResource(R.drawable.priority_search_up); ivCoditionTip2.setBackgroundResource(R.drawable.priority_search_down); ivCoditionTip3.setBackgroundResource(R.drawable.priority_search_down); ivCoditionTip4.setBackgroundResource(R.drawable.priority_search_down); params21.setMargins((int) DisplayUtil.dip2px(SearchResultActivity.this, 18), 0, 0, 0); params31.setMargins((int) DisplayUtil.dip2px(SearchResultActivity.this, 18), 0, 0, 0); params41.setMargins((int) DisplayUtil.dip2px(SearchResultActivity.this, 18), 0, 0, 0); llPriority1.setLayoutParams(params12); llPriority2.setLayoutParams(params21); llPriority3.setLayoutParams(params31); llPriority4.setLayoutParams(params41); break; case 1: v_line.setVisibility(View.VISIBLE); llPriority1.setBackgroundResource(R.drawable.rounded_priority_search); llPriority2.setBackgroundResource(R.drawable.rounded_priority_search_selected); llPriority3.setBackgroundResource(R.drawable.rounded_priority_search); llPriority4.setBackgroundResource(R.drawable.rounded_priority_search); ivCoditionTip1.setBackgroundResource(R.drawable.priority_search_down); ivCoditionTip2.setBackgroundResource(R.drawable.priority_search_up); ivCoditionTip3.setBackgroundResource(R.drawable.priority_search_down); ivCoditionTip4.setBackgroundResource(R.drawable.priority_search_down); params22.setMargins((int) DisplayUtil.dip2px(SearchResultActivity.this, 18), 0, 0, 0); params31.setMargins((int) DisplayUtil.dip2px(SearchResultActivity.this, 18), 0, 0, 0); params41.setMargins((int) DisplayUtil.dip2px(SearchResultActivity.this, 18), 0, 0, 0); llPriority1.setLayoutParams(params11); llPriority2.setLayoutParams(params22); llPriority3.setLayoutParams(params31); llPriority4.setLayoutParams(params41); break; case 2: v_line.setVisibility(View.VISIBLE); llPriority1.setBackgroundResource(R.drawable.rounded_priority_search); llPriority2.setBackgroundResource(R.drawable.rounded_priority_search); llPriority3.setBackgroundResource(R.drawable.rounded_priority_search_selected); llPriority4.setBackgroundResource(R.drawable.rounded_priority_search); ivCoditionTip1.setBackgroundResource(R.drawable.priority_search_down); ivCoditionTip2.setBackgroundResource(R.drawable.priority_search_down); ivCoditionTip3.setBackgroundResource(R.drawable.priority_search_up); ivCoditionTip4.setBackgroundResource(R.drawable.priority_search_down); params21.setMargins((int) DisplayUtil.dip2px(SearchResultActivity.this, 18), 0, 0, 0); params32.setMargins((int) DisplayUtil.dip2px(SearchResultActivity.this, 18), 0, 0, 0); params41.setMargins((int) DisplayUtil.dip2px(SearchResultActivity.this, 18), 0, 0, 0); llPriority1.setLayoutParams(params11); llPriority2.setLayoutParams(params21); llPriority3.setLayoutParams(params32); llPriority4.setLayoutParams(params41); break; case 3: v_line.setVisibility(View.VISIBLE); llPriority1.setBackgroundResource(R.drawable.rounded_priority_search); llPriority2.setBackgroundResource(R.drawable.rounded_priority_search); llPriority3.setBackgroundResource(R.drawable.rounded_priority_search); llPriority4.setBackgroundResource(R.drawable.rounded_priority_search_selected); ivCoditionTip1.setBackgroundResource(R.drawable.priority_search_down); ivCoditionTip2.setBackgroundResource(R.drawable.priority_search_down); ivCoditionTip3.setBackgroundResource(R.drawable.priority_search_down); ivCoditionTip4.setBackgroundResource(R.drawable.priority_search_up); params21.setMargins((int) DisplayUtil.dip2px(SearchResultActivity.this, 18), 0, 0, 0); params31.setMargins((int) DisplayUtil.dip2px(SearchResultActivity.this, 18), 0, 0, 0); params42.setMargins((int) DisplayUtil.dip2px(SearchResultActivity.this, 18), 0, 0, 0); llPriority1.setLayoutParams(params11); llPriority2.setLayoutParams(params21); llPriority3.setLayoutParams(params31); llPriority4.setLayoutParams(params42); break; case 4: v_line.setVisibility(View.GONE); llPriority1.setBackgroundResource(R.drawable.rounded_priority_search); llPriority2.setBackgroundResource(R.drawable.rounded_priority_search); llPriority3.setBackgroundResource(R.drawable.rounded_priority_search); llPriority4.setBackgroundResource(R.drawable.rounded_priority_search); ivCoditionTip1.setBackgroundResource(R.drawable.priority_search_down); ivCoditionTip2.setBackgroundResource(R.drawable.priority_search_down); ivCoditionTip3.setBackgroundResource(R.drawable.priority_search_down); ivCoditionTip4.setBackgroundResource(R.drawable.priority_search_down); params21.setMargins((int) DisplayUtil.dip2px(SearchResultActivity.this, 18), 0, 0, 0); params31.setMargins((int) DisplayUtil.dip2px(SearchResultActivity.this, 18), 0, 0, 0); params41.setMargins((int) DisplayUtil.dip2px(SearchResultActivity.this, 18), 0, 0, 0); llPriority1.setLayoutParams(params11); llPriority2.setLayoutParams(params21); llPriority3.setLayoutParams(params31); llPriority4.setLayoutParams(params41); break; }}

（4）PopupWindow逻辑

package com.sanweidu.TddPay.activity.trader.search;import java.util.ArrayList;import com.sanweidu.TddPay.R;import com.sanweidu.TddPay.adapter.CoditionAdapter;import com.sanweidu.TddPay.bean.ValueBean;import android.app.Activity;import android.content.SharedPreferences;import android.content.SharedPreferences.Editor;import android.graphics.drawable.BitmapDrawable;import android.view.KeyEvent;import android.view.LayoutInflater;import android.view.MotionEvent;import android.view.View;import android.view.View.OnClickListener;import android.view.View.OnKeyListener;import android.view.View.OnTouchListener;import android.view.ViewGroup.LayoutParams;import android.view.WindowManager;import android.widget.Button;import android.widget.GridView;import android.widget.PopupWindow;/** * 优先搜索弹窗 * @Description * @author XiongJie * @date 2016年11月2日 下午4:53:31 */public class PriorityPopupWindow extends PopupWindow { /**布局加载器**/ private LayoutInflater inflater; /** 上下文 **/ private Activity activity; /** PopupWindow对象 **/ public PopupWindow popupWindow = null; /**优先筛选条件列表**/ private GridView gvCoditionList; /** 判断gridview是否进行滚动事件 **/ protected boolean isScroll = false; /** 绑定显示视图的view **/ protected View view = null; /**属性值列表**/ private ArrayList<ValueBean> valueBeanList; /**适配器**/ private CoditionAdapter coditionAdapter; /**重置**/ private Button btReset; /**确认**/ private Button btConfirm; /**优先筛选**/ private SharedPreferences priorityPre; /**搜索类型**/ private int searchType; /**弹窗阴影部分**/ private View vBg; /**构造方法**/ public PriorityPopupWindow(){ } /**初始化弹窗界面**/ public void initPopupWindow(final Activity activity, View view, int layoutID,ArrayList<ValueBean> valueBeanList,final SharedPreferences priorityPre,final int searchType){ this.view = view; this.activity = activity; this.valueBeanList = valueBeanList; this.priorityPre = priorityPre; this.searchType = searchType; inflater = LayoutInflater.from(activity); View dialogView = inflater.inflate(layoutID, null); createPopupWindow(dialogView); popupWindow = new PopupWindow(dialogView, LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT); // 此处必须设置，否则点击事件无效，选择不了 popupWindow.setBackgroundDrawable(new BitmapDrawable()); // 设置显示动画// popupWindow.setAnimationStyle(R.style.PopupWindowAinmation); // 设置边缘点击可消失 popupWindow.setOutsideTouchable(true); // 设置pop出来后，软键盘的属性，避免pop挡住软键盘，以及pop获取焦点后软键盘会自动隐藏问题 popupWindow.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE | WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_VISIBLE); // 使用该属性时，在滑动pop的时候不会自动弹出软键盘 popupWindow.setInputMethodMode(PopupWindow.INPUT_METHOD_NOT_NEEDED); // 为了设置返回按钮关闭弹层 popupWindow.setFocusable(true); dialogView.setOnKeyListener(new OnKeyListener() { @Override public boolean onKey(View v, int keyCode, KeyEvent event) { if (keyCode == KeyEvent.KEYCODE_BACK) { hidden(); popupWindow.setFocusable(false); popupWindow.update(); return true; // 消费掉该事件 } return false; } }); /** * PopupWindow消失时事件 */// popupWindow.setOnDismissListener(new OnDismissListener() {// @Override// public void onDismiss() {// //还原优先筛选控件显示状态// if(activity instanceof SearchResultActivity){// ((SearchResultActivity)activity).setSelectState(4);// }//// if(null != priorityPre){// boolean isClickConfirm = priorityPre.getBoolean("isClickConfirm", false);// Editor editor = priorityPre.edit();// editor.putInt("searchType", searchType);// editor.putBoolean("isClickConfirm", isClickConfirm);// editor.commit();// }// hidden();// popupWindow.setFocusable(false);// popupWindow.update();// }// }); // 手触碰到pop时，获取焦点，以实现点击事件 popupWindow.setTouchInterceptor(new OnTouchListener() { public boolean onTouch(View v, MotionEvent event) { // 刚进入pop界面，listveiw滚动标识设为false，pop界面焦点设为true。 isScroll = false; popupWindow.setFocusable(true); popupWindow.update(); return false; } }); } /** * 创建弹窗 * @Description * @author XiongJie * @param dialogView */ private void createPopupWindow(View dialogView){ initView(dialogView); initData(); setListener(); } /** * @Description 初始化界面控件 * @author XiongJie * @param dialogView */ private void initView(View dialogView) { gvCoditionList = (GridView) dialogView.findViewById(R.id.gv_codition_list); btReset = (Button) dialogView.findViewById(R.id.bt_reset); btConfirm = (Button) dialogView.findViewById(R.id.bt_confirm); vBg = dialogView.findViewById(R.id.v_bg); } /** * @Description 初始化数据 * @author XiongJie */ public void initData() { coditionAdapter = new CoditionAdapter(activity,gvCoditionList); coditionAdapter.setData(valueBeanList); gvCoditionList.setAdapter(coditionAdapter); btConfirm.setBackgroundColor(activity.getResources().getColor(R.color.c_d82828)); } /** * @Description 事件处理 * @author XiongJie */ private void setListener() { btReset.setOnClickListener(new ViewClickListener()); btConfirm.setOnClickListener(new ViewClickListener()); vBg.setOnClickListener(new ViewClickListener()); } /** * 返回当前popupWindow是否显示状态 */ public boolean hasShowing() { return null == popupWindow ? false : popupWindow.isShowing(); } /** * 显示PopupWindow界面 */ public void show() { if (hasShowing()) { return; } if (null != activity && !activity.isFinishing()) { if (null == view) { view = activity.getWindow().getDecorView(); } popupWindow.showAsDropDown(view); } } /** * 隐藏PopupWindow界面 */ public void hidden() { if (null == popupWindow) { return; } popupWindow.dismiss(); } /** * 按钮点击事件 * @Description * @author XiongJie * @date 2016年11月6日 下午4:12:27 */ class ViewClickListener implements OnClickListener{ @Override public void onClick(View v) { switch(v.getId()){ case R.id.bt_reset: //重置 if(null != valueBeanList && valueBeanList.size() > 0){ for(ValueBean valueBean : valueBeanList){ valueBean.setIsChoose("1002"); } coditionAdapter.setData(valueBeanList); } break; case R.id.bt_confirm: //确认 Editor editor = priorityPre.edit(); editor.putInt("searchType", searchType); editor.putBoolean("isClickConfirm", true); editor.commit();// 提交修改 hidden(); break; case R.id.v_bg: hidden(); break; } } } /** * 获取PopupWindow对象 * @Description * @author XiongJie * @return */ public PopupWindow getPopupWindow() { return popupWindow; }}

更多关于Android相关内容感兴趣的读者可查看本站专题：《Android开发入门与进阶教程》、《Android调试技巧与常见问题解决方法汇总》、《Android基本组件用法总结》、《Android视图View技巧总结》、《Android布局layout技巧总结》及《Android控件用法总结》

希望本文所述对大家Android程序设计有所帮助。