Lance老师UI系列教程第七课->自定义spinner下拉框实现的实现

分类： android android UI教程 2013-03-26 21:00  1554人阅读  评论(4)  收藏  举报

UI系列教程第七课：自定义spinner下拉框实现的实现

说道android下拉框spineer，框架中虽有现成的控件，但实际效果可能并不是我们所需要的那种，如下图：

其实我们更需要的是像WEB那种风格，如图所示：

其实实现也很简单，就是自定义个popwindow就可以了

下面贴上代码片段：

[java]  view plain copy

1. public class SpinerPopWindow extends PopupWindow implements OnItemClickListener{  
2.   
3.     private Context mContext;  
4.     private ListView mListView;  
5.     private NormalSpinerAdapter mAdapter;  
6.     private IOnItemSelectListener mItemSelectListener;  
7.       
8.       
9.     public SpinerPopWindow(Context context)  
10.     {  
11.         super(context);  
12.           
13.         mContext = context;  
14.         init();  
15.     }  
16.       
17.       
18.     public void setItemListener(IOnItemSelectListener listener){  
19.         mItemSelectListener = listener;  
20.     }  
21.   
22.       
23.     private void init()  
24.     {  
25.         View view = LayoutInflater.from(mContext).inflate(R.layout.spiner_window_layout, null);  
26.         setContentView(view);         
27.         setWidth(LayoutParams.WRAP_CONTENT);  
28.         setHeight(LayoutParams.WRAP_CONTENT);  
29.           
30.         setFocusable(true);  
31.         ColorDrawable dw = new ColorDrawable(0x00);  
32.         setBackgroundDrawable(dw);  
33.       
34.           
35.         mListView = (ListView) view.findViewById(R.id.listview);  
36.           
37.   
38.         mAdapter = new NormalSpinerAdapter(mContext);     
39.         mListView.setAdapter(mAdapter);   
40.         mListView.setOnItemClickListener(this);  
41.     }  
42.       
43.       
44.     public void refreshData(List<String> list, int selIndex)  
45.     {  
46.         if (list != null && selIndex  != -1)  
47.         {  
48.             mAdapter.refreshData(list, selIndex);  
49.         }  
50.     }  
51.   
52.   
53.     @Override  
54.     public void onItemClick(AdapterView<?> arg0, View view, int pos, long arg3) {  
55.         dismiss();  
56.         if (mItemSelectListener != null){  
57.             mItemSelectListener.onItemClick(pos);  
58.         }  
59.     }  
60.   
61.   
62.       
63. }  

主界面调用代码：

[java]  view plain copy

1. public class SpinerWindowDemoActivity extends Activity implements OnClickListener, AbstractSpinerAdapter.IOnItemSelectListener{  
2.     /** Called when the activity is first created. */  
3.       
4.     private View mRootView;  
5.     private TextView mTView;  
6.     private ImageButton mBtnDropDown;  
7.     private List<String> nameList = new ArrayList<String>();  
8.   
9.       
10.     @Override  
11.     public void onCreate(Bundle savedInstanceState) {  
12.         super.onCreate(savedInstanceState);  
13.         setContentView(R.layout.main);  
14.           
15.         setupViews();  
16.     }  
17.       
18.       
19.     private void setupViews(){  
20.         mRootView = findViewById(R.id.rootView);  
21.           
22.         mTView = (TextView) findViewById(R.id.tv_value);  
23.         mBtnDropDown = (ImageButton) findViewById(R.id.bt_dropdown);  
24.         mBtnDropDown.setOnClickListener(this);  
25.           
26.           
27.         String[] names = getResources().getStringArray(R.array.hero_name);  
28.         for(int i = 0; i < names.length; i++){  
29.             nameList.add(names[i]);  
30.         }  
31.           
32.   
33.         mSpinerPopWindow = new SpinerPopWindow(this);  
34.         mSpinerPopWindow.refreshData(nameList, 0);  
35.         mSpinerPopWindow.setItemListener(this);  
36.     }  
37.   
38.   
39.     @Override  
40.     public void onClick(View view) {  
41.         switch(view.getId()){  
42.         case R.id.bt_dropdown:  
43.             showSpinWindow();  
44.             break;  
45.         }  
46.     }  
47.       
48.   
49.     private void setHero(int pos){  
50.         if (pos >= 0 && pos <= nameList.size()){  
51.             String value = nameList.get(pos);  
52.           
53.             mTView.setText(value);  
54.         }  
55.     }  
56.   
57.       
58.     private SpinerPopWindow mSpinerPopWindow;  
59.     private void showSpinWindow(){  
60.         Log.e("", "showSpinWindow");  
61.         mSpinerPopWindow.setWidth(mTView.getWidth());  
62.         mSpinerPopWindow.showAsDropDown(mTView);  
63.     }  
64.   
65.   
66.     @Override  
67.     public void onItemClick(int pos) {  
68.         setHero(pos);  
69.     }  
70.   
71. }  

