Android开发实现仿京东商品搜索选项卡弹窗功能
程序员文章站
2022-06-10 16:48:37
本文实例讲述了android开发实现仿京东商品搜索选项卡弹窗功能。分享给大家供大家参考,具体如下:
一、效果图:
二、思路:
(1)首先顶部布局由通过linear...
本文实例讲述了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程序设计有所帮助。
下一篇: Linux批量替换文件内容