android開發之wheel控制項使用詳解

標籤：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之後我們還設定了一些預設值，都很簡單，大家直接看注釋即可，我們這裡設定了兩個監聽事件，我們看看：

@Overridepublic 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);// 將新獲得的資料設定給areaViewareaView.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);// 將新獲得的資料設定給cityViewcityView.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"><gradientandroid: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控制項使用詳解