Android中PopuWindow實(shí)現(xiàn)下拉列表實(shí)例
前言
之前講過一篇關(guān)于PopuWindow的基本使用的文章,想了解的同學(xué)可以參考:PopupWindow的基本使用
其實(shí),下拉列表Spanner(不知道控件拼寫是否正確)就能實(shí)現(xiàn),但是基于ui美化方面的考慮,用popuwindow實(shí)現(xiàn)是一個(gè)不錯(cuò)的選擇,今天就來講講PopuWindow實(shí)現(xiàn)下拉列表的具體實(shí)現(xiàn)吧。
正文
文章可能會(huì)有點(diǎn)長,大家將就著看吧。先上波效果圖才是厚道的:
下面開始正式講解。
基礎(chǔ)依賴,由于下拉列表是用RecycleView實(shí)現(xiàn),然后控件初始化用到ButterKnife,所以要在app的gradle中添加相關(guān)依賴:
//RecycleView compile 'com.android.support:recyclerview-v7:25.2.0' //butterKnife compile 'com.jakewharton:butterknife:8.5.1' //這條千萬不能忘記!! annotationProcessor 'com.jakewharton:butterknife-compiler:8.5.1'
第一步,不言而喻,肯定是上BasePopupWindow代碼:
/*** * PopupWindow基類 * * @author pei * @version 1.0 * @cretae 2016-7-21 * @注:若要popwindow點(diǎn)擊外部消失,則設(shè)置 this.setFocusable(true) * 若要popwindow點(diǎn)擊外部不消失,不做setFocusable設(shè)置,也不要設(shè)置成this.setFocusable(false) * */ public abstract class BasePopupWindow extends PopupWindow { protected View mLayoutView; protected int mLayoutId; protected Context mContext; protected int mWidth; protected int mHeight; public BasePopupWindow(int width, int height, int layoutId, Context context) { this.mWidth = width; this.mHeight = height; this.mLayoutId = layoutId; this.mContext = context; mLayoutView = LayoutInflater.from(context).inflate(mLayoutId, null); setWindow(); } /** PopupWindow基本設(shè)置 **/ protected void setWindow() { this.setContentView(mLayoutView); this.setWidth(mWidth); this.setHeight(mHeight); // this.setFocusable(true);// 可點(diǎn)擊 // 實(shí)例化一個(gè)ColorDrawable顏色為半透明(半透明遮罩顏色代碼#66000000) ColorDrawable dw = new ColorDrawable(Color.TRANSPARENT); this.setBackgroundDrawable(dw); } /** PopupWindow背景設(shè)置 **/ protected void setBackground(int color) { // 實(shí)例化一個(gè)ColorDrawable顏色為半透明 ColorDrawable dw = new ColorDrawable(color); this.setBackgroundDrawable(dw); } protected abstract void initView(); protected abstract void initData(); protected abstract void setListener(); /** PopupWindow點(diǎn)擊間隙處理,根據(jù)實(shí)際情況重寫 **/ protected void onTouchdimiss() { // mMenuView添加OnTouchListener監(jiān)聽判斷獲取觸屏位置如果在選擇框外面則銷毀彈出框 mLayoutView.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View view, MotionEvent event) { // int height = mLayoutView.getTop(); // int y = (int) event.getY(); // if (event.getAction() == MotionEvent.ACTION_UP) { // if (y < height) { // dismiss(); // } // } return false; } }); } /** * 顯示在控件正上方 * * @param view * 依賴的控件 * @param marginDp * 設(shè)置的間距(直接寫數(shù)字即可,已經(jīng)做過dp2px轉(zhuǎn)換) */ public void showAtLocationTop(View view, float marginDp) { mLayoutView.measure(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED); int popupWidth = mLayoutView.getMeasuredWidth(); int popupHeight = mLayoutView.getMeasuredHeight(); int[] location = new int[2]; view.getLocationOnScreen(location); showAtLocation(view, Gravity.NO_GRAVITY, (location[0] + view.getWidth() / 2) - popupWidth / 2, location[1] - popupHeight - dp2px(marginDp)); update(); } /** * 顯示在控件正下方 * * @param view * 依賴的控件 * @param marginDp * 設(shè)置的間距(直接寫數(shù)字即可,已經(jīng)做過dp2px轉(zhuǎn)換) */ public void showAtLocationGravityBottom(View view, float marginDp) { mLayoutView.measure(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED); int popupWidth = mLayoutView.getMeasuredWidth(); int popupHeight = mLayoutView.getMeasuredHeight(); int[] location = new int[2]; view.getLocationOnScreen(location); showAtLocation(view, Gravity.NO_GRAVITY, (location[0]+view.getWidth()/2)-popupWidth/2, location[1]+view.getHeight()+dp2px(marginDp)); update(); } /**顯示在控件下方 * * @param view 依賴的控件 * @param marginDp 設(shè)置的間距(直接寫數(shù)字即可,已經(jīng)做過dp2px轉(zhuǎn)換) */ public void showAtLocationBottom(View view, float marginDp){ showAsDropDown(view, 0, dp2px(marginDp)); update(); } /** * 顯示在控件左方 * * @param view * 依賴的控件 * @param marginDp * 設(shè)置的間距(直接寫數(shù)字即可,已經(jīng)做過dp2px轉(zhuǎn)換) */ public void showAtLocationLeft(View view, float marginDp) { mLayoutView.measure(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED); int popupWidth = mLayoutView.getMeasuredWidth(); int popupHeight = mLayoutView.getMeasuredHeight(); int[] location = new int[2]; view.getLocationOnScreen(location); showAtLocation(view, Gravity.NO_GRAVITY, location[0] - popupWidth - dp2px(marginDp), (location[1] + view.getHeight() / 2) - popupHeight / 2); update(); } /** * 顯示在控件右方 * * @param view * 依賴的控件 * @param marginDp * 設(shè)置的間距(直接寫數(shù)字即可,已經(jīng)做過dp2px轉(zhuǎn)換) */ public void showAtLocationRight(View view, float marginDp) { mLayoutView.measure(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED); int popupWidth = mLayoutView.getMeasuredWidth(); int popupHeight = mLayoutView.getMeasuredHeight(); int[] location = new int[2]; view.getLocationOnScreen(location); showAtLocation(view, Gravity.NO_GRAVITY, location[0] + view.getWidth() + dp2px(marginDp), (location[1] + view.getHeight() / 2) - popupHeight / 2); update(); } /** dp轉(zhuǎn)px **/ private int dp2px(float dpVal) { return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpVal, mContext.getResources().getDisplayMetrics()); } /** 通過id獲得view **/ @SuppressWarnings("unchecked") protected <T extends View> T getView(int viewId) { View view = null; if (mLayoutView == null) { mLayoutView = LayoutInflater.from(mContext).inflate(mLayoutId, null); } view = mLayoutView.findViewById(viewId); return (T) view; } }
第二步,寫一個(gè)OrderPop繼承于BasePopupWindow:
/** * Instruction:下拉列表Pop * <p> * Author:pei * Date: 2017/6/28 * Description: */ public class OrderPop extends BasePopupWindow{ private RecyclerView mRecyclerView; private List<String>mDatas; private ManagerPopuAdapter<String> managerPopuAdapter; public OrderPop(Context context, List<String>datas) { super(ScreenUtil.dp2px(100,context), ScreenUtil.dp2px(150,context), R.layout.pop_order, context); this.mDatas=datas; initView(); initData(); setListener(); } @Override protected void initView() { mRecyclerView=getView(R.id.recycler_view); } @Override protected void initData() { setFocusable(true); setAnimationStyle(R.style.popuwindow_up_style);//popuwindow顯示隱藏的動(dòng)畫 mRecyclerView.setHasFixedSize(true); mRecyclerView.setLayoutManager(new LinearLayoutManager(mContext)); managerPopuAdapter = new ManagerPopuAdapter<String>(mContext, mDatas); mRecyclerView.setAdapter(managerPopuAdapter); } @Override protected void setListener(){ } public ManagerPopuAdapter getAdapter(){ return managerPopuAdapter; } public void notifyDataSetChanged(){ if(managerPopuAdapter!=null){ managerPopuAdapter.notifyDataSetChanged(); } } public void setCurrentIndex(int position){ if(managerPopuAdapter!=null){ managerPopuAdapter.setIndex(position); } } }
OrderPop類中涉及到的內(nèi)容挺多,以下將細(xì)細(xì)講解。
1.--- 聲明中涉及到RecycleView的一個(gè)適配器ManagerPopuAdapter,其代碼如下:
/** * Instruction: Orderpop的適配器 * <p> * Author:pei * Date: 2017/6/29 * Description: */ public class ManagerPopuAdapter<T> extends RecyclerView.Adapter { protected Context mContext; protected View mLayoutView; protected List<T> mData; private ViewHolder mViewHolder; protected OnRecyclerItemClickListener mOnRecyclerItemClickListener; private int mIndex; public void setOnRecyclerItemClickListener(OnRecyclerItemClickListener onRecyclerItemClickListener) { this.mOnRecyclerItemClickListener = onRecyclerItemClickListener; } public ManagerPopuAdapter(Context context, List<T> data) { this.mContext = context; this.mData = data; } @Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { //注:不可使用view=LayoutInflater.from(mContext).inflate(R.layout.item_layout,null);不然會(huì)報(bào)錯(cuò) mLayoutView = LayoutInflater.from(mContext).inflate(R.layout.item_popu_order_layout, parent, false); return new ViewHolder(mLayoutView); } @Override public int getItemViewType(int position) { return super.getItemViewType(position); } @Override public int getItemCount() { return mData == null ? 0 : mData.size(); } @Override public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) { mViewHolder = ((ViewHolder) holder); initData(position); setListener(position); } private void initData(int position) { String content =mData.get(position).toString(); mViewHolder.tvContent.setText(content); if(mIndex==position){ mViewHolder.tvContent.setSelected(true); }else{ mViewHolder.tvContent.setSelected(false); } } private void setListener(final int position) { mViewHolder.tvContent.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (mOnRecyclerItemClickListener != null) { mOnRecyclerItemClickListener.onRecyclerClick(position); } } }); } public void setIndex(int index){ this.mIndex=index; } class ViewHolder extends RecyclerView.ViewHolder { TextView tvContent; public ViewHolder(View view) { super(view); tvContent=(TextView)view.findViewById(R.id.tv_content); } } public interface OnRecyclerItemClickListener { void onRecyclerClick(int position); } }
2.--- ManagerPopuAdapter.java對應(yīng)的layout----- item_popu_order_layout.xml代碼:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="3dp" android:layout_marginBottom="3dp"> <TextView android:id="@+id/tv_content" android:layout_width="match_parent" android:layout_height="wrap_content" android:lineSpacingExtra="1dp" android:lineSpacingMultiplier="1.0" android:layout_marginLeft="2dp" android:layout_marginRight="2dp" android:padding="3dp" android:background="@drawable/manager_fragment_popu_bg" android:textColor="@drawable/text_color_bg" android:textSize="12sp"/> </LinearLayout>
3.--- item_popu_order_layout.xml中android:background="@drawable/manager_fragment_popu_bg"對應(yīng)的drawable文件為:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/manager_fragment_popu_pressed" android:state_selected="true" /> <item android:drawable="@drawable/manager_fragment_popu_normal" android:state_selected="false"/> </selector>
manager_fragment_popu_pressed和manager_fragment_popu_normal對應(yīng)的其實(shí)都是純顏色xml文件。
manager_fragment_popu_pressed.xml代碼如下:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <solid android:color="@color/color_f5cc1d"></solid> </shape>
manager_fragment_popu_normal.xml代碼如下:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <solid android:color="@color/transparent"></solid> </shape>
也許有的同學(xué)會(huì)問android:background="@drawable/manager_fragment_popu_bg文件中為什惡魔不直接用color屬性設(shè)置背景切換,而要用color寫個(gè)drawable供調(diào)用,其實(shí)我一開始也是這樣弄的,無奈報(bào)錯(cuò),具體原因不詳,知道的同學(xué)可以回復(fù)下,此處不做重點(diǎn)。
4.--- item_popu_order_layout.xml中android:textColor="@drawable/text_color_bg"對應(yīng)的drawable文件如下:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="@color/color_ff5b0a" android:state_selected="true"/> <item android:color="@color/black" android:state_selected="false"/> </selector>
5.---講講OrderPop的構(gòu)造函數(shù)
public OrderPop(Context context, List<String>datas) { super(ScreenUtil.dp2px(100,context), ScreenUtil.dp2px(150,context), R.layout.pop_order, context); this.mDatas=datas; initView(); initData(); setListener(); }
這里我其實(shí)是圖方便,所以直接傳了個(gè)固定寬度 ScreenUtil.dp2px(100,context) 進(jìn)去了,實(shí)際開發(fā)中因?yàn)槭屈c(diǎn)擊某個(gè)控件然后在控件下面顯示出來,那么應(yīng)該傳那個(gè)控件的寬度。
6.---OrderPop的layout布局pop_order.xml代碼如下:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/color_c0c0c0"> <android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="vertical" android:scrollbarThumbVertical="@color/blue" android:scrollbarStyle="outsideOverlay"/> </LinearLayout>
其中,android:scrollbars="vertical"是設(shè)置滾動(dòng)條方向,android:scrollbarThumbVertical="@color/blue"是設(shè)置滾動(dòng)條顏色,android:scrollbarStyle="outsideOverlay"設(shè)置滾動(dòng)條樣式
7.---講講OrderPop的顯隱動(dòng)畫問題
在OrderPop類中的initData()方法中涉及到這樣一行代碼:
setAnimationStyle(R.style.popuwindow_up_style);//popuwindow顯示隱藏的動(dòng)畫
涉及到popuwindow的顯隱動(dòng)畫問題,大家可以參考的前言中提到的popuwindow的基本使用文章,這里就不廢話了。
第三步,OrderPop寫好了,就該看看在MainActivity中是怎么調(diào)用的了,貼出MainActivity的代碼:
/** * Created by Admin on 2017/5/19. */ public class MainActivity extends BaseActivity implements View.OnClickListener{ @BindView(R.id.tv_order) TextView mTvOrder; private static final int DEFAULT_INDEX=0; private List<String> mOrderList=new ArrayList<>(); private OrderPop mOrderPop; @Override protected int getContentViewId() { return R.layout.activity_main; } @Override protected void initData() { initOrderTextBar(); } /**訂單列表**/ private void initOrderTextBar(){ mOrderList.add("野蠻人"); mOrderList.add("圣騎士"); mOrderList.add("亞馬遜"); mOrderList.add("死靈法師"); mOrderList.add("法師"); mOrderList.add("德魯伊"); mOrderList.add("刺客"); mOrderPop=new OrderPop(mContext,mOrderList); setBarContent(mTvOrder,mOrderList,DEFAULT_INDEX); mOrderPop.setOnDismissListener(new PopupWindow.OnDismissListener() { @Override public void onDismiss(){ mTvOrder.setSelected(false); } }); //mOrderPop項(xiàng)點(diǎn)擊事件 mOrderPop.getAdapter().setOnRecyclerItemClickListener(new ManagerPopuAdapter.OnRecyclerItemClickListener() { @Override public void onRecyclerClick(int position) { showShortToast(mOrderList.get(position)); //更新mTvOrder顯示內(nèi)容 setBarContent(mTvOrder,mOrderList,position); //更新mOrderPop視圖選中背景 mOrderPop.setCurrentIndex(position); mOrderPop.notifyDataSetChanged(); } }); } @Override protected void setListener() { mTvOrder.setOnClickListener(this); } @Nullable @Override protected BasePresenter getPresenter() { return null; } @Override protected void onDestroy(){ super.onDestroy(); } @Override public void onClick(View v) { switch (v.getId()) { case R.id.tv_order: if(mOrderPop!=null&&!mOrderPop.isShowing()){ mTvOrder.setSelected(true);//控制mTvOrder變色 mOrderPop.showAtLocationGravityBottom(mTvOrder,3);//顯示mOrderPop //更新mOrderPop視圖選中背景 mOrderPop.setCurrentIndex(getIndexByTag(mTvOrder)); mOrderPop.notifyDataSetChanged(); } break; default: break; } } private void setBarContent(TextView textView,List<String>data,int position){ textView.setTag(position); textView.setText(data.get(position).toString()); } private int getIndexByTag(TextView textView){ int index=DEFAULT_INDEX; Object obj=textView.getTag(); if(obj!=null){ try { index=Integer.valueOf(obj.toString()); } catch (NumberFormatException e) { e.printStackTrace(); } } return index; } }
MainActivity對應(yīng)的布局activity_main.xml代碼如下:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white" android:gravity="center" android:orientation="vertical"> <TextView android:id="@+id/tv_order" android:layout_width="80dp" android:layout_height="wrap_content" android:lineSpacingExtra="1dp" android:lineSpacingMultiplier="1.0" android:paddingLeft="5dp" android:paddingRight="5dp" android:drawableRight="@drawable/manager_fragment_order_bg" android:textColor="@drawable/text_color_bg" android:textSize="14sp"/> </LinearLayout>
android:drawableRight="@drawable/manager_fragment_order_bg"中manager_fragment_order_bg.xml對應(yīng)的代碼如下:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@mipmap/ic_drop_up" android:state_selected="true" /> <item android:drawable="@mipmap/ic_drop_down" android:state_selected="false"/> </selector>
ic_drop_up和ic_drop_down對應(yīng)的分別是一張箭頭向上的圖片和一張箭頭向下的圖片,這里就不多說了。
android:textColor="@drawable/text_color_bg"的話是設(shè)置文字選中和未被選中時(shí)顯示的顏色,在上面的第二步第四條已經(jīng)講過了,這里就不說了。
ok,整個(gè)實(shí)現(xiàn)過程大致就是這樣的。今天關(guān)于PopuWindow實(shí)現(xiàn)下拉列表的知識就講到這里了,謝謝誒。希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android使用Spinner控件實(shí)現(xiàn)下拉列表的案例
- Android控件Spinner實(shí)現(xiàn)下拉列表及監(jiān)聽功能
- Android UI控件之Spinner下拉列表效果
- Android自定義單選多選下拉列表的實(shí)例代碼
- Android下拉列表選項(xiàng)框及指示箭頭動(dòng)畫
- Android編程實(shí)現(xiàn)多列顯示的下拉列表框Spinner功能示例
- Android中使用Spinner實(shí)現(xiàn)下拉列表功能
- Android仿美團(tuán)淘寶實(shí)現(xiàn)多級下拉列表菜單功能
- 詳解Android的Socket通信、List加載更多、Spinner下拉列表
- Android下拉列表框Spinner使用方法詳解
相關(guān)文章
Android實(shí)現(xiàn)錄音監(jiān)聽動(dòng)畫的示例代碼
在很多app種內(nèi)置了語音助手,也存在各種動(dòng)畫,這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)錄音監(jiān)聽動(dòng)畫的示例代碼,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12Android7.0上某些PopuWindow出現(xiàn)顯示位置不正確問題的解決方法
這篇文章主要介紹了Android7.0上某些PopuWindow出現(xiàn)顯示位置不正確問題的解決方法,涉及針對Android7.0中PopuWindow屬性與方法的相關(guān)設(shè)置技巧,需要的朋友可以參考下2017-10-10Android Studio實(shí)現(xiàn)簡單計(jì)算器APP
這篇文章主要為大家詳細(xì)介紹了Android Studio實(shí)現(xiàn)簡單計(jì)算器APP,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03Android中WebView與Js交互的實(shí)現(xiàn)方法
本文給大家介紹android中webview與js交互的實(shí)現(xiàn)方法,本文介紹的非常詳細(xì),具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)2016-05-05Android開發(fā)全局音量調(diào)整的實(shí)現(xiàn)方式詳解
這篇文章主要為大家介紹了Android開發(fā)全局音量調(diào)整的實(shí)現(xiàn)方式詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11Android開發(fā)之?dāng)?shù)據(jù)的存儲(chǔ)方式詳解
本篇文章主要介紹了Android開發(fā)之?dāng)?shù)據(jù)的存儲(chǔ)方式,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧。2016-11-11Flutter實(shí)現(xiàn)不同縮放動(dòng)畫效果詳解
這篇文章主要為大家詳細(xì)介紹了Flutter利用不同組件(ScaleTransition、SizeTransition、AnimatedSize和AnimatedBuilder)實(shí)現(xiàn)不同縮放動(dòng)畫效果,感興趣的可以動(dòng)手嘗試一下2022-06-06