android view上下滚动条,Android WheelView实现上下滑动选择器

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

一.获得wheel

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

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

二.使用方法

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

[java]  view plain

copy

print ?

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/title"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center"

android:text="请选择城市"/>

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">

android:id="@+id/province_view"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="1">

android:id="@+id/city_view"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="1">

android:id="@+id/area_view"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:layout_weight="1">

android:id="@+id/confirm"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@id/content"

android:onClick="onClick"

android:text="确定"/>

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

[java]  view plain

copy

print ?

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集合，因此，我们设计的数据结构是这样的：

[java]  view plain

copy

print ?

/**

* 省

*/

privateString[] provinceArray;

/**

* 省-市

*/

privateMap citiesMap;

/**

* 市-区县

*/

privateMap areasMap;

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

[java]  view plain

copy

print ?

[{"name":"北京","city":[{"name":"北京","area":["东城区","西城区","崇文区","宣武区"...]}]}.....]

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

[java]  view plain

copy

print ?

privatevoidinitJson() {

citiesMap = newHashMap();

areasMap = newHashMap();

InputStream is = null;

try{

StringBuffer sb = newStringBuffer();

is = getAssets().open("city.json");

intlen = -1;

byte[] buf =newbyte[1024];

while((len = is.read(buf)) != -1) {

sb.append(newString(buf,0, len,"gbk"));

}

JSONArray ja = newJSONArray(sb.toString());

provinceArray = newString[ja.length()];

String[] citiesArr = null;

for(inti =0; i 

JSONObject jsonProvince = ja.getJSONObject(i);

provinceArray[i] = jsonProvince.getString("name");

JSONArray jsonCities = jsonProvince.getJSONArray("city");

citiesArr = newString[jsonCities.length()];

for(intj =0; j 

JSONObject jsonCity = jsonCities.getJSONObject(j);

citiesArr[j] = jsonCity.getString("name");

JSONArray jsonAreas = jsonCity.getJSONArray("area");

String[] areaArr = newString[jsonAreas.length()];

for(intk =0; 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了：

[java]  view plain

copy

print ?

privatevoidinitView() {

provinceView.setViewAdapter(newArrayWheelAdapter(

MainActivity.this, provinceArray));

// 默认显示北京直辖市里边的市(只有北京市)

cityView.setViewAdapter(newArrayWheelAdapter(

MainActivity.this, citiesMap.get("北京")));

// 默认显示北京市里边的区县

areaView.setViewAdapter(newArrayWheelAdapter(

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之后我们还设置了一些缺省值，都很简单，大家直接看注释即可，我们这里设置了两个监听事件，我们看看：

[java]  view plain

copy

print ?

@Override

publicvoidonChanged(WheelView wheel,intoldValue,intnewValue) {

if(wheel == provinceView) {

// 更新省的时候不仅要更新市同时也要更新区县

updateCity();

updateArea();

} elseif(wheel == cityView) {

// 更新市的时候只用更新区县即可

updateArea();

}

}

privatevoidupdateArea() {

// 获得当前显示的City的下标

intcityIndex = cityView.getCurrentItem();

// 获得当前显示的省的下标

intprovinceIndex = provinceView.getCurrentItem();

// 获得当前显示的省的名字

String proviceName = provinceArray[provinceIndex];

// 获得当前显示的城市的名字

String currentName = citiesMap.get(proviceName)[cityIndex];

// 根据当前显示的城市的名字获得该城市下所有的区县

String[] areas = areasMap.get(currentName);

// 将新获得的数据设置给areaView

areaView.setViewAdapter(newArrayWheelAdapter(

MainActivity.this, areas));

// 默认显示第一项

areaView.setCurrentItem(0);

}

privatevoidupdateCity() {

// 获得当前显示的省的下标

intcurrentIndex = provinceView.getCurrentItem();

// 获得当前显示的省的名称

String currentName = provinceArray[currentIndex];

// 根据当前显示的省的名称获得该省中所有的市

String[] cities = citiesMap.get(currentName);

// 将新获得的数据设置给cityView

cityView.setViewAdapter(newArrayWheelAdapter(

MainActivity.this, cities));

// 默认显示第一项

cityView.setCurrentItem(0);

}

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

[java]  view plain

copy

print ?

publicvoidonClick(View v) {

// 获得当前显示的省的下标

intprovinceIndex = provinceView.getCurrentItem();

// 获得当前显示的省的名称

String provinceName = provinceArray[provinceIndex];

// 获得当前显示的城市的下标

intcityIndex = cityView.getCurrentItem();

// 获得当前显示的城市的名称

String cityName = citiesMap.get(provinceName)[cityIndex];

// 获得当前显示的区县的下标

intareaIndex = areaView.getCurrentItem();

Toast.makeText(

this,

"您选择的地区是"+ provinceArray[provinceIndex] + cityName

+ areasMap.get(cityName)[areaIndex], Toast.LENGTH_SHORT)

.show();

}

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

[java]  view plain

copy

print ?

privateint[] SHADOWS_COLORS =newint[] {0xFF111111,0x00AAAAAA,

0x00AAAAAA};

在WheelView.java文件中，这一行代码定义了上下黑边的颜色的变化，三个参数分别是起始颜色，过渡颜色以及结束时的颜色，那么我们可以通过修改这里的源码来去掉上下的黑边，还有中间那个透明的东东黑不拉叽的，我们想改，通过源码找到了这个文件wheel_val.xml：

[java]  view plain

copy

print ?

android:startColor="#70222222"

android:centerColor="#70222222"

android:endColor="#70EEEEEE"

android:angle="90"/>

这里定义了中间那个透明条的样式，我们可以根据自己的需要进行修改。好了，这里的源码不多，也不难，大家可以自己去琢磨琢磨，关于wheel的介绍我们就说这么多。

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

小奋斗文章

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~