首页 > 系统 > Android > 正文

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

2019-10-22 18:22:52
字体:
来源:转载
供稿:网友

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

一、效果图:

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开发频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表