Android开发实现仿京东商品搜索选项卡弹窗功能

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

一、效果图：

二、思路：

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

三、布局

（1）item布局

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

(2.1)点击item背景

(2.2)未点击item背景

（3）item切换逻辑

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;

public class PriorityPopupWindow extends PopupWindow {
  
  private LayoutInflater inflater;
  
  private Activity activity;
  
  public PopupWindow popupWindow = null;
  
  private GridView gvCoditionList;
  
  protected boolean isScroll = false;
  
  protected View view = null;
  
  private ArrayList valueBeanList;
  
  private CoditionAdapter coditionAdapter;
  
  private Button btReset;
  
  private Button bt/confirm/i;
  
  private SharedPreferences priorityPre;
  
  private int searchType;
  
  private View vBg;
  
  public PriorityPopupWindow(){
  }
  
  public void initPopupWindow(final Activity activity, View view, int layoutID,ArrayList 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.setonDismissListener(new onDismissListener() {
//      @Override
//      public void onDismiss() {
// //还原优先筛选控件显示状态
// if(activity instanceof SearchResultActivity){
//   ((SearchResultActivity)activity).setSelectState(4);
// }
//
// if(null != priorityPre){
//   boolean isClickConfirm = priorityPre.getBoolean("isClick/confirm/i", false);
//   Editor editor = priorityPre.edit();
//   editor.putInt("searchType", searchType);
//   editor.putBoolean("isClick/confirm/i", isClick/confirm/i);
//   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;
      }
    });
  }
  
  private void createPopupWindow(View dialogView){
    initView(dialogView);
    initData();
    setListener();
  }
  
  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/i);
    vBg = dialogView.findViewById(R.id.v_bg);
  }
  
  public void initData() {
    coditionAdapter = new CoditionAdapter(activity,gvCoditionList);
    coditionAdapter.setData(valueBeanList);
    gvCoditionList.setAdapter(coditionAdapter);
    bt/confirm/i.setBackgroundColor(activity.getResources().getColor(R.color.c_d82828));
  }
  
  private void setListener() {
    btReset.setonClickListener(new ViewClickListener());
    bt/confirm/i.setonClickListener(new ViewClickListener());
    vBg.setonClickListener(new ViewClickListener());
  }
  
  public boolean hasShowing() {
    return null == popupWindow ? false : popupWindow.isShowing();
  }
  
  public void show() {
    if (hasShowing()) {
      return;
    }
    if (null != activity && !activity.isFinishing()) {
      if (null == view) {
 view = activity.getWindow().getDecorView();
      }
      popupWindow.showAsDropDown(view);
    }
  }
  
  public void hidden() {
    if (null == popupWindow) {
      return;
    }
    popupWindow.dismiss();
  }
  
  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/i:
 //确认
 Editor editor = priorityPre.edit();
 editor.putInt("searchType", searchType);
 editor.putBoolean("isClick/confirm/i", true);
 editor.commit();// 提交修改
 hidden();
 break;
      case R.id.v_bg:
 hidden();
 break;
      }
    }
  }
  
  public PopupWindow getPopupWindow() {
    return popupWindow;
  }
}

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

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