使用PopupWindow 实现Spinner 的点击效果

Posted 2022-12-06 wukj_litai

在最近我们的项目中有一个小的地方使用到了Spinner,但是android 原生的样式很丑，本来打算在网上找找有没有办法直接修改样式能完成修改,最后没有找到合适的办法，在网上看到有人使用自定义Spinner 的方法进行了解决，我也采用这样的方法解决下。
我实现的效果如下图所示：

在这里我使用的展示popupwindow 的 listview 比较难看，大家可以按照自己的需求进行变化，做成更漂亮的效果，下面是我的实现的思路，附有主要代码，全部的代码在github上，文章的后面会有链接。

在我们的主界面上我们使用一个TextView来显示我们所要显示的内容，下拉的图标是使用TextView的drawableRight 来实现的，其中drawablewomen 还可以设置相应的Padding，主页面的代码比较简单：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.example.administrator.myspinnerpopupwindow.MainActivity"
    tools:showIn="@layout/activity_main">

    <TextView
        android:id="@+id/spinner_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:drawableRight="@drawable/sj"
        android:drawablePadding="5dp"
        android:textSize="20sp"
        android:text="Hello World!" />
</LinearLayout>

主页面的Java代码如下：

package com.example.administrator.myspinnerpopupwindow;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.KeyEvent;
import android.view.MotionEvent;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener, AdapterItemClick 

    private TextView spinner_tv;
    private SpinnerPopupWindow mSpinerPopWindow;

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        spinner_tv = (TextView) findViewById(R.id.spinner_tv);
        spinner_tv.setOnClickListener(this);
        spinner_tv.setText("管理人员");
        mSpinerPopWindow = new SpinnerPopupWindow(getApplicationContext(), this);
        mSpinerPopWindow.addData("管理人员");
        mSpinerPopWindow.addData("普通人员");


    


    @Override
    public void onClick(View v) 
        switch (v.getId()) 
            case R.id.spinner_tv:
                showSpinWindow();
                break;
            default:
                break;

        
    

    private void showSpinWindow() 
        Log.e("", "showSpinWindow");
        mSpinerPopWindow.setWidth(spinner_tv.getWidth());
        mSpinerPopWindow.showAsDropDown(spinner_tv);
    

    /**
     * 这个接口实现在PopupWindow中点击子item 会修改spinner_tv 的值
     * @param string_content
     */
    @Override
    public void itemClick(String string_content) 
        spinner_tv.setText(string_content);
        mSpinerPopWindow.dismiss();
    

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) 

        if (keyCode == KeyEvent.KEYCODE_BACK && event.getRepeatCount() == 0) 
            if (mSpinerPopWindow != null && mSpinerPopWindow.isShowing()) 
                mSpinerPopWindow.dismiss();
                return true;
            
        
        return super.onKeyDown(keyCode, event);
    

    @Override
    public boolean onTouchEvent(MotionEvent event) 
        if (mSpinerPopWindow != null && mSpinerPopWindow.isShowing()) 
            mSpinerPopWindow.dismiss();
        
        return super.onTouchEvent(event);
    

AdapterItemClick 接口的代码：

package com.example.administrator.myspinnerpopupwindow;

/**
 * Created by Administrator on 2016/5/6.
 */
public interface AdapterItemClick 
    public void itemClick(String string_content);

我自定义的PopupWindow 的代码：

package com.example.administrator.myspinnerpopupwindow;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.ListView;
import android.widget.PopupWindow;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by Administrator on 2016/5/6.
 */
public class SpinnerPopupWindow extends PopupWindow implements AdapterView.OnItemClickListener 

    private Context mContext;
    private List<String> list_string;
    private ListView mListView;
    private BaseAdapter mAdapter;
    private AdapterItemClick adapterItemClick;

    public SpinnerPopupWindow(Context context, AdapterItemClick adapterItemClick) 
        mContext = context;
        list_string = new ArrayList<String>();
        this.adapterItemClick = adapterItemClick;
        init();
    

    public void setItemClick(AdapterItemClick adapterItemClick) 

        this.adapterItemClick = adapterItemClick;
    

    private void init() 
        View view = LayoutInflater.from(mContext).inflate(R.layout.spiner_window_layout, null);
        this.setContentView(view);
        setFocusable(false);
        setWidth(ViewGroup.LayoutParams.WRAP_CONTENT);
        setHeight(ViewGroup.LayoutParams.WRAP_CONTENT);
        mListView = (ListView) view.findViewById(R.id.listview);
        mAdapter = new NormalSpinnerAdapter(mContext, list_string);
        mListView.setAdapter(mAdapter);
        mListView.setOnItemClickListener(this);


    


    public void addData(String string_content, int position) 
        list_string.add(position, string_content);
    


    public void addData(String string_content) 
        list_string.add(string_content);
    

    public void addData(List<String> list) 
        if (list == null && list.size() != 0) 
            list_string.addAll(list);
        
    


    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) 
        adapterItemClick.itemClick(list_string.get(position));
    

SpinnerPopupWindow 中使用到的适配器代码：

package com.example.administrator.myspinnerpopupwindow;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

import java.util.List;

/**
 * Created by Administrator on 2016/5/6.
 */
public class NormalSpinnerAdapter extends BaseAdapter 

    private Context mcontext;
    private List<String> list_string;
    private NormalSpinnerAdapter.ViewHolder viewHolder;

    public NormalSpinnerAdapter(Context context, List list_string) 
        mcontext = context;
        this.list_string = list_string;
    

    @Override


    public int getCount() 
        return list_string.size();
    

    @Override
    public Object getItem(int position) 
        return list_string.get(position);
    

    @Override
    public long getItemId(int position) 
        return position;
    

    @Override
    public View getView(int position, View convertView, ViewGroup parent) 

        if (convertView == null) 
            viewHolder = new ViewHolder();
            convertView = LayoutInflater.from(mcontext).inflate(R.layout.spiner_item_layout, null);
            viewHolder.textView = (TextView) convertView.findViewById(R.id.textView);
            convertView.setTag(viewHolder);
         else 
            viewHolder = (ViewHolder) convertView.getTag();
        
        viewHolder.textView.setText(list_string.get(position));
        return convertView;
    


    class ViewHolder 

        private TextView textView;
    

我们使用到的二个listview 和listview 的item 的布局文件的代码：
spinner_window_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" 
    android:layout_alignParentRight="true"
    >


       <ListView
          android:id="@+id/listview"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content" 
          android:cacheColorHint="#00000000"
          android:scrollbars="none">
       </ListView>



</LinearLayout>

spinner_item_layout.xml 的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:minHeight="40dp">

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#ff000000"
    android:textSize="20sp"
    />

</LinearLayout>

就这样我们就完成了这个简单的spinner，代码也很简单，就在代码中不做注释了。
github的地址：https://github.com/wukjlitai/Spinner。