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

更新時間：2017年07月06日 09:55:20 作者：奔跑的佩恩

本篇文章主要介紹了Android中PopuWindow實現(xiàn)下拉列表實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

前言

之前講過一篇關于PopuWindow的基本使用的文章，想了解的同學可以參考：PopupWindow的基本使用

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

正文

文章可能會有點長，大家將就著看吧。先上波效果圖才是厚道的：

下面開始正式講解。

基礎依賴，由于下拉列表是用RecycleView實現(xiàn)，然后控件初始化用到ButterKnife，所以要在app的gradle中添加相關依賴：

 //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點擊外部消失，則設置 this.setFocusable(true)
 *   若要popwindow點擊外部不消失，不做setFocusable設置，也不要設置成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基本設置 **/
  protected void setWindow() {
    this.setContentView(mLayoutView);
    this.setWidth(mWidth);
    this.setHeight(mHeight);
    // this.setFocusable(true);// 可點擊
    // 實例化一個ColorDrawable顏色為半透明(半透明遮罩顏色代碼#66000000)
    ColorDrawable dw = new ColorDrawable(Color.TRANSPARENT);
    this.setBackgroundDrawable(dw);
  }

  /** PopupWindow背景設置 **/
  protected void setBackground(int color) {
    // 實例化一個ColorDrawable顏色為半透明
    ColorDrawable dw = new ColorDrawable(color);
    this.setBackgroundDrawable(dw);
  }

  protected abstract void initView();
  protected abstract void initData();
  protected abstract void setListener();

  /** PopupWindow點擊間隙處理，根據(jù)實際情況重寫 **/
  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ù)字即可，已經(jīng)做過dp2px轉換)
   */
  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ù)字即可，已經(jīng)做過dp2px轉換)
   */
  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ù)字即可，已經(jīng)做過dp2px轉換)
   */
  public void showAtLocationBottom(View view, float marginDp){
    showAsDropDown(view, 0, dp2px(marginDp));
    update();
  }


  /**
   * 顯示在控件左方
   * 
   * @param view
   *      依賴的控件
   * @param marginDp
   *      設置的間距(直接寫數(shù)字即可，已經(jīng)做過dp2px轉換)
   */
  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ù)字即可，已經(jīng)做過dp2px轉換)
   */
  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轉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;
  }

}

第二步，寫一個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顯示隱藏的動畫

    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類中涉及到的內容挺多，以下將細細講解。

1.--- 聲明中涉及到RecycleView的一個適配器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);不然會報錯
    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對應的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"對應的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對應的其實都是純顏色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>

也許有的同學會問android:background="@drawable/manager_fragment_popu_bg文件中為什惡魔不直接用color屬性設置背景切換，而要用color寫個drawable供調用，其實我一開始也是這樣弄的，無奈報錯，具體原因不詳，知道的同學可以回復下，此處不做重點。

4.--- item_popu_order_layout.xml中android:textColor="@drawable/text_color_bg"對應的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的構造函數(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();
  }

這里我其實是圖方便，所以直接傳了個固定寬度 ScreenUtil.dp2px(100,context) 進去了，實際開發(fā)中因為是點擊某個控件然后在控件下面顯示出來，那么應該傳那個控件的寬度。

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"是設置滾動條方向，android:scrollbarThumbVertical="@color/blue"是設置滾動條顏色，android:scrollbarStyle="outsideOverlay"設置滾動條樣式

7.---講講OrderPop的顯隱動畫問題

在OrderPop類中的initData()方法中涉及到這樣一行代碼：

復制代碼代碼如下:

setAnimationStyle(R.style.popuwindow_up_style);//popuwindow顯示隱藏的動畫

涉及到popuwindow的顯隱動畫問題，大家可以參考的前言中提到的popuwindow的基本使用文章，這里就不廢話了。

第三步，OrderPop寫好了，就該看看在MainActivity中是怎么調用的了，貼出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項點擊事件
    mOrderPop.getAdapter().setOnRecyclerItemClickListener(new ManagerPopuAdapter.OnRecyclerItemClickListener() {
      @Override
      public void onRecyclerClick(int position) {
        showShortToast(mOrderList.get(position));
        //更新mTvOrder顯示內容
        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對應的布局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對應的代碼如下：

<?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對應的分別是一張箭頭向上的圖片和一張箭頭向下的圖片，這里就不多說了。

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

ok，整個實現(xiàn)過程大致就是這樣的。今天關于PopuWindow實現(xiàn)下拉列表的知識就講到這里了，謝謝誒。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Android實現(xiàn)錄音監(jiān)聽動畫的示例代碼
在很多app種內置了語音助手,也存在各種動畫,這篇文章主要為大家詳細介紹了Android實現(xiàn)錄音監(jiān)聽動畫的示例代碼,感興趣的小伙伴可以跟隨小編一起學習一下
2023-12-12
Android開發(fā)之線程通信詳解
這篇文章主要為大家詳細介紹了Android開發(fā)中線程間通信的相關資料，文中的示例代碼講解詳細，對我們學習Android有一定的幫助，?需要的可以了解一下
2022-11-11
Android7.0上某些PopuWindow出現(xiàn)顯示位置不正確問題的解決方法
這篇文章主要介紹了Android7.0上某些PopuWindow出現(xiàn)顯示位置不正確問題的解決方法,涉及針對Android7.0中PopuWindow屬性與方法的相關設置技巧,需要的朋友可以參考下
2017-10-10
Android Studio實現(xiàn)簡單計算器APP
這篇文章主要為大家詳細介紹了Android Studio實現(xiàn)簡單計算器APP，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-03-03
Android中WebView與Js交互的實現(xiàn)方法
本文給大家介紹android中webview與js交互的實現(xiàn)方法，本文介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起學習
2016-05-05
Android O添加桌面快捷方式的示例
本篇文章主要介紹了AndroidO添加桌面快捷方式的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-01-01
Android開發(fā)全局音量調整的實現(xiàn)方式詳解
這篇文章主要為大家介紹了Android開發(fā)全局音量調整的實現(xiàn)方式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-11-11
Android開發(fā)之數(shù)據(jù)的存儲方式詳解
本篇文章主要介紹了Android開發(fā)之數(shù)據(jù)的存儲方式，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧。
2016-11-11
Flutter實現(xiàn)不同縮放動畫效果詳解
這篇文章主要為大家詳細介紹了Flutter利用不同組件（ScaleTransition、SizeTransition、AnimatedSize和AnimatedBuilder）實現(xiàn)不同縮放動畫效果，感興趣的可以動手嘗試一下
2022-06-06
Android小程序實現(xiàn)切換背景顏色
這篇文章主要介紹了Android小程序實現(xiàn)切換背景顏色，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-05-05