1.获得wheel
wheel是GitHub上的一个开源控件,我们可以直接在GitHub上下载,地址https://github.com/maarek/android-wheel,下载完成之后我们可以把里边的wheel文件直接当作一个library来使用,也可以把wheel里边的Java类和xml文件拷贝到我们的项目中使用。
2.使用方法
首先我们来看看主布局文件:
- <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>
好了,在主布局文件中我们用到了三个WheelView,分别用来表示省市县,在MainActivity中,我们首先要拿到这三个控件:
- provinceView = (WheelView) this.findViewById(R.id.province_view);
- cityView = (WheelView) this.findViewById(R.id.city_view);
- areaView = (WheelView) this.findViewById(R.id.area_view);
拿到之后,我们要使用ArrayWheelAdapter数据适配器来进行数据适配,这里需要两个参数,一个是上下文,另外一个是一个数组,这个数组就是我们要展示的内容,也就是说我们要把省、市、区县都存为数组的形式,但是考虑到一个省对应多个市,一个市对应多个区县,为了把省市县之间关联起来,我们还要用到一个Map集合,因此,我们设计的数据结构是这样的:
- /**
- * 省
- */
- private String[] provinceArray;
- /**
- * 省-市
- */
- private Map<String, String[]> citiesMap;
- /**
- * 市-区县
- */
- private Map<String, String[]> areasMap;
第一个数组中存所有省的数据,第二个Map中存所有省对应的市的数据,第三个Map中存所有市对应的区县的数据,我们现在要给这是三个数据集赋值,先来看看我们的json数据格式:
- [{"name":"北京","city":[{"name":"北京","area":["东城区","西城区","崇文区","宣武区"...]}]}.....]
我们的json数据就是这样一种格式,json数据存在assets文件夹中,下面我们看看怎么解析json数据并赋值给上面三个数据集:
- 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();
- }
- }
- }
- }
- 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);
- }
- @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 };
- <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>
本文Demo下载https://github.com/lenve/wheelTest