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


分类: android android UI教程   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界面的实现

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值