Android 自定义spinner控件下拉框实现

    本人参考博客:http://blog.csdn.net/jdsjlzx/article/details/41316417 最近在弄一个下拉框,发现Android自带的很难实现我的功能,于是去网上找到一份Demo,但是发现没有封装的好,移植困难,于是我在这位前辈的基础上进行了修改，把它做成一个继承自LinearLayout的控件，并不是一个spinner,只是实现了spinner的功能，模样更漂亮，可直接调用.

    上效果图：

    实现起来很简单，主要生成MySpinner控件，下面是MySpinner.java代码

public class MySpinner extends LinearLayout  {

    private TextView tv_value;  
    private ImageView bt_dropdown;
    private int mNormalColor;  
    private int mSelectedColor;  
    private Context mcontext;
    private List<String> mItems;
    OnItemSelectedListener listener;
    private SpinnerPopWindow mSpinerPopWindow;
    private SpinnerAdapter mAdapter;
    View myView;
  
  
    public MySpinner(Context context) {  
        super(context);  
        mcontext = context;
        init();
    } 
  
    public MySpinner(Context context, AttributeSet attrs) {  
        super(context, attrs); 
        mcontext = context; 
        init();
    }  
  
    private void init(){
    	 LayoutInflater mInflater = LayoutInflater.from(mcontext);  
         myView = mInflater.inflate(R.layout.myspinner_layout, null);
         addView(myView);  
         
         tv_value = (TextView) myView.findViewById(R.id.tv_value);
         bt_dropdown = (ImageView) myView.findViewById(R.id.bt_dropdown);
         tv_value.setOnClickListener(onClickListener);
         bt_dropdown.setOnClickListener(onClickListener);
    }
    
    OnClickListener onClickListener = new OnClickListener() {
        @Override
        public void onClick(View v) {
            bt_dropdown.setBackgroundResource(R.drawable.up_arrow);
        	startPopWindow();	
        }
    }; 
    
    public void setData(List<String> datas){
    	mItems = datas;
    }
    
    public void setOnItemSelectedListener(OnItemSelectedListener listener){
    	this.listener = listener;
    }
    
    
    public void startPopWindow(){
    	mAdapter = new SpinnerAdapter(mcontext);
		mAdapter.refreshData(mItems, 0);

		mSpinerPopWindow = new SpinnerPopWindow(mcontext);
		mSpinerPopWindow.setAdatper(mAdapter);
		mSpinerPopWindow.setItemListener(new OnItemSelectedListener(){
			@Override
			public void onItemSelected(int pos) {
				// TODO Auto-generated method stub
                bt_dropdown.setBackgroundResource(R.drawable.down_arrow);
				tv_value.setText(mItems.get(pos));
				listener.onItemSelected(pos);
			}			
		});
        showSpinWindow();
    }

    private void showSpinWindow(){
        Log.e("hu", "showSpinWindow");
        mSpinerPopWindow.setWidth(myView.getWidth());
        mSpinerPopWindow.showAsDropDown(myView);
    }

    public interface OnItemSelectedListener {
        void onItemSelected(int pos);
    }
} 

        可以看出MySpinner里进行了弹出窗口的生成，把其全部封装到了MySpinner。

        MySpinner控件的布局myspinner_layout.xml，把文本框和下拉图标组和在一起，代码如下：

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

	<RelativeLayout
		android:layout_width="fill_parent"
		android:layout_height="fill_parent"
		android:background="@drawable/edittext1"
		>
		<TextView
		    android:id="@+id/tv_value"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:minHeight="40dp"
			android:layout_centerVertical="true"
			android:textSize="20sp"
			android:textColor="#ff000000"
			android:gravity="center_vertical"
			android:layout_toLeftOf="@+id/bt_dropdown"
			android:layout_marginRight="10dp"
			android:singleLine="true"
			android:paddingLeft="10dp">
	  	</TextView>	            
	            
      	<ImageView
          android:id="@+id/bt_dropdown"
          android:layout_width="36px"
          android:layout_height="20px"
          android:layout_alignParentRight="true"
          android:layout_marginRight="10dp"
          android:layout_centerVertical="true"
          android:background="@drawable/down_arrow" />
	</RelativeLayout>

</LinearLayout>

    上主窗口代码SpinerWindowDemoActivity.java，如下：

package com.model.spinner;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;
import android.widget.TextView;
import android.widget.Toast;

import com.model.spinner.widget.MySpinner;

import java.util.Arrays;


/**
 * 
 * @author lance
 *  csdn blog:http://blog.csdn.net/geniuseoe2012 
 *  android-develop group:298044305
 */
public class SpinerWindowDemoActivity extends Activity {
    /** Called when the activity is first created. */
	
	private View mRootView;
	private TextView mTView;
	private ImageButton mBtnDropDown;
	private MySpinner myspinner;
	String[] names;
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        setupViews();
    }
    
    
    private void setupViews(){
    	mRootView = findViewById(R.id.rootView);
		names = getResources().getStringArray(R.array.city_name);
		
		myspinner = (MySpinner) findViewById(R.id.myspinner);
		myspinner.setData(Arrays.asList(names));
		myspinner.setOnItemSelectedListener(new MySpinner.OnItemSelectedListener(){

			@Override
			public void onItemSelected(int var3) {
				// TODO Auto-generated method stub
				Toast.makeText(SpinerWindowDemoActivity.this, "你点击的是:"+names[var3], Toast.LENGTH_SHORT).show();                
			}			
		});
    }
}

        调用MySpinner控件是不是非常简单啊！只需设置弹出的数据和回调接口。给出main.xml代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rootView"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ffe3e3e3" >
    <RelativeLayout 
        android:id="@+id/title_bar"
        android:orientation="vertical"
        android:background="@drawable/title_bar" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content">
        <TextView android:id="@+id/title" android:layout_centerInParent="true" android:textSize="20.0sp" android:textColor="#fffffffe"  android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="下拉框" />
    </RelativeLayout>
    <LinearLayout
           android:id="@+id/bottom_layout"
           android:layout_below="@id/title_bar"
           android:layout_width="fill_parent"
           android:layout_height="wrap_content"
           android:orientation="vertical"
           android:layout_marginTop="10dp"
		   android:layout_marginLeft="10.0dip" 
	       android:layout_marginBottom="10.0dip" 
	       android:layout_marginRight="10.0dip" >
	        <LinearLayout 
		       android:layout_width="fill_parent"
		       android:layout_height="wrap_content"
			   android:gravity="center_vertical"
		       android:orientation="horizontal"
			   android:background="@drawable/singleline_item_bg"
		       >
				<TextView
					android:id="@+id/tv_pre"
					android:layout_width="wrap_content"
					android:layout_height="wrap_content"
					android:layout_marginLeft="10dp"
					android:layout_marginRight="10dp"
					android:text="City:"
					android:textColor="#000000"
					android:textSize="20sp" />
		       <com.model.spinner.widget.MySpinner 
		           android:id="@+id/myspinner"
		           android:layout_width="160dp"
		     		android:layout_height="wrap_content"
		           >
		       </com.model.spinner.widget.MySpinner>
   			</LinearLayout>
       </LinearLayout>
</RelativeLayout>

    下面是弹出窗口SpinnerPopWindow.java如下：

package com.model.spinner.widget;

import android.content.Context;
import android.graphics.drawable.ColorDrawable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;
import android.widget.PopupWindow;

import com.model.spinner.R;

import java.util.List;

public class SpinnerPopWindow extends PopupWindow implements OnItemClickListener{

	private Context mContext;
	private ListView mListView;
	private SpinnerAdapter mAdapter;
	private MySpinner.OnItemSelectedListener mItemSelectListener;
	
	
	public SpinnerPopWindow(Context context)
	{
		super(context);
		
		mContext = context;
		init();
	}
	
	
	public void setItemListener(MySpinner.OnItemSelectedListener listener){
		mItemSelectListener = listener;
	}
	
	public void setAdatper(SpinnerAdapter adapter){
		mAdapter = adapter;
		mListView.setAdapter(mAdapter);	
	}

	
	private void init()
	{
		View view = LayoutInflater.from(mContext).inflate(R.layout.spiner_window_layout, null);
		setContentView(view);		
		setWidth(LayoutParams.WRAP_CONTENT);
		setHeight(LayoutParams.WRAP_CONTENT);
		
		setFocusable(true);
    	ColorDrawable dw = new ColorDrawable(0x00);
		setBackgroundDrawable(dw);
	
		
		mListView = (ListView) view.findViewById(R.id.listview);
		mListView.setOnItemClickListener(this);
	}
		
	
	public <T> void refreshData(List<T> list, int selIndex)
	{
		if (list != null && selIndex  != -1)
		{
			if (mAdapter != null){
				mAdapter.refreshData(list, selIndex);
			}		
		}
	}


	@Override
	public void onItemClick(AdapterView<?> arg0, View view, int pos, long arg3) {
		dismiss();
		if (mItemSelectListener != null){
			mItemSelectListener.onItemSelected(pos);
		}
	}	
}

    SpinnerAdapter.java代码如下：

package com.model.spinner.widget;

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 com.model.spinner.R;

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

public class SpinnerAdapter<String> extends BaseAdapter {

	public static interface IOnItemSelectListener{
		public void onItemClick(int pos);
	};
	
	 private Context mContext;   
	 private List<String> mObjects = new ArrayList<String>();
	 private int mSelectItem = 0;
	    
	 private LayoutInflater mInflater;
	
	 public  SpinnerAdapter(Context context){
		 init(context);
	 }
	 
	 public void refreshData(List<String> objects, int selIndex){
		 mObjects = objects;
		 if (selIndex < 0){
			 selIndex = 0;
		 }
		 if (selIndex >= mObjects.size()){
			 selIndex = mObjects.size() - 1;
		 }
		 
		 mSelectItem = selIndex;
	 }
	 
	 private void init(Context context) {
	        mContext = context;
	        mInflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
	 }
	    
	    
	@Override
	public int getCount() {

		return mObjects.size();
	}

	@Override
	public String getItem(int pos) {
		return mObjects.get(pos);
	}

	@Override
	public long getItemId(int pos) {
		return pos;
	}

	@Override
	public View getView(int pos, View convertView, ViewGroup arg2) {
		 ViewHolder viewHolder;
    	 
	     if (convertView == null) {
	    	 convertView = mInflater.inflate(R.layout.spiner_item_layout, null);
	         viewHolder = new ViewHolder();
	         viewHolder.mTextView = (TextView) convertView.findViewById(R.id.textView);
	         convertView.setTag(viewHolder);
	     } else {
	         viewHolder = (ViewHolder) convertView.getTag();
	     }

	     
	     Object item =  getItem(pos);
		 viewHolder.mTextView.setText(item.toString());

	     return convertView;
	}

	public static class ViewHolder
	{
	    public TextView mTextView;
    }


}

还有一些其他布局,我就不一一贴出来了,有兴趣的可以去看看源码.这个Demo还是比较简单的,相信大家都能看懂.

点击下载源码