欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2022-06-10 16:48:37
本文实例讲述了android开发实现仿京东商品搜索选项卡弹窗功能。分享给大家供大家参考,具体如下: 一、效果图: 二、思路: (1)首先顶部布局由通过linear...

本文实例讲述了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开发入门与进阶教程》、《android调试技巧与常见问题解决方法汇总》、《android基本组件用法总结》、《android视图view技巧总结》、《android布局layout技巧总结》及《android控件用法总结

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