Android開發(fā)實現(xiàn)仿京東商品搜索選項卡彈窗功能
本文實例講述了Android開發(fā)實現(xiàn)仿京東商品搜索選項卡彈窗功能。分享給大家供大家參考,具體如下:
一、效果圖:
二、思路:
(1)首先頂部布局由通過LinearLayout水平按比重平均分配各個item寬度。
(2)每個item設(shè)置兩種狀態(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)先篩選條件彈窗提示圖標(biāo)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)先篩選條件彈窗提示圖標(biāo)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)先篩選條件彈窗提示圖標(biāo)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)先篩選條件彈窗提示圖標(biāo)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" > <!-- 設(shè)置矩形頂部圓角 --> <corners android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp" android:topLeftRadius="@dimen/dp4" android:topRightRadius="@dimen/dp4" /> <!-- 設(shè)置填充顏色 --> <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" > <!-- 設(shè)置矩形頂部圓角 --> <corners android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp" android:topLeftRadius="@dimen/dp4" android:topRightRadius="@dimen/dp4" /> <!-- 設(shè)置填充顏色 --> <solid android:color="@color/ffffffff" /> <!-- 設(shè)置內(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切換邏輯
/** * 設(shè)置優(yōu)先篩選彈窗選中類型 * * @Description * @author XiongJie * @param selectType */ public void setSelectState(int selectType) { //4、設(shè)置每個篩選條件布局的參數(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; /**構(gòu)造方法**/ 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); // 此處必須設(shè)置,否則點擊事件無效,選擇不了 popupWindow.setBackgroundDrawable(new BitmapDrawable()); // 設(shè)置顯示動畫 // popupWindow.setAnimationStyle(R.style.PopupWindowAinmation); // 設(shè)置邊緣點擊可消失 popupWindow.setOutsideTouchable(true); // 設(shè)置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); // 為了設(shè)置返回按鈕關(guān)閉彈層 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滾動標(biāo)識設(shè)為false,pop界面焦點設(shè)為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()); } /** * 返回當(dāng)前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; } }
更多關(guān)于Android相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《Android開發(fā)入門與進階教程》、《Android調(diào)試技巧與常見問題解決方法匯總》、《Android基本組件用法總結(jié)》、《Android視圖View技巧總結(jié)》、《Android布局layout技巧總結(jié)》及《Android控件用法總結(jié)》
希望本文所述對大家Android程序設(shè)計有所幫助。
相關(guān)文章
android開發(fā)實現(xiàn)列表控件滾動位置精確保存和恢復(fù)的方法(推薦)
下面小編就為大家?guī)硪黄猘ndroid開發(fā)實現(xiàn)列表控件滾動位置精確保存和恢復(fù)的方法(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-03-03RecyclerView通過GridLayoutManager實現(xiàn)多樣式布局的示例
本篇文章主要介紹了RecyclerView通過GridLayoutManager實現(xiàn)多樣式布局的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-12-12使用User Agent分辨出Android設(shè)備類型的安全做法
這篇文章主要介紹了使用User Agent分辨出Android設(shè)備類型的安全做法,本文得出的結(jié)論是當(dāng)你依據(jù)檢測UA來判斷Android手機設(shè)備,請同時檢查android和mobile兩個字符串,需要的朋友可以參考下2015-01-01native.js獲取手機硬件基本信息實例代碼android版
本文為大家分享了native.js獲取手機硬件基本信息實例代碼android版包括手機MAC地址,手機內(nèi)存大小,手機存儲空間大小,手機CPU信息等手機硬件基本信息2018-09-09Android App后臺服務(wù)報告工作狀態(tài)實例
這篇文章主要介紹了Android App后臺服務(wù)報告工作狀態(tài)實例,使用LocalBroadcastManager發(fā)送和接收狀態(tài),需要的朋友可以參考下2014-06-06Android?自定義開源庫?EasyView實現(xiàn)詳解
這篇文章主要為大家介紹了Android自定義開源庫EasyView實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-04-04