Android開發(fā)實現(xiàn)仿京東商品搜索選項卡彈窗功能
更新時間：2017年11月21日 11:49:47 作者：勤修戒定慧
這篇文章主要介紹了Android開發(fā)實現(xiàn)仿京東商品搜索選項卡彈窗功能,涉及Android布局及事件響應相關操作技巧,需要的朋友可以參考下
本文實例講述了Android開發(fā)實現(xiàn)仿京東商品搜索選項卡彈窗功能。分享給大家供大家參考，具體如下：
一、效果圖：
二、思路：
（1）首先頂部布局由通過LinearLayout水平按比重平均分配各個item寬度。
（2）每個item設置兩種狀態(tài)，點擊狀態(tài)與未點擊狀態(tài)
（3）彈窗由PopupWindow實現(xiàn)
三、布局
（1）item布局
<!-- 優(yōu)先篩選條件布局 -->
<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" >
<!-- 單個優(yōu)先搜索條件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"/>
<!-- 優(yōu)先篩選條件彈窗提示圖標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>
<!-- 單個優(yōu)先搜索條件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"/>
<!-- 優(yōu)先篩選條件彈窗提示圖標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>
<!-- 單個優(yōu)先搜索條件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" />
<!-- 優(yōu)先篩選條件彈窗提示圖標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>
<!-- 單個優(yōu)先搜索條件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"/>
<!-- 優(yōu)先篩選條件彈窗提示圖標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" />
<!-- 內(nèi)容內(nèi)邊距 -->
<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" />
<!-- 設置內(nèi)容padding值 -->
<padding
android:bottom="@dimen/dp2"
android:left="@dimen/dp0"
android:right="@dimen/dp0"
android:top="-4dp" />
</shape>
</item>
</layer-list>
（3）item切換邏輯
/**
* 設置優(yōu)先篩選彈窗選中類型
*
* @Description
* @author XiongJie
* @param selectType
*/
public void setSelectState(int selectType) {
//4、設置每個篩選條件布局的參數(shù)
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;
/**
* 優(yōu)先搜索彈窗
* @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;
/**優(yōu)先篩選條件列表**/
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;
/**優(yōu)先篩選**/
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() {
// //還原優(yōu)先篩選控件顯示狀態(tài)
// 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時，獲取焦點，以實現(xiàn)點擊事件
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;
}
});
}
/**
* 創(chuàng)建彈窗
* @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 初始化數(shù)據(jù)
* @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是否顯示狀態(tài)
*/
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相關內(nèi)容感興趣的讀者可查看本站專題：《Android開發(fā)入門與進階教程》、《Android調(diào)試技巧與常見問題解決方法匯總》、《Android基本組件用法總結》、《Android視圖View技巧總結》、《Android布局layout技巧總結》及《Android控件用法總結》
希望本文所述對大家Android程序設計有所幫助。
相關文章
android開發(fā)實現(xiàn)列表控件滾動位置精確保存和恢復的方法(推薦)
下面小編就為大家?guī)硪黄猘ndroid開發(fā)實現(xiàn)列表控件滾動位置精確保存和恢復的方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
android自定義桌面其實很簡單，看一個例子就明白了2013-11-11
這篇文章主要為大家詳細介紹了Android自定義View實現(xiàn)直播點贊特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
RecyclerView通過GridLayoutManager實現(xiàn)多樣式布局的示例
本篇文章主要介紹了RecyclerView通過GridLayoutManager實現(xiàn)多樣式布局的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
使用User Agent分辨出Android設備類型的安全做法
這篇文章主要介紹了使用User Agent分辨出Android設備類型的安全做法,本文得出的結論是當你依據(jù)檢測UA來判斷Android手機設備,請同時檢查android和mobile兩個字符串,需要的朋友可以參考下2015-01-01
native.js獲取手機硬件基本信息實例代碼android版
本文為大家分享了native.js獲取手機硬件基本信息實例代碼android版包括手機MAC地址,手機內(nèi)存大小,手機存儲空間大小,手機CPU信息等手機硬件基本信息2018-09-09
在配置文件AndroidManifest.xml中向系統(tǒng)注冊receiver，子節(jié)點 intent-filter表示接收2013-02-02
這篇文章主要介紹了Android App后臺服務報告工作狀態(tài)實例,使用LocalBroadcastManager發(fā)送和接收狀態(tài),需要的朋友可以參考下2014-06-06
Android?自定義開源庫?EasyView實現(xiàn)詳解
這篇文章主要為大家介紹了Android自定義開源庫EasyView實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
這篇文章主要為大家詳細介紹了Android自定義帶圓角的ImageView，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08