WheelView实现上下滑动选择器

1.获得wheel

wheel是GitHub上的一个开源控件,我们可以直接在GitHub上下载,地址https://github.com/maarek/android-wheel,下载完成之后我们可以把里边的wheel文件直接当作一个library来使用,也可以把wheel里边的Java类和xml文件拷贝到我们的项目中使用。

2.使用方法

首先我们来看看主布局文件:

[java]  view plain  copy
 print ?
  1. "http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent" >  
  5.   
  6.     
  7.         android:id="@+id/title"  
  8.         android:layout_width="wrap_content"  
  9.         android:layout_height="wrap_content"  
  10.         android:gravity="center"  
  11.         android:text="请选择城市" />  
  12.   
  13.     
  14.         android:id="@+id/content"  
  15.         android:layout_width="fill_parent"  
  16.         android:layout_height="wrap_content"  
  17.         android:layout_below="@id/title"  
  18.         android:background="@drawable/layout_bg"  
  19.         android:orientation="horizontal" >  
  20.   
  21.         
  22.             android:id="@+id/province_view"  
  23.             android:layout_width="0dp"  
  24.             android:layout_height="wrap_content"  
  25.             android:layout_weight="1" >  
  26.           
  27.   
  28.         
  29.             android:id="@+id/city_view"  
  30.             android:layout_width="0dp"  
  31.             android:layout_height="wrap_content"  
  32.             android:layout_weight="1" >  
  33.           
  34.   
  35.         
  36.             android:id="@+id/area_view"  
  37.             android:layout_width="0dp"  
  38.             android:layout_height="wrap_content"  
  39.             android:layout_weight="1" >  
  40.           
  41.       
  42.   
  43.     
  44.         android:id="@+id/confirm"  
  45.         android:layout_width="wrap_content"  
  46.         android:layout_height="wrap_content"  
  47.         android:layout_below="@id/content"  
  48.         android:onClick="onClick"  
  49.         android:text="确定" />  
  50.   
  51.   

好了,在主布局文件中我们用到了三个WheelView,分别用来表示省市县,在MainActivity中,我们首先要拿到这三个控件:

[java]  view plain  copy
 print ?
  1. provinceView = (WheelView) this.findViewById(R.id.province_view);  
  2.         cityView = (WheelView) this.findViewById(R.id.city_view);  
  3.         areaView = (WheelView) this.findViewById(R.id.area_view);  

拿到之后,我们要使用ArrayWheelAdapter数据适配器来进行数据适配,这里需要两个参数,一个是上下文,另外一个是一个数组,这个数组就是我们要展示的内容,也就是说我们要把省、市、区县都存为数组的形式,但是考虑到一个省对应多个市,一个市对应多个区县,为了把省市县之间关联起来,我们还要用到一个Map集合,因此,我们设计的数据结构是这样的:

[java]  view plain  copy
 print ?
  1. /** 
  2.      * 省 
  3.      */  
  4.     private String[] provinceArray;  
  5.     /** 
  6.      * 省-市 
  7.      */  
  8.     private Map citiesMap;  
  9.     /** 
  10.      * 市-区县 
  11.      */  
  12.     private Map areasMap;  

第一个数组中存所有省的数据,第二个Map中存所有省对应的市的数据,第三个Map中存所有市对应的区县的数据,我们现在要给这是三个数据集赋值,先来看看我们的json数据格式:

[java]  view plain  copy
 print ?
  1. [{"name":"北京","city":[{"name":"北京","area":["东城区","西城区","崇文区","宣武区"...]}]}.....]  

我们的json数据就是这样一种格式,json数据存在assets文件夹中,下面我们看看怎么解析json数据并赋值给上面三个数据集:

