溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時間:2020-09-03 07:19:06 來源:腳本之家 閱讀:109 作者:Angel_jn 欄目:移動開發(fā)

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

1.獲得wheel

wheel是GitHub上的一個開源控件,我們可以直接在GitHub上下載,地址https://github.com/maarek/android-wheel,下載完成之后我們可以把里邊的wheel文件直接當(dāng)作一個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ù)適配器來進(jìn)行數(shù)據(jù)適配,這里需要兩個參數(shù),一個是上下文,另外一個是一個數(shù)組,這個數(shù)組就是我們要展示的內(nèi)容,也就是說我們要把省、市、區(qū)縣都存為數(shù)組的形式,但是考慮到一個省對應(yīng)多個市,一個市對應(yīng)多個區(qū)縣,為了把省市縣之間關(guān)聯(lián)起來,我們還要用到一個Map集合,因此,我們設(shè)計的數(shù)據(jù)結(jié)構(gòu)是這樣的:

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

第一個數(shù)組中存所有省的數(shù)據(jù),第二個Map中存所有省對應(yīng)的市的數(shù)據(jù),第三個Map中存所有市對應(yīng)的區(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解析技術(shù)上沒有難點,這里的邏輯稍微有點復(fù)雜,用到了三個嵌套的for循環(huán),大家慢慢琢磨一下其實也不難。好了,當(dāng)數(shù)據(jù)集中都有數(shù)據(jù)之后,我們就可以給三個wheel設(shè)置Adapter了:

private void initView() { 
  provinceView.setViewAdapter(new ArrayWheelAdapter<String>( 
      MainActivity.this, provinceArray)); 
  // 默認(rèn)顯示北京直轄市里邊的市(只有北京市) 
  cityView.setViewAdapter(new ArrayWheelAdapter<String>( 
      MainActivity.this, citiesMap.get("北京"))); 
  // 默認(rèn)顯示北京市里邊的區(qū)縣 
  areaView.setViewAdapter(new ArrayWheelAdapter<String>( 
      MainActivity.this, areasMap.get("北京"))); 
 
  // 默認(rèn)顯示第一項 
  provinceView.setCurrentItem(0); 
  // 默認(rèn)顯示第一項 
  cityView.setCurrentItem(0); 
  // 默認(rèn)顯示第一項 
  areaView.setCurrentItem(0); 
  // 頁面上顯示7項 
  provinceView.setVisibleItems(7); 
  cityView.setVisibleItems(7); 
  areaView.setVisibleItems(7); 
  // 添加滑動事件 
  provinceView.addChangingListener(this); 
  cityView.addChangingListener(this); 
} 

設(shè)置完Adapter之后我們還設(shè)置了一些缺省值,都很簡單,大家直接看注釋即可,我們這里設(shè)置了兩個監(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() { 
    // 獲得當(dāng)前顯示的City的下標(biāo) 
    int cityIndex = cityView.getCurrentItem(); 
    // 獲得當(dāng)前顯示的省的下標(biāo) 
    int provinceIndex = provinceView.getCurrentItem(); 
    // 獲得當(dāng)前顯示的省的名字 
    String proviceName = provinceArray[provinceIndex]; 
    // 獲得當(dāng)前顯示的城市的名字 
    String currentName = citiesMap.get(proviceName)[cityIndex]; 
    // 根據(jù)當(dāng)前顯示的城市的名字獲得該城市下所有的區(qū)縣 
    String[] areas = areasMap.get(currentName); 
    // 將新獲得的數(shù)據(jù)設(shè)置給areaView 
    areaView.setViewAdapter(new ArrayWheelAdapter<String>( 
        MainActivity.this, areas)); 
    // 默認(rèn)顯示第一項 
    areaView.setCurrentItem(0); 
  } 
 
  private void updateCity() { 
    // 獲得當(dāng)前顯示的省的下標(biāo) 
    int currentIndex = provinceView.getCurrentItem(); 
    // 獲得當(dāng)前顯示的省的名稱 
    String currentName = provinceArray[currentIndex]; 
    // 根據(jù)當(dāng)前顯示的省的名稱獲得該省中所有的市 
    String[] cities = citiesMap.get(currentName); 
    // 將新獲得的數(shù)據(jù)設(shè)置給cityView 
    cityView.setViewAdapter(new ArrayWheelAdapter<String>( 
        MainActivity.this, cities)); 
    // 默認(rèn)顯示第一項 
    cityView.setCurrentItem(0); 
  } 

幾乎每行代碼都有注釋,我就不啰嗦了,最后我們再來看看點擊事件:

public void onClick(View v) { 
  // 獲得當(dāng)前顯示的省的下標(biāo) 
  int provinceIndex = provinceView.getCurrentItem(); 
  // 獲得當(dāng)前顯示的省的名稱 
  String provinceName = provinceArray[provinceIndex]; 
  // 獲得當(dāng)前顯示的城市的下標(biāo) 
  int cityIndex = cityView.getCurrentItem(); 
  // 獲得當(dāng)前顯示的城市的名稱 
  String cityName = citiesMap.get(provinceName)[cityIndex]; 
  // 獲得當(dāng)前顯示的區(qū)縣的下標(biāo) 
  int areaIndex = areaView.getCurrentItem(); 
  Toast.makeText( 
      this, 
      "您選擇的地區(qū)是" + provinceArray[provinceIndex] + cityName 
          + areasMap.get(cityName)[areaIndex], Toast.LENGTH_SHORT) 
      .show(); 
} 

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

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

在WheelView.java文件中,這一行代碼定義了上下黑邊的顏色的變化,三個參數(shù)分別是起始顏色,過渡顏色以及結(jié)束時的顏色,那么我們可以通過修改這里的源碼來去掉上下的黑邊,還有中間那個透明的東東黑不拉嘰的,我們想改,通過源碼找到了這個文件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ù)自己的需要進(jìn)行修改。好了,這里的源碼不多,也不難,大家可以自己去琢磨琢磨,關(guān)于wheel的介紹我們就說這么多。

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

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI