码迷,mamicode.com
首页 > 移动开发 > 详细

android开发之wheel控件使用详解

时间:2015-11-15 01:03:09      阅读:433      评论:0      收藏:0      [点我收藏+]

标签:android   wheel   省市区三级联动   

出门在外生不起病呀,随便两盒药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


版权声明:本文为博主原创文章,未经博主允许不得转载。若有错误地方,还望批评指正,不胜感激。

android开发之wheel控件使用详解

标签:android   wheel   省市区三级联动   

原文地址:http://blog.csdn.net/u012702547/article/details/49838871

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!