模仿Android4.0的Spinner Button写的一个MySpinnerButton。这样在1.6~4.0.4版本都可以实现这种下拉框的效果了。
实现效果：点击屏幕上的Spinner Button，在按钮的下方会滑出一个下拉列表，滑动选择下拉列表中其中一个选项，则下拉列表收回，按钮上的文字显示为选项的内容。点击返回键或下拉列表外部区域，下拉列表收回。反复点击按钮，下拉列表反复执行滑出和收回动作。
运行图：
实现原理：使用PopupWindow和Button相关联（showAsDropDown）。在PopupWindow上放ListView。于是就有了下拉框的效果。
以下是代码：
入口_04MySpinnerDemo2Activity:
public class _04MySpinnerDemo2Activity extends Activity {
private MySpinnerButton mSpinnerBtn;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
this.mSpinnerBtn = (MySpinnerButton) this.findViewById(R.id.spinner_btn);
}
}
布局文件main.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="fill_parent"
android:gravity="top|center_horizontal"
android:orientation="vertical" >
<com.haozi.demo.myspinner2.wiget.MySpinnerButton
android:id="@+id/spinner_btn"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:text="spinner button"
/>
</LinearLayout>
封装好的MySpinnerButton:
/**
* 我的SpinnerButton
* @author haozi
*
*/
public class MySpinnerButton extends Button {
private Context context;
public MySpinnerButton(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
this.context = context;
// 设置监听事件
setOnClickListener(new MySpinnerButtonOnClickListener());
}
public MySpinnerButton(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
// 设置监听事件
setOnClickListener(new MySpinnerButtonOnClickListener());
}
public MySpinnerButton(Context context) {
super(context);
this.context = context;
// 设置监听事件
setOnClickListener(new MySpinnerButtonOnClickListener());
}
/**
* MySpinnerButton的点击事件
* @author haozi
*
*/
class MySpinnerButtonOnClickListener implements View.OnClickListener{
@Override
public void onClick(View v) {
final MySpinnerDropDownItems mSpinnerDropDrownItems = new MySpinnerDropDownItems(context);
if (!mSpinnerDropDrownItems.isShowing()) {
mSpinnerDropDrownItems.showAsDropDown(MySpinnerButton.this);
}
}
}
/**
* MySpinnerButton的下拉列表
* @author haozi
*
*/
class MySpinnerDropDownItems extends PopupWindow{
private Context context;
private LinearLayout mLayout; // 下拉列表的布局
private ListView mListView; // 下拉列表控件
private ArrayList<HashMap<String, String>> mData;
public MySpinnerDropDownItems(Context context){
super(context);
this.context = context;
// 下拉列表的布局
mLayout = new LinearLayout(context);
mLayout.setOrientation(LinearLayout.VERTICAL);
// 下拉列表控件
mListView = new ListView(context);
mListView.setLayoutParams(new LayoutParams(MySpinnerButton.this.getLayoutParams().width, LayoutParams.WRAP_CONTENT));
mListView.setCacheColorHint(Color.TRANSPARENT);
mData = new ArrayList<HashMap<String,String>>();
for(int i=0; i<50; i++){
HashMap<String, String> mHashmap = new HashMap<String, String>();
mHashmap.put("spinner_dropdown_item_textview", "textView " + i);
mData.add(mHashmap);
}
// 为listView设置适配器
mListView.setAdapter(new MyAdapter(context,
mData, R.layout.spinner_dropdown_item,
new String[]{"spinner_dropdown_item_textview"}, new int[]{R.id.spinner_dropdown_item_textview}));
// 设置listView的点击事件
mListView.setOnItemClickListener(new MyListViewOnItemClickedListener());
// 把下拉列表添加到layout中。
mLayout.addView(mListView);
setWidth(LayoutParams.WRAP_CONTENT);
setHeight(LayoutParams.WRAP_CONTENT);
setContentView(mLayout);
setFocusable(true);
mLayout.setFocusableInTouchMode(true);
}
/**
* 我的适配器
* @author haozi
*
*/
public class MyAdapter extends BaseAdapter {
private Context context;
private List<? extends Map<String, ?>> mData;
private int mResource;
private String[] mFrom;
private int[] mTo;
private LayoutInflater mLayoutInflater;
/**
* 我的适配器的构造方法
* @param context 调用方的上下文
* @param data 数据
* @param resource
* @param from
* @param to
*/
public MyAdapter(Context context, List<? extends Map<String, ?>> data, int resource, String[] from, int[] to){
this.context = context;
this.mData = data;
this.mResource = resource;
this.mFrom = from;
this.mTo = to;
this.mLayoutInflater = (LayoutInflater) context.getSystemService(context.LAYOUT_INFLATER_SERVICE);
}
/**
* 系统在绘制ListView之前，将会先调用getCount方法来获取Item的个数
*/
public int getCount() {
return this.mData.size();
}
public Object getItem(int position) {
return this.mData.get(position);
}
public long getItemId(int position) {
return position;
}
/**
* 每绘制一个 Item就会调用一次getView方法，
* 在此方法内就可以引用事先定义好的xml来确定显示的效果并返回一个View对象作为一个Item显示出来。
* 也 正是在这个过程中完成了适配器的主要转换功能，把数据和资源以开发者想要的效果显示出来。
* 也正是getView的重复调用，使得ListView的使用更 为简单和灵活。
* 这两个方法是自定ListView显示效果中最为重要的，同时只要重写好了就两个方法，ListView就能完全按开发者的要求显示。
* 而 getItem和getItemId方法将会在调用ListView的响应方法的时候被调用到。
* 所以要保证ListView的各个方法有效的话，这两个方法也得重写。
*/
public View getView(int position, View contentView, ViewGroup parent) {
contentView = this.mLayoutInflater.inflate(this.mResource, parent, false);
// 设置contentView的内容和样式，这里重点是设置contentView中文字的大小
for(int index=0; index<this.mTo.length; index++){
TextView textView = (TextView) contentView.findViewById(this.mTo[index]);
textView.setText(this.mData.get(position).get(this.mFrom[index]).toString());
}
return contentView;
}
}
/**
* listView的点击事件
* @author haozi
*
*/
class MyListViewOnItemClickedListener implements AdapterView.OnItemClickListener{
@Override
public void onItemClick(AdapterView<?> parent, View view, int position,
long id) {
TextView mTextView = (TextView) view.findViewById(R.id.spinner_dropdown_item_textview);
String content = mTextView.getText().toString();
MySpinnerButton.this.setText(content);
MySpinnerDropDownItems.this.dismiss();
}
}
}
}
下拉列表item的布局文件spinner_dropdown_item.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:background="@android:drawable/list_selector_background"
android:orientation="vertical" >
<TextView android:id="@+id/spinner_dropdown_item_textview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="left|bottom"
android:paddingTop="11dip"
android:paddingBottom="11dip"
android:paddingLeft="5dip"
/>
</LinearLayout>