android開發之wheel控制元件使用詳解
阿新 • • 發佈：2018-12-27
出門在外生不起病呀，隨便兩盒藥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();
}
}
}
} 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);
}@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 };<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>