Android中PopuWindow實(shí)現(xiàn)下拉列表實(shí)例

2019-10-22 18:32:57

字體：大中小

供稿：網(wǎng)友

前言

之前講過(guò)一篇關(guān)于PopuWindow的基本使用的文章，想了解的同學(xué)可以參考：PopupWindow的基本使用

其實(shí)，下拉列表Spanner(不知道控件拼寫是否正確)就能實(shí)現(xiàn)，但是基于ui美化方面的考慮，用popuwindow實(shí)現(xiàn)是一個(gè)不錯(cuò)的選擇，今天就來(lái)講講PopuWindow實(shí)現(xiàn)下拉列表的具體實(shí)現(xiàn)吧。

正文

文章可能會(huì)有點(diǎn)長(zhǎng)，大家將就著看吧。先上波效果圖才是厚道的：

PopuWindow,下拉列表,PopuWindow實(shí)現(xiàn)下拉列表,Android

下面開始正式講解。

基礎(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'  //這條千萬(wàn)不能忘記!!  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)做過(guò)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)做過(guò)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)做過(guò)dp2px轉(zhuǎn)換)   */  public void showAtLocationBottom(View view, float marginDp){    showAsDropDown(view, 0, dp2px(marginDp));    update();  }  /**   * 顯示在控件左方   *    * @param view   *      依賴的控件   * @param marginDp   *      設(shè)置的間距(直接寫數(shù)字即可，已經(jīng)做過(guò)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)做過(guò)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());  }  /** 通過(guò)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對(duì)應(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"對(duì)應(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對(duì)應(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í)我一開始也是這樣弄的，無(wú)奈報(bào)錯(cuò)，具體原因不詳，知道的同學(xué)可以回復(fù)下，此處不做重點(diǎn)。

4.--- item_popu_order_layout.xml中android:textColor="@drawable/text_color_bg"對(duì)應(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è)控件然后在控件下面顯示出來(lái)，那么應(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()方法中涉及到這樣一行代碼：

復(fù)制代碼代碼如下:

	
	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對(duì)應(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對(duì)應(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對(duì)應(yīng)的分別是一張箭頭向上的圖片和一張箭頭向下的圖片，這里就不多說(shuō)了。

android:textColor="@drawable/text_color_bg"的話是設(shè)置文字選中和未被選中時(shí)顯示的顏色，在上面的第二步第四條已經(jīng)講過(guò)了，這里就不說(shuō)了。

ok，整個(gè)實(shí)現(xiàn)過(guò)程大致就是這樣的。今天關(guān)于PopuWindow實(shí)現(xiàn)下拉列表的知識(shí)就講到這里了，謝謝誒。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。

注：相關(guān)教程知識(shí)閱讀請(qǐng)移步到Android開發(fā)頻道。

上一篇：android閱讀器長(zhǎng)按選擇文字功能實(shí)現(xiàn)代碼

下一篇：Android 屏幕實(shí)現(xiàn)上下翻轉(zhuǎn)