[java]  view plain  copy
 print ?
  1. private void initJson() {  
  2.     citiesMap = new HashMap();  
  3.     areasMap = new HashMap();  
  4.     InputStream is = null;  
  5.     try {  
  6.         StringBuffer sb = new StringBuffer();  
  7.         is = getAssets().open("city.json");  
  8.         int len = -1;  
  9.         byte[] buf = new byte[1024];  
  10.         while ((len = is.read(buf)) != -1) {  
  11.             sb.append(new String(buf, 0, len, "gbk"));  
  12.         }  
  13.         JSONArray ja = new JSONArray(sb.toString());  
  14.         provinceArray = new String[ja.length()];  
  15.         String[] citiesArr = null;  
  16.         for (int i = 0; i < provinceArray.length; i++) {  
  17.             JSONObject jsonProvince = ja.getJSONObject(i);  
  18.             provinceArray[i] = jsonProvince.getString("name");  
  19.             JSONArray jsonCities = jsonProvince.getJSONArray("city");  
  20.             citiesArr = new String[jsonCities.length()];  
  21.             for (int j = 0; j < citiesArr.length; j++) {  
  22.                 JSONObject jsonCity = jsonCities.getJSONObject(j);  
  23.                 citiesArr[j] = jsonCity.getString("name");  
  24.                 JSONArray jsonAreas = jsonCity.getJSONArray("area");  
  25.                 String[] areaArr = new String[jsonAreas.length()];  
  26.                 for (int k = 0; k < jsonAreas.length(); k++) {  
  27.                     areaArr[k] = jsonAreas.getString(k);  
  28.                 }  
  29.                 areasMap.put(citiesArr[j], areaArr);  
  30.             }  
  31.             citiesMap.put(provinceArray[i], citiesArr);  
  32.         }  
  33.   
  34.     } catch (IOException e) {  
  35.         e.printStackTrace();  
  36.     } catch (JSONException e) {  
  37.         e.printStackTrace();  
  38.     } finally {  
  39.         if (is != null) {  
  40.             try {  
  41.                 is.close();  
  42.             } catch (IOException e) {  
  43.                 e.printStackTrace();  
  44.             }  
  45.         }  
  46.     }  
  47. }  
json解析技术上没有难点,这里的逻辑稍微有点复杂,用到了三个嵌套的for循环,大家慢慢琢磨一下其实也不难。好了,当数据集中都有数据之后,我们就可以给三个wheel设置Adapter了:

[java]  view plain  copy
 print ?
  1. private void initView() {  
  2.     provinceView.setViewAdapter(new ArrayWheelAdapter(  
  3.             MainActivity.this, provinceArray));  
  4.     // 默认显示北京直辖市里边的市(只有北京市)  
  5.     cityView.setViewAdapter(new ArrayWheelAdapter(  
  6.             MainActivity.this, citiesMap.get("北京")));  
  7.     // 默认显示北京市里边的区县  
  8.     areaView.setViewAdapter(new ArrayWheelAdapter(  
  9.             MainActivity.this, areasMap.get("北京")));  
  10.   
  11.     // 默认显示第一项  
  12.     provinceView.setCurrentItem(0);  
  13.     // 默认显示第一项  
  14.     cityView.setCurrentItem(0);  
  15.     // 默认显示第一项  
  16.     areaView.setCurrentItem(0);  
  17.     // 页面上显示7项  
  18.     provinceView.setVisibleItems(7);  
  19.     cityView.setVisibleItems(7);  
  20.     areaView.setVisibleItems(7);  
  21.     // 添加滑动事件  
  22.     provinceView.addChangingListener(this);  
  23.     cityView.addChangingListener(this);  
  24. }  
设置完Adapter之后我们还设置了一些缺省值,都很简单,大家直接看注释即可,我们这里设置了两个监听事件,我们看看:

[java]  view plain  copy
 print ?
  1. @Override  
  2.     public void onChanged(WheelView wheel, int oldValue, int newValue) {  
  3.         if (wheel == provinceView) {  
  4.             // 更新省的时候不仅要更新市同时也要更新区县  
  5.             updateCity();  
  6.             updateArea();  
  7.         } else if (wheel == cityView) {  
  8.             // 更新市的时候只用更新区县即可  
  9.             updateArea();  
  10.         }  
  11.     }  
  12.   
  13.     private void updateArea() {  
  14.         // 获得当前显示的City的下标  
  15.         int cityIndex = cityView.getCurrentItem();  
  16.         // 获得当前显示的省的下标  
  17.         int provinceIndex = provinceView.getCurrentItem();  
  18.         // 获得当前显示的省的名字  
  19.         String proviceName = provinceArray[provinceIndex];  
  20.         // 获得当前显示的城市的名字  
  21.         String currentName = citiesMap.get(proviceName)[cityIndex];  
  22.         // 根据当前显示的城市的名字获得该城市下所有的区县  
  23.         String[] areas = areasMap.get(currentName);  
  24.         // 将新获得的数据设置给areaView  
  25.         areaView.setViewAdapter(new ArrayWheelAdapter(  
  26.                 MainActivity.this, areas));  
  27.         // 默认显示第一项  
  28.         areaView.setCurrentItem(0);  
  29.     }  
  30.   
  31.     private void updateCity() {  
  32.         // 获得当前显示的省的下标  
  33.         int currentIndex = provinceView.getCurrentItem();  
  34.         // 获得当前显示的省的名称  
  35.         String currentName = provinceArray[currentIndex];  
  36.         // 根据当前显示的省的名称获得该省中所有的市  
  37.         String[] cities = citiesMap.get(currentName);  
  38.         // 将新获得的数据设置给cityView  
  39.         cityView.setViewAdapter(new ArrayWheelAdapter(  
  40.                 MainActivity.this, cities));  
  41.         // 默认显示第一项  
  42.         cityView.setCurrentItem(0);  
  43.     }  

几乎每行代码都有注释,我就不啰嗦了,最后我们再来看看点击事件:

[java]  view plain  copy
 print ?
  1. public void onClick(View v) {  
  2.     // 获得当前显示的省的下标  
  3.     int provinceIndex = provinceView.getCurrentItem();  
  4.     // 获得当前显示的省的名称  
  5.     String provinceName = provinceArray[provinceIndex];  
  6.     // 获得当前显示的城市的下标  
  7.     int cityIndex = cityView.getCurrentItem();  
  8.     // 获得当前显示的城市的名称  
  9.     String cityName = citiesMap.get(provinceName)[cityIndex];  
  10.     // 获得当前显示的区县的下标  
  11.     int areaIndex = areaView.getCurrentItem();  
  12.     Toast.makeText(  
  13.             this,  
  14.             "您选择的地区是" + provinceArray[provinceIndex] + cityName  
  15.                     + areasMap.get(cityName)[areaIndex], Toast.LENGTH_SHORT)  
  16.             .show();  
  17. }  

好了,到这里我们想要的功能基本上就实现了,但是我们可以看到,系统默认的样式略显丑陋,那我我们可以通过修改源码来获得我们想要的样式,首先上下的黑边看这里:

[java]  view plain  copy
 print ?
  1. private int[] SHADOWS_COLORS = new int[] { 0xFF1111110x00AAAAAA,  
  2.             0x00AAAAAA };  
在WheelView.java文件中,这一行代码定义了上下黑边的颜色的变化,三个参数分别是起始颜色,过渡颜色以及结束时的颜色,那么我们可以通过修改这里的源码来去掉上下的黑边,还有中间那个透明的东东黑不拉叽的,我们想改,通过源码找到了这个文件wheel_val.xml:

[java]  view plain  copy
 print ?
  1. "http://schemas.android.com/apk/res/android">  
  2.     
  3.         android:startColor="#70222222"  
  4.         android:centerColor="#70222222"  
  5.         android:endColor="#70EEEEEE"  
  6.         android:angle="90" />  
  7.   
  8.     "1dp" android:color="#70333333" />   
  9.   
这里定义了中间那个透明条的样式,我们可以根据自己的需要进行修改。好了,这里的源码不多,也不难,大家可以自己去琢磨琢磨,关于wheel的介绍我们就说这么多。


本文Demo下载https://github.com/lenve/wheelTest


你可能感兴趣的:(Android)