就这么简单，具体UI美化大家再修改下xml就可以了

下面附上工程链接：

http://download.csdn.net/detail/geniuseoe2012/5184664

welcome to join android-develop group:298044305

more brilliant，Please pay attention to my CSDN blog -->http://blog.csdn.net/geniuseoe2012

 

上一课：Lance老师UI系列教程第六课->微信聊天气泡界面的实现

/*=============================================================================*/

为使SpinerPopWindow更为通用，特修改或增加以下几个类

AbstractSpinerAdapter

[java]  view plain copy

1. <span style="color:#3366ff;">public abstract class AbstractSpinerAdapter<T> extends BaseAdapter {  
2.   
3.     public static interface IOnItemSelectListener{  
4.         public void onItemClick(int pos);  
5.     };  
6.       
7.      private Context mContext;     
8.      private List<T> mObjects = new ArrayList<T>();  
9.      private int mSelectItem = 0;  
10.           
11.      private LayoutInflater mInflater;  
12.       
13.      public  AbstractSpinerAdapter(Context context){  
14.          init(context);  
15.      }  
16.        
17.      public void refreshData(List<T> objects, int selIndex){  
18.          mObjects = objects;  
19.          if (selIndex < 0){  
20.              selIndex = 0;  
21.          }  
22.          if (selIndex >= mObjects.size()){  
23.              selIndex = mObjects.size() - 1;  
24.          }  
25.            
26.          mSelectItem = selIndex;  
27.      }  
28.        
29.      private void init(Context context) {  
30.             mContext = context;  
31.             mInflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
32.      }  
33.           
34.           
35.     @Override  
36.     public int getCount() {  
37.   
38.         return mObjects.size();  
39.     }  
40.   
41.     @Override  
42.     public Object getItem(int pos) {  
43.         return mObjects.get(pos).toString();  
44.     }  
45.   
46.     @Override  
47.     public long getItemId(int pos) {  
48.         return pos;  
49.     }  
50.   
51.     @Override  
52.     public View getView(int pos, View convertView, ViewGroup arg2) {  
53.          ViewHolder viewHolder;  
54.            
55.          if (convertView == null) {  
56.              convertView = mInflater.inflate(R.layout.spiner_item_layout, null);  
57.              viewHolder = new ViewHolder();  
58.              viewHolder.mTextView = (TextView) convertView.findViewById(R.id.textView);  
59.              convertView.setTag(viewHolder);  
60.          } else {  
61.              viewHolder = (ViewHolder) convertView.getTag();  
62.          }  
63.   
64.            
65.          Object item =  getItem(pos);  
66.          viewHolder.mTextView.setText(item.toString());  
67.   
68.          return convertView;  
69.     }  
70.   
71.     public static class ViewHolder  
72.     {  
73.         public TextView mTextView;  
74.     }  
75.   
76.   
77. }</span>  

 

 

SpinerPopWindow

[java]  view plain copy

1. public class SpinerPopWindow extends PopupWindow implements OnItemClickListener{  
2.   
3.     private Context mContext;  
4.     private ListView mListView;  
5.     private AbstractSpinerAdapter mAdapter;  
6.     private IOnItemSelectListener mItemSelectListener;  
7.       
8.       
9.     public SpinerPopWindow(Context context)  
10.     {  
11.         super(context);  
12.           
13.         mContext = context;  
14.         init();  
15.     }  
16.       
17.       
18.     public void setItemListener(IOnItemSelectListener listener){  
19.         mItemSelectListener = listener;  
20.     }  
21.       
22.     public void setAdatper(AbstractSpinerAdapter adapter){  
23.         mAdapter = adapter;  
24.         mListView.setAdapter(mAdapter);   
25.     }  
26.   
27.       
28.     private void init()  
29.     {  
30.         View view = LayoutInflater.from(mContext).inflate(R.layout.spiner_window_layout, null);  
31.         setContentView(view);         
32.         setWidth(LayoutParams.WRAP_CONTENT);  
33.         setHeight(LayoutParams.WRAP_CONTENT);  
34.           
35.         setFocusable(true);  
36.         ColorDrawable dw = new ColorDrawable(0x00);  
37.         setBackgroundDrawable(dw);  
38.       
39.           
40.         mListView = (ListView) view.findViewById(R.id.listview);  
41.         mListView.setOnItemClickListener(this);  
42.     }  
43.       
44.       
45.     public <T> void refreshData(List<T> list, int selIndex)  
46.     {  
47.         if (list != null && selIndex  != -1)  
48.         {  
49.             if (mAdapter != null){  
50.                 mAdapter.refreshData(list, selIndex);  
51.             }         
52.         }  
53.     }  
54.   
55.   
56.     @Override  
57.     public void onItemClick(AdapterView<?> arg0, View view, int pos, long arg3) {  
58.         dismiss();  
59.         if (mItemSelectListener != null){  
60.             mItemSelectListener.onItemClick(pos);  
61.         }  
62.     }  
63.   
64.   
65.       
66. }  

