WheelView實現(xiàn)上下滑動選擇器

2019-10-22 18:18:48

字體：大中小

來源：轉載

供稿：網(wǎng)友

本文實例為大家分享了WheelView實現(xiàn)上下滑動選擇器的具體代碼，供大家參考，具體內容如下

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數(shù)據(jù)適配器來進行數(shù)據(jù)適配，這里需要兩個參數(shù)，一個是上下文，另外一個是一個數(shù)組，這個數(shù)組就是我們要展示的內容，也就是說我們要把省、市、區(qū)縣都存為數(shù)組的形式，但是考慮到一個省對應多個市，一個市對應多個區(qū)縣，為了把省市縣之間關聯(lián)起來，我們還要用到一個Map集合，因此，我們設計的數(shù)據(jù)結構是這樣的：

/**    * 省    */   private String[] provinceArray;   /**    * 省-市    */   private Map<String, String[]> citiesMap;   /**    * 市-區(qū)縣    */   private Map<String, String[]> areasMap;

第一個數(shù)組中存所有省的數(shù)據(jù)，第二個Map中存所有省對應的市的數(shù)據(jù)，第三個Map中存所有市對應的區(qū)縣的數(shù)據(jù)，我們現(xiàn)在要給這是三個數(shù)據(jù)集賦值，先來看看我們的json數(shù)據(jù)格式：
[{"name":"北京","city":[{"name":"北京","area":["東城區(qū)","西城區(qū)","崇文區(qū)","宣武區(qū)"...]}]}.....]

我們的json數(shù)據(jù)就是這樣一種格式，json數(shù)據(jù)存在assets文件夾中，下面我們看看怎么解析json數(shù)據(jù)并賦值給上面三個數(shù)據(jù)集：

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循環(huán)，大家慢慢琢磨一下其實也不難。好了，當數(shù)據(jù)集中都有數(shù)據(jù)之后，我們就可以給三個wheel設置Adapter了：

private void initView() {   provinceView.setViewAdapter(new ArrayWheelAdapter<String>(       MainActivity.this, provinceArray));   // 默認顯示北京直轄市里邊的市（只有北京市）   cityView.setViewAdapter(new ArrayWheelAdapter<String>(       MainActivity.this, citiesMap.get("北京")));   // 默認顯示北京市里邊的區(qū)縣   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之后我們還設置了一些缺省值，都很簡單，大家直接看注釋即可，我們這里設置了兩個監(jiān)聽事件，我們看看：

@Override   public void onChanged(WheelView wheel, int oldValue, int newValue) {     if (wheel == provinceView) {       // 更新省的時候不僅要更新市同時也要更新區(qū)縣       updateCity();       updateArea();     } else if (wheel == cityView) {       // 更新市的時候只用更新區(qū)縣即可       updateArea();     }   }    private void updateArea() {     // 獲得當前顯示的City的下標     int cityIndex = cityView.getCurrentItem();     // 獲得當前顯示的省的下標     int provinceIndex = provinceView.getCurrentItem();     // 獲得當前顯示的省的名字     String proviceName = provinceArray[provinceIndex];     // 獲得當前顯示的城市的名字     String currentName = citiesMap.get(proviceName)[cityIndex];     // 根據(jù)當前顯示的城市的名字獲得該城市下所有的區(qū)縣     String[] areas = areasMap.get(currentName);     // 將新獲得的數(shù)據(jù)設置給areaView     areaView.setViewAdapter(new ArrayWheelAdapter<String>(         MainActivity.this, areas));     // 默認顯示第一項     areaView.setCurrentItem(0);   }    private void updateCity() {     // 獲得當前顯示的省的下標     int currentIndex = provinceView.getCurrentItem();     // 獲得當前顯示的省的名稱     String currentName = provinceArray[currentIndex];     // 根據(jù)當前顯示的省的名稱獲得該省中所有的市     String[] cities = citiesMap.get(currentName);     // 將新獲得的數(shù)據(jù)設置給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];   // 獲得當前顯示的區(qū)縣的下標   int areaIndex = areaView.getCurrentItem();   Toast.makeText(       this,       "您選擇的地區(qū)是" + provinceArray[provinceIndex] + cityName           + areasMap.get(cityName)[areaIndex], Toast.LENGTH_SHORT)       .show(); }

好了，到這里我們想要的功能基本上就實現(xiàn)了，但是我們可以看到，系統(tǒng)默認的樣式略顯丑陋，那我我們可以通過修改源碼來獲得我們想要的樣式，首先上下的黑邊看這里：

private int[] SHADOWS_COLORS = new int[] { 0xFF111111, 0x00AAAAAA,       0x00AAAAAA };

在WheelView.java文件中，這一行代碼定義了上下黑邊的顏色的變化，三個參數(shù)分別是起始顏色，過渡顏色以及結束時的顏色，那么我們可以通過修改這里的源碼來去掉上下的黑邊，還有中間那個透明的東東黑不拉嘰的，我們想改，通過源碼找到了這個文件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>

這里定義了中間那個透明條的樣式，我們可以根據(jù)自己的需要進行修改。好了，這里的源碼不多，也不難，大家可以自己去琢磨琢磨，關于wheel的介紹我們就說這么多。

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網(wǎng)。

注：相關教程知識閱讀請移步到Android開發(fā)頻道。

上一篇：Android利用animation-list實現(xiàn)幀動畫

下一篇：Android編程設計模式之責任鏈模式詳解