前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >自定义PopupWindow实现Spinner

自定义PopupWindow实现Spinner

作者头像
fanfan
发布2022-05-07 13:44:04
4320
发布2022-05-07 13:44:04
举报
文章被收录于专栏:编程思想之路

Android中的spinner控件点击之后是以弹出dialog 的形式供我们选择,但我们其实更希望可以看到是下拉菜单的感觉,如下图所示:

要实现这种效果其实也不难,自定义一个popupwindow控件就可以解决问题

在显示popupwindow时右侧箭头朝下,在popupwindow消失时右侧箭头朝右

先来看一下我自定义的popupwindow

SpPopWindow.java

代码语言:javascript
复制
public class SpPopWindow extends PopupWindow implements OnClickListener{

	private Context mContext;
	
	private TextView mThreeTv;
	private TextView mTenTv;
	private TextView mThirtyTv;
	private OnClickListener mListener;
	private OnDismissListener mDismissListener;


	public SpPopWindow(Context mContext,OnClickListener mListener,OnDismissListener mDismissListener) {
		super();
		this.mContext = mContext;
		this.mListener = mListener;
		this.mDismissListener = mDismissListener;
		initView();
	}
	
	@SuppressLint("NewApi")
	private void initView() {
		View view = LayoutInflater.from(mContext).inflate(R.layout.list_item_sp_pop,null);
		setContentView(view);
		setFocusable(true);
		setTouchable(true);
		setOutsideTouchable(true);
		update();
		setBackgroundDrawable(new ColorDrawable(Color.BLACK));
		mThreeTv = (TextView) view.findViewById(R.id.item_three_tv);
		mTenTv = (TextView) view.findViewById(R.id.item_ten_tv);
		mThirtyTv = (TextView) view.findViewById(R.id.item_thirty_tv);
		setViewOnClick(mThreeTv,mTenTv,mThirtyTv);
		//当popupwindow消失时调用该方法
		setOnDismissListener(mDismissListener);
	}
	
	
	/**
	 * 为控件设置点击
	 * @param views
	 */
	private void setViewOnClick(View... views){
		if (views != null) {
			for (View view : views) {
				view.setOnClickListener(this);
			}
		}
	}
	
	
	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub
		switch (v.getId()) {
		case R.id.item_three_tv:
    	case R.id.item_ten_tv:
		case R.id.item_thirty_tv:
			mListener.onClick(v);
			dismiss();
			break;
		default:
			dismiss();
			break;
		}
	}
	
	public void showSpPop(View parent) {
		if(!this.isShowing()){
			//所显示的与parent的宽度相等
			setWidth(parent.getWidth());
			setHeight(LayoutParams.WRAP_CONTENT);
			this.showAsDropDown(parent, 0, 0);
		}else {
			dismiss();
		}
	}
	
	@Override
	public boolean isShowing() {
		return super.isShowing();
	}
}

所用的layout文件为:

list_item_sp_pop.xml,在这里我只有三个选项,所以没有使用listview布局,如果选项很多,可以使用listview布局

代码语言:javascript
复制
<?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:orientation="vertical" 
    android:background="@drawable/selector_start_pump"
    android:gravity="center">
    <TextView 
        android:id="@+id/item_three_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/delay_three"
        android:textSize="15dp"
        android:textColor="@color/black"
        android:padding="10dp"/>
    <View 
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/gray3"/>
    <TextView 
        android:id="@+id/item_ten_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/delay_ten"
        android:textSize="15dp"
        android:textColor="@color/black"
        android:padding="10dp"/>
    <View 
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/gray3"/>
    <TextView 
        android:id="@+id/item_thirty_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/delay_thirty"
        android:textSize="15dp"
        android:textColor="@color/black"
        android:padding="10dp"/>
</LinearLayout>

在activity中使用:

代码语言:javascript
复制
//声明popupwindow
	private SpPopWindow mStartPopWindow ;
    /**
     * 延时启动右侧图标的变化控制
     */
    private OnDismissListener mStartDismissListener = new OnDismissListener() {
        
        @Override
        public void onDismiss() {
            mStartPumpDelay.setCompoundDrawables(null, null, drawableRight, null);
        }
    };
代码语言:javascript
复制
//延时启动popupwindow
		mStartPopWindow = new SpPopWindow(getApplicationContext(), 
mStartDelayListener,mStartDismissListener);

然后在点击控件时的动作如下:

代码语言:javascript
复制
//显示出popupwindow
mStartPopWindow.showSpPop(mStartPumpDelay);
//改变右侧图标
 mStartPumpDelay.setCompoundDrawables(null, null, drawableDown, null);

其中对程序中所用图标的处理:

代码语言:javascript
复制
//初始化延时启动右侧图标
	    drawableDown = getResources().getDrawable(R.drawable.arrow_down);
	    drawableRight = getResources().getDrawable(R.drawable.arrow_right);
//这一步必须要做,否则不会显示
              drawableDown.setBounds(0,0,30,30);
		drawableRight.setBounds(0,0,30,30);

到此结束,一个PopupWindow似得spinner就制作完成了, 上传一下我用到的箭头资源:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016-01-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档