Android 自定義spinner下拉框實現

一:前言
本人參考博客:http://blog.csdn.net/jdsjlzx/article/details/41316417 最近在弄一個下拉框,發現Android自帶的很難實現我的功能,於是去網上找到一份Demo,但是發現沒有封裝的好,並且還有很多重復的代碼,於是我在這位前輩的基礎上進行了修改.並且重新進行了封裝,代碼變得簡單,並且具有可讀性.

二:實現原理
1.就是一個TextView 弄一個弧形的背景圖片,然后設置一個點擊事件.
2.點擊TextView之后顯示一個PopupWindow,Popupwindow是自定義的,里面顯示一個ListView.ListView也設置了左邊.右邊.底部的邊框.

三:效果圖如下

四:代碼實現:

1).MainActivity.java  程序入口,初始化數據,初始化自定義PopupWIndow,TextView點擊之后顯示PopupWIndow,處理ListView的點擊事件.

/** 
 * 主Activity  用來實現popupwindow 
 * @author ansen 
 */  
public class MainActivity extends Activity {  
    private SpinerPopWindow<String> mSpinerPopWindow;  
    private List<String> list;  
    private TextView tvValue;  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
  
        initData();  
  
        tvValue = (TextView) findViewById(R.id.tv_value);  
        tvValue.setOnClickListener(clickListener);  
        mSpinerPopWindow = new SpinerPopWindow<String>(this, list,itemClickListener);  
        mSpinerPopWindow.setOnDismissListener(dismissListener);  
    }  
      
    /** 
     * 監聽popupwindow取消 
     */  
    private OnDismissListener  dismissListener=new OnDismissListener() {  
        @Override  
        public void onDismiss() {  
            setTextImage(R.drawable.icon_down);  
        }  
    };  
  
    /** 
     * popupwindow顯示的ListView的item點擊事件 
     */  
    private OnItemClickListener itemClickListener = new OnItemClickListener() {  
        @Override  
        public void onItemClick(AdapterView<?> parent, View view, int position,long id) {  
            mSpinerPopWindow.dismiss();  
            tvValue.setText(list.get(position));  
            Toast.makeText(MainActivity.this, "點擊了:" + list.get(position),Toast.LENGTH_LONG).show();  
        }  
    };  
  
    /** 
     * 顯示PopupWindow 
     */  
    private OnClickListener clickListener = new OnClickListener() {  
        @Override  
        public void onClick(View v) {  
            switch (v.getId()) {  
            case R.id.tv_value:  
                mSpinerPopWindow.setWidth(tvValue.getWidth());  
                mSpinerPopWindow.showAsDropDown(tvValue);  
                setTextImage(R.drawable.icon_up);  
                break;  
            }  
        }  
    };  
  
    /** 
     * 初始化數據 
     */  
    private void initData() {  
        list = new ArrayList<String>();  
        for (int i = 0; i < 5; i++) {  
            list.add("test:" + i);  
        }  
    }  
  
    /** 
     * 給TextView右邊設置圖片 
     * @param resId 
     */  
    private void setTextImage(int resId) {  
        Drawable drawable = getResources().getDrawable(resId);  
        drawable.setBounds(0, 0, drawable.getMinimumWidth(),drawable.getMinimumHeight());// 必須設置圖片大小，否則不顯示  
        tvValue.setCompoundDrawables(null, null, drawable, null);  
    }  
}  

2).activity_main.xml  這個文件也沒啥好說的  就是兩個TextView。

<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:orientation="vertical" >  
    <LinearLayout  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:layout_margin="5dp"  
        android:orientation="horizontal">  
  
        <TextView  
            android:id="@+id/tv_value"  
            android:layout_width="0dp"  
            android:layout_height="wrap_content"  
            android:layout_weight="1"  
            android:background="@drawable/shape_help_category_tv_bg"  
            android:drawableRight="@drawable/icon_down"  
            android:padding="10dp"  
            android:textColor="@color/content_color"  
            android:text="請選擇父類別"  
            android:textSize="20sp"/>  
  
        <TextView  
            android:layout_marginLeft="5dp"  
            android:layout_width="0dp"  
            android:layout_height="wrap_content"  
            android:layout_weight="1"  
            android:background="@drawable/shape_help_category_tv_bg"  
            android:drawableRight="@drawable/icon_down"  
            android:textColor="@color/content_color"  
            android:padding="10dp"  
            android:text="請選擇子類別"  
            android:textSize="20sp" />  
    </LinearLayout>  
</LinearLayout>  

3).SpinerPopWindow.java  自定義Popupwindow類 初始化PopupWindow顯示的布局,以及一些參數,並且給listView設置適配器

 * 自定義PopupWindow  主要用來顯示ListView  
 * @author Ansen  
 * @param <T>  
 * @param <T>  
 * @create time 2015-11-3  
 */  
public class SpinerPopWindow<T> extends PopupWindow {  
    private LayoutInflater inflater;  
    private ListView mListView;  
    private List<T> list;  
    private MyAdapter  mAdapter;  
      
    public SpinerPopWindow(Context context,List<T> list,OnItemClickListener clickListener) {  
        super(context);  
        inflater=LayoutInflater.from(context);  
        this.list=list;  
        init(clickListener);  
    }  
      
    private void init(OnItemClickListener clickListener){  
        View view = inflater.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.setAdapter(mAdapter=new MyAdapter());  
        mListView.setOnItemClickListener(clickListener);  
    }  
      
    private class MyAdapter extends BaseAdapter{  
        @Override  
        public int getCount() {  
            return list.size();  
        }  
  
        @Override  
        public Object getItem(int position) {  
            return list.get(position);  
        }  
  
        @Override  
        public long getItemId(int position) {  
            return position;  
        }  
  
        @Override  
        public View getView(int position, View convertView, ViewGroup parent) {  
            ViewHolder holder=null;  
            if(convertView==null){  
                holder=new ViewHolder();  
                convertView=inflater.inflate(R.layout.spiner_item_layout, null);  
                holder.tvName=(TextView) convertView.findViewById(R.id.tv_name);  
                convertView.setTag(holder);  
            }else{  
                holder=(ViewHolder) convertView.getTag();  
            }  
            holder.tvName.setText(getItem(position).toString());  
            return convertView;  
        }  
    }  
      
    private class ViewHolder{  
        private TextView tvName;  
    }  
}  

4).spiner_window_layout.xml    PopupWindow顯示的布局文件 里面就一個ListView控件

<?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:layout_alignParentRight="true"  
    android:orientation="vertical">  
  
    <ListView  
        android:id="@+id/listview"  
        android:layout_width="fill_parent"  
        android:layout_height="wrap_content"  
        android:cacheColorHint="#00000000"  
        android:background="@drawable/shape_popupwindow_list_bg"  
        android:scrollbars="none" >  
    </ListView>  
</LinearLayout>  

還有一些其他布局,我就不一一貼出來了,有興趣的可以去看看源碼.這個Demo還是比較簡單的,相信大家都能看懂.
推薦下自己創建的android QQ群:202928390 歡迎大家的加入.

點擊下載源碼