出门在外生不起病呀，随便两盒药60多块钱。好吧，不废话了，今天我们来看看wheel控件的使用，这是GitHub上的一个开源控件，用起来十分方便，我们可以用它做许多事情，比如做一个自定义的datepicker，在一些电商App中，经常用它来做省市县三级联动，总之用途还是挺多的，我们今天就一起来看看怎么使用这个东东。
我们先来看看今天要做的一个效果图：
这是我们今天要做的效果图。下面就开始吧。
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();
}
}
}
}
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
版权声明：本文为博主原创文章，未经博主允许不得转载。若有错误地方，还望批评指正，不胜感激。
时间： 2024-10-26 23:42:59