前言
之前講過一篇關(guān)于PopuWindow的基本使用的文章绿语，想了解的同學可以參考
PopupWindow的基本使用
其實钮孵，下拉列表Spanner(不知道控件拼寫是否正確)就能實現(xiàn)秩霍，但是基于ui美化方面的考慮，用popuwindow實現(xiàn)是一個不錯的選擇单匣，今天就來講講PopuWindow實現(xiàn)下拉列表的具體實現(xiàn)吧夕凝。
正文
文章可能會有點長，大家將就著看吧户秤。先上波效果圖才是厚道的：
1.gif
下面開始正式講解码秉。
基礎(chǔ)依賴，由于下拉列表是用RecycleView實現(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點擊外部消失府蔗，則設置 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轉(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ù)字即可仲吏，已經(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ù)字即可不铆，已經(jīng)做過dp2px轉(zhuǎn)換)
*/
public void showAtLocationBottom(View view, float marginDp){
showAsDropDown(view, 0, dp2px(marginDp));
update();
}
/**
* 顯示在控件左方
*
* @param view
* 依賴的控件
* @param marginDp
* 設置的間距(直接寫數(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ù)字即可裹唆，已經(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;
}
}
第二步誓斥，寫一個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類中涉及到的內(nèi)容挺多，以下將細細講解许帐。
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供調(diào)用距芬，其實我一開始也是這樣弄的，無奈報錯羡鸥，具體原因不詳蔑穴，知道的同學可以回復下，此處不做重點惧浴。
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的構(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();
}
這里我其實是圖方便存和，所以直接傳了個固定寬度 ScreenUtil.dp2px(100,context) 進去了，實際開發(fā)中因為是點擊某個控件然后在控件下面顯示出來，那么應該傳那個控件的寬度捐腿，至于怎么在MainActivity的oncreate方法中獲取控件寬度纵朋，大家可以看
android獲取控件寬高
這里就不廢話了。
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中是怎么調(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項點擊事件
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對應的布局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)過程大致就是這樣的狞悲。今天關(guān)于PopuWindow實現(xiàn)下拉列表的知識就講到這里了撮抓，謝謝誒。
