Android 에서 PopuWindow 드 롭 다운 목록 인 스 턴 스 구현

머리말
전에 PopuWindow 의 기본 사용 에 관 한 글 을 한 편 했 는데 알 고 싶 은 학생 은 참고 할 수 있 습 니 다PopupWindow 의 기본 사용
사실 드 롭 다운 목록 Spanner(컨트롤 맞 춤 법 이 맞 는 지 모 르 겠 음)는 이 루어 질 수 있 지만 ui 미화 에 대한 고려 를 바탕 으로 popuwindow 로 이 루어 지 는 것 이 좋 은 선택 입 니 다.오늘 은 popuWindow 가 드 롭 다운 목록 을 실현 하 는 구체 적 인 실현 에 대해 이야기 해 보 겠 습 니 다.
본문
문장 이 좀 길 어 질 수 있 으 니 여러분 은 아 쉬 운 대로 보 세 요.먼저 윗 파 효과 그림 이 야 말로 두 꺼 운 것 이다.

다음은 본 격 적 인 설명 을 시작 하 겠 습 니 다.
기본 의존,드 롭 다운 목록 은 Recycle View 로 이 루어 진 다음 컨트롤 이 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      ,         **/
  protected void onTouchdimiss() {
    // mMenuView  OnTouchListener                        
    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
   *           (       ,    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
   *           (       ,    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      (       ,    dp2px  )
   */
  public void showAtLocationBottom(View view, float marginDp){
    showAsDropDown(view, 0, dp2px(marginDp));
    update();
  }


  /**
   *        
   * 
   * @param view
   *           
   * @param marginDp
   *           (       ,    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
   *           (       ,    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.---성명 에서 Recycle View 와 관련 된 어댑터 관리자 PopuAdapter 의 코드 는 다음 과 같 습 니 다.

/**
 * 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.---Manager PopuAdapter.java 에 대응 하 는 layout---itempopu_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/managerfragment_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 와 managerfragment_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>
안 드 로 이 드:background="@drawable/managerfragment_popu_bg 파일 에서 왜 악 마 는 color 속성 으로 배경 전환 을 직접 설정 하지 않 고 color 로 drawable 을 써 서 호출 해 야 합 니까?사실은 저도 처음에 이렇게 했 습 니 다.어 쩔 수 없 이 오 류 를 보 고 했 습 니 다.구체 적 인 원인 은 알려 지지 않 았 습 니 다.아 는 친구 들 은 답장 을 할 수 있 습 니 다.여 기 는 중점 을 두 지 않 습 니 다.
4.--- item_popu_order_layout.xml 에서 android:textColor="@drawable/textcolor_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 의 구조 함수 설명

 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)를 직접 전 달 했 습 니 다.실제 개발 에 서 는 어떤 컨트롤 을 클릭 하고 컨트롤 아래 에 표시 하기 때문에 그 컨트롤 의 폭 을 전 해 야 합 니 다.
6.---OrderPop 의 layout 레이아웃 poporder.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="outside Overlay"는 스크롤 바 스타일 을 설정 합 니 다.
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 에 대응 하 는 레이아웃 activitymain.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"중 관리자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 과 icdrop_down 에 대응 하 는 것 은 각각 화살표 가 위로 향 하 는 그림 과 화살표 가 아래로 향 하 는 그림 입 니 다.여 기 는 더 이상 말 하지 않 겠 습 니 다.
android:textColor="@drawable/text_color_bg"는 텍스트 선택 과 선택 되 지 않 았 을 때 표시 되 는 색상 을 설정 하 는 것 입 니 다.위의 두 번 째 단계 네 번 째 조 는 이미 말 했 습 니 다.여 기 는 말 하지 않 겠 습 니 다.
ok,전체 실현 과정 은 대체적으로 이렇다.오늘 PopuWindow 의 드 롭 다운 목록 실현 에 관 한 지식 은 여기까지 입 니 다.감사합니다.여러분 의 학습 에 도움 이 되 기 를 바 랍 니 다.여러분 들 도 저 희 를 많이 응원 해 주시 기 바 랍 니 다.

좋은 웹페이지 즐겨찾기