出门在外生不起病呀,随便两盒药60多块钱。好吧,不废话了,今天我们来看看wheel控件的使用,这是GitHub上的一个开源控件,用起来十分方便,我们可以用它做许多事情,比如做一个自定义的datepicker,在一些电商App中,经常用它来做省市县三级联动,总之用途还是挺多的,我们今天就一起来看看怎么使用这个东东。
我们先来看看今天要做的一个效果图:
这是我们今天要做的效果图。下面就开始吧。
wheel是GitHub上的一个开源控件,我们可以直接在GitHub上下载,地址https://github.com/maarek/android-wheel,下载完成之后我们可以把里边的wheel文件直接当作一个library来使用,也可以把wheel里边的Java类和xml文件拷贝到我们的项目中使用。
首先我们来看看主布局文件:
<RelativeLayout 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" > <TextView android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:text="请选择城市" /> <LinearLayout android:id="@+id/content" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/title" android:background="@drawable/layout_bg" android:orientation="horizontal" > <kankan.wheel.widget.WheelView android:id="@+id/province_view" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" > </kankan.wheel.widget.WheelView> <kankan.wheel.widget.WheelView android:id="@+id/city_view" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" > </kankan.wheel.widget.WheelView> <kankan.wheel.widget.WheelView android:id="@+id/area_view" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" > </kankan.wheel.widget.WheelView> </LinearLayout> <Button android:id="@+id/confirm" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/content" android:onClick="onClick" android:text="确定" /> </RelativeLayout>
provinceView = (WheelView) this.findViewById(R.id.province_view); cityView = (WheelView) this.findViewById(R.id.city_view); areaView = (WheelView) this.findViewById(R.id.area_view);
/** * 省 */ private String[] provinceArray; /** * 省-市 */ private Map<String, String[]> citiesMap; /** * 市-区县 */ private Map<String, String[]> areasMap;
[{"name":"北京","city":[{"name":"北京","area":["东城区","西城区","崇文区","宣武区"...]}]}.....]
private void initJson() { citiesMap = new HashMap<String, String[]>(); areasMap = new HashMap<String, String[]>(); InputStream is = null; try { StringBuffer sb = new StringBuffer(); is = getAssets().open("city.json"); int len = -1; byte[] buf = new byte[1024]; while ((len = is.read(buf)) != -1) { sb.append(new String(buf, 0, len, "gbk")); } JSONArray ja = new JSONArray(sb.toString()); provinceArray = new String[ja.length()]; String[] citiesArr = null; for (int i = 0; i < provinceArray.length; i++) { JSONObject jsonProvince = ja.getJSONObject(i); provinceArray[i] = jsonProvince.getString("name"); JSONArray jsonCities = jsonProvince.getJSONArray("city"); citiesArr = new String[jsonCities.length()]; for (int j = 0; j < citiesArr.length; j++) { JSONObject jsonCity = jsonCities.getJSONObject(j); citiesArr[j] = jsonCity.getString("name"); JSONArray jsonAreas = jsonCity.getJSONArray("area"); String[] areaArr = new String[jsonAreas.length()]; for (int k = 0; k < jsonAreas.length(); k++) { areaArr[k] = jsonAreas.getString(k); } areasMap.put(citiesArr[j], areaArr); } citiesMap.put(provinceArray[i], citiesArr); } } catch (IOException e) { e.printStackTrace(); } catch (JSONException e) { e.printStackTrace(); } finally { if (is != null) { try { is.close(); } catch (IOException e) { e.printStackTrace(); } } } }json解析技术上没有难点,这里的逻辑稍微有点复杂,用到了三个嵌套的for循环,大家慢慢琢磨一下其实也不难。好了,当数据集中都有数据之后,我们就可以给三个wheel设置Adapter了:
private void initView() { provinceView.setViewAdapter(new ArrayWheelAdapter<String>( MainActivity.this, provinceArray)); // 默认显示北京直辖市里边的市(只有北京市) cityView.setViewAdapter(new ArrayWheelAdapter<String>( MainActivity.this, citiesMap.get("北京"))); // 默认显示北京市里边的区县 areaView.setViewAdapter(new ArrayWheelAdapter<String>( MainActivity.this, areasMap.get("北京"))); // 默认显示第一项 provinceView.setCurrentItem(0); // 默认显示第一项 cityView.setCurrentItem(0); // 默认显示第一项 areaView.setCurrentItem(0); // 页面上显示7项 provinceView.setVisibleItems(7); cityView.setVisibleItems(7); areaView.setVisibleItems(7); // 添加滑动事件 provinceView.addChangingListener(this); cityView.addChangingListener(this); }设置完Adapter之后我们还设置了一些缺省值,都很简单,大家直接看注释即可,我们这里设置了两个监听事件,我们看看:
@Override public void onChanged(WheelView wheel, int oldValue, int newValue) { if (wheel == provinceView) { // 更新省的时候不仅要更新市同时也要更新区县 updateCity(); updateArea(); } else if (wheel == cityView) { // 更新市的时候只用更新区县即可 updateArea(); } } private void updateArea() { // 获得当前显示的City的下标 int cityIndex = cityView.getCurrentItem(); // 获得当前显示的省的下标 int provinceIndex = provinceView.getCurrentItem(); // 获得当前显示的省的名字 String proviceName = provinceArray[provinceIndex]; // 获得当前显示的城市的名字 String currentName = citiesMap.get(proviceName)[cityIndex]; // 根据当前显示的城市的名字获得该城市下所有的区县 String[] areas = areasMap.get(currentName); // 将新获得的数据设置给areaView areaView.setViewAdapter(new ArrayWheelAdapter<String>( MainActivity.this, areas)); // 默认显示第一项 areaView.setCurrentItem(0); } private void updateCity() { // 获得当前显示的省的下标 int currentIndex = provinceView.getCurrentItem(); // 获得当前显示的省的名称 String currentName = provinceArray[currentIndex]; // 根据当前显示的省的名称获得该省中所有的市 String[] cities = citiesMap.get(currentName); // 将新获得的数据设置给cityView cityView.setViewAdapter(new ArrayWheelAdapter<String>( MainActivity.this, cities)); // 默认显示第一项 cityView.setCurrentItem(0); }
public void onClick(View v) { // 获得当前显示的省的下标 int provinceIndex = provinceView.getCurrentItem(); // 获得当前显示的省的名称 String provinceName = provinceArray[provinceIndex]; // 获得当前显示的城市的下标 int cityIndex = cityView.getCurrentItem(); // 获得当前显示的城市的名称 String cityName = citiesMap.get(provinceName)[cityIndex]; // 获得当前显示的区县的下标 int areaIndex = areaView.getCurrentItem(); Toast.makeText( this, "您选择的地区是" + provinceArray[provinceIndex] + cityName + areasMap.get(cityName)[areaIndex], Toast.LENGTH_SHORT) .show(); }
private int[] SHADOWS_COLORS = new int[] { 0xFF111111, 0x00AAAAAA, 0x00AAAAAA };在WheelView.java文件中,这一行代码定义了上下黑边的颜色的变化,三个参数分别是起始颜色,过渡颜色以及结束时的颜色,那么我们可以通过修改这里的源码来去掉上下的黑边,还有中间那个透明的东东黑不拉叽的,我们想改,通过源码找到了这个文件wheel_val.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"> <gradient android:startColor="#70222222" android:centerColor="#70222222" android:endColor="#70EEEEEE" android:angle="90" /> <stroke android:width="1dp" android:color="#70333333" /> </shape>这里定义了中间那个透明条的样式,我们可以根据自己的需要进行修改。好了,这里的源码不多,也不难,大家可以自己去琢磨琢磨,关于wheel的介绍我们就说这么多。
本文Demo下载https://github.com/lenve/wheelTest
版权声明:本文为博主原创文章,未经博主允许不得转载。若有错误地方,还望批评指正,不胜感激。
原文地址:http://blog.csdn.net/u012702547/article/details/49838871