CustemObject

[java]  view plain copy

1. <span style="color:#3366ff;">public class CustemObject {  
2.   
3.     public String data = "";  
4.       
5.     @Override  
6.     public String toString() {  
7.         // TODO Auto-generated method stub  
8.         return data;  
9.     }  
10.   
11.       
12. }</span>  

 

CustemSpinerAdapter

[java]  view plain copy

1. public class CustemSpinerAdapter extends AbstractSpinerAdapter<CustemObject>{  
2.   
3.     public CustemSpinerAdapter(Context context) {  
4.         super(context);  
5.     }  
6.   
7. }  

SpinerWindowDemoActivity

[java]  view plain copy

1. public class SpinerWindowDemoActivity extends Activity implements OnClickListener, AbstractSpinerAdapter.IOnItemSelectListener{  
2.     /** Called when the activity is first created. */  
3.       
4.     private View mRootView;  
5.     private TextView mTView;  
6.     private ImageButton mBtnDropDown;  
7.     private List<CustemObject> nameList = new ArrayList<CustemObject>();  
8.     private AbstractSpinerAdapter mAdapter;  
9.       
10.     @Override  
11.     public void onCreate(Bundle savedInstanceState) {  
12.         super.onCreate(savedInstanceState);  
13.         setContentView(R.layout.main);  
14.           
15.         setupViews();  
16.     }  
17.       
18.       
19.     private void setupViews(){  
20.         mRootView = findViewById(R.id.rootView);  
21.           
22.         mTView = (TextView) findViewById(R.id.tv_value);  
23.         mBtnDropDown = (ImageButton) findViewById(R.id.bt_dropdown);  
24.         mBtnDropDown.setOnClickListener(this);  
25.           
26.           
27.         String[] names = getResources().getStringArray(R.array.hero_name);  
28.         for(int i = 0; i < names.length; i++){  
29.             CustemObject object = new CustemObject();  
30.             object.data = names[i];  
31.             nameList.add(object);  
32.         }  
33.           
34.           
35.         mAdapter = new CustemSpinerAdapter(this);  
36.         mAdapter.refreshData(nameList, 0);  
37.   
38.         mSpinerPopWindow = new SpinerPopWindow(this);  
39.         mSpinerPopWindow.setAdatper(mAdapter);  
40.         mSpinerPopWindow.setItemListener(this);  
41.     }  
42.   
43.   
44.     @Override  
45.     public void onClick(View view) {  
46.         switch(view.getId()){  
47.         case R.id.bt_dropdown:  
48.             showSpinWindow();  
49.             break;  
50.         }  
51.     }  
52.       
53.   
54.     private void setHero(int pos){  
55.         if (pos >= 0 && pos <= nameList.size()){  
56.             CustemObject value = nameList.get(pos);  
57.           
58.             mTView.setText(value.toString());  
59.         }  
60.     }  
61.   
62.       
63.     private SpinerPopWindow mSpinerPopWindow;  
64.     private void showSpinWindow(){  
65.         Log.e("", "showSpinWindow");  
66.         mSpinerPopWindow.setWidth(mTView.getWidth());  
67.         mSpinerPopWindow.showAsDropDown(mTView);  
68.     }  
69.   
70.   
71.     @Override  
72.     public void onItemClick(int pos) {  
73.         setHero(pos);  
74.     }  
75.   
76. }  

自定义一个类重写toString方法（CustemObject），自定义一个继承自AbstractSpinerAdapter的类确定对象类型（CustemSpinerAdapter）

构造具体的AbstractSpinerAdapter类对象（CustemSpinerAdapter）

通过refreshData填充数据，然后调用SpinerPopWindow的setAdatper设置数据源，OK大功告成！

 新工程链接如下：http://download.csdn.net/detail/geniuseoe2012/5412647

 

 

OK，本节课到此为止！欲知更多Android-UI技巧，请关注窝的下一堂课~

更多精彩尽在http://blog.csdn.net/geniuseoe2012

welcome to join android develop group:298044305

 上一课：Lance老师UI系列教程第六课->微信聊天气泡界面的实现

 下一课： Lance老师UI系列教程第八课->新浪新闻SlidingMenu界面的实现