Android省市區三級聯動滾輪選擇

阿新 • • 發佈：2019-01-07

最近專案要做一個，類似淘寶手機客戶端的，選擇收貨地址的三級聯動滾動選擇元件，下面是它的大致介面截圖：

在iOS中有個叫UIPickerView的選擇器，並且在dataSource中定義了UIPickerView的資料來源和定製內容，所以用只要熟悉它的基本用法，要實現這麼個三級聯動滑動選擇是挺簡單的。

言歸正傳，今天討論的是在Android裡面如何來實現這麼個效果，那麼如何實現呢？？？相信部分童鞋首先想到的是android.widget.DatePicker和android.widget.TimePicker，因為它們的樣子長得很像，事實就是它們僅僅是長得相而已，Google在設計這個兩個widget的時候，並沒有提供對外的資料來源適配介面，帶來的問題就是，我們只能通過它們來選擇日期和時間，至於為什麼這樣設計，如果有童鞋知道，請給我留言，Thanks~

DatePicker.class包含的方法截圖：

全都是關於時間獲取用的方法.

好了，既然在Android中沒辦法偷懶的用一個系統widget搞定，那麼只能自己來自定義view來實現了，這篇就圍繞這個來展開分享一下，我在專案中實現這個的全過程。首先是做了下開原始碼調研，在github上面有一個叫做 android-wheel 的開源控制元件, 程式碼地址https://github.com/maarek/android-wheel

是一個非常好用的元件，對於資料適配介面的抽取和事件的回撥都做了抽取，程式碼的耦合度低，唯一不足就是在介面的定製這塊，如果你需要做更改，需要去動原始碼的。我這裡在介面的程式碼做了改動，放在我的專案src目錄下了：

在此次專案中，省市區及郵編的資料是放在了assets/province_data.xml裡面，是產品經理花了好幾天時間整理的，絕對是最齊全和完善了，辛苦辛苦！！！

關於XML的解析，一共有SAX、PULL、DOM三種解析方式，這裡就不講了，可以看我的前面的幾篇學習的文章：

此次專案中使用的是SAX解析方式，因為它佔用記憶體少，並且速度快，資料解析程式碼寫在了 com.mrwujay.cascade.service/XmlParserHandler.Java中，程式碼如下：

package com.mrwujay.cascade.service;
import java.util.ArrayList;
import java.util.List;
import org.xml.sax.Attributes;
import org.xml.sax.SAXException;
import org.xml.sax.helpers.DefaultHandler;
import com.mrwujay.cascade.model.CityModel;
import com.mrwujay.cascade.model.DistrictModel;
import com.mrwujay.cascade.model.ProvinceModel;

public class XmlParserHandler extends DefaultHandler {
	/**
	 * 儲存所有的解析物件
	 */
	private List<ProvinceModel> provinceList = new ArrayList<ProvinceModel>();
	public XmlParserHandler() {
	}
	public List<ProvinceModel> getDataList() {
		return provinceList;
	}
	@Override
	public void startDocument() throws SAXException {
		// 當讀到第一個開始標籤的時候，會觸發這個方法
	}
	ProvinceModel provinceModel = new ProvinceModel();
	CityModel cityModel = new CityModel();
	DistrictModel districtModel = new DistrictModel();
	@Override
	public void startElement(String uri, String localName, String qName,
			Attributes attributes) throws SAXException {
		// 當遇到開始標記的時候，呼叫這個方法
		if (qName.equals("province")) {
			provinceModel = new ProvinceModel();
			provinceModel.setName(attributes.getValue(0));
			provinceModel.setCityList(new ArrayList<CityModel>());
		} else if (qName.equals("city")) {
			cityModel = new CityModel();
			cityModel.setName(attributes.getValue(0));
			cityModel.setDistrictList(new ArrayList<DistrictModel>());
		} else if (qName.equals("district")) {
			districtModel = new DistrictModel();
			districtModel.setName(attributes.getValue(0));
			districtModel.setZipcode(attributes.getValue(1));
		}
	}

	@Override
	public void endElement(String uri, String localName, String qName)
			throws SAXException {
		// 遇到結束標記的時候，會呼叫這個方法
		if (qName.equals("district")) {
			cityModel.getDistrictList().add(districtModel);
        } else if (qName.equals("city")) {
        	provinceModel.getCityList().add(cityModel);
        } else if (qName.equals("province")) {
        	provinceList.add(provinceModel);
        }
	}
	
	@Override
	public void characters(char[] ch, int start, int length)
			throws SAXException {
	}
}

通過XmlParserHandler.java提供的getDataList（）方法獲取得到，之後再進行拆分放到省、市、區不同的HashMap裡面方便做資料適配。

這裡是它的具體實現程式碼：

protected void initProvinceDatas()
	{
		List<ProvinceModel> provinceList = null;
    	AssetManager asset = getAssets();
        try {
            InputStream input = asset.open("province_data.xml");
            // 建立一個解析xml的工廠物件
			SAXParserFactory spf = SAXParserFactory.newInstance();
			// 解析xml
			SAXParser parser = spf.newSAXParser();
			XmlParserHandler handler = new XmlParserHandler();
			parser.parse(input, handler);
			input.close();
			// 獲取解析出來的資料
			provinceList = handler.getDataList();
			//*/ 初始化預設選中的省、市、區
			if (provinceList!= null && !provinceList.isEmpty()) {
				mCurrentProviceName = provinceList.get(0).getName();
				List<CityModel> cityList = provinceList.get(0).getCityList();
				if (cityList!= null && !cityList.isEmpty()) {
					mCurrentCityName = cityList.get(0).getName();
					List<DistrictModel> districtList = cityList.get(0).getDistrictList();
					mCurrentDistrictName = districtList.get(0).getName();
					mCurrentZipCode = districtList.get(0).getZipcode();
				}
			}
			//*/
			mProvinceDatas = new String[provinceList.size()];
        	for (int i=0; i< provinceList.size(); i++) {
        		mProvinceDatas[i] = provinceList.get(i).getName();
        		List<CityModel> cityList = provinceList.get(i).getCityList();
        		String[] cityNames = new String[cityList.size()];
        		for (int j=0; j< cityList.size(); j++) {
        			cityNames[j] = cityList.get(j).getName();
        			List<DistrictModel> districtList = cityList.get(j).getDistrictList();
        			String[] distrinctNameArray = new String[districtList.size()];
        			DistrictModel[] distrinctArray = new DistrictModel[districtList.size()];
        			for (int k=0; k<districtList.size(); k++) {
        				DistrictModel districtModel = new DistrictModel(districtList.get(k).getName(), districtList.get(k).getZipcode());
        				mZipcodeDatasMap.put(districtList.get(k).getName(), districtList.get(k).getZipcode());
        				distrinctArray[k] = districtModel;
        				distrinctNameArray[k] = districtModel.getName();
        			}
        			mDistrictDatasMap.put(cityNames[j], distrinctNameArray);
        		}
        		mCitisDatasMap.put(provinceList.get(i).getName(), cityNames);
        	}
        } catch (Throwable e) {  
            e.printStackTrace();  
        } finally {
        	
        } 
	}

在使用wheel元件時，資料適配起來也很方便，只需要做些資料、顯示數量的配置即可，我這邊設定了一行顯示7條資料

initProvinceDatas();
		mViewProvince.setViewAdapter(new ArrayWheelAdapter<String>(MainActivity.this, mProvinceDatas));
		// 設定可見條目數量
		mViewProvince.setVisibleItems(7);
		mViewCity.setVisibleItems(7);
		mViewDistrict.setVisibleItems(7);
		updateCities();
		updateAreas();

要監聽wheel元件的滑動、點選、選中改變事件，可以通過實現它的三個事件監聽介面來實現，分別是：

1、OnWheelScrollListener 滑動事件：

/**
 * Wheel scrolled listener interface.
 */
public interface OnWheelScrollListener {
	/**
	 * Callback method to be invoked when scrolling started.
	 * @param wheel the wheel view whose state has changed.
	 */
	void onScrollingStarted(WheelView wheel);
	
	/**
	 * Callback method to be invoked when scrolling ended.
	 * @param wheel the wheel view whose state has changed.
	 */
	void onScrollingFinished(WheelView wheel);
}

2、OnWheelClickedListener 條目點選事件：

/**
 * Wheel clicked listener interface.
 * <p>The onItemClicked() method is called whenever a wheel item is clicked
 * <li> New Wheel position is set
 * <li> Wheel view is scrolled
 */
public interface OnWheelClickedListener {
    /**
     * Callback method to be invoked when current item clicked
     * @param wheel the wheel view
     * @param itemIndex the index of clicked item
     */
    void onItemClicked(WheelView wheel, int itemIndex);
}

3、OnWheelChangedListener 被選中項的positon變化事件：

/**
 * Wheel changed listener interface.
 * <p>The onChanged() method is called whenever current wheel positions is changed:
 * <li> New Wheel position is set
 * <li> Wheel view is scrolled
 */
public interface OnWheelChangedListener {
	/**
	 * Callback method to be invoked when current item changed
	 * @param wheel the wheel view whose state has changed
	 * @param oldValue the old value of current item
	 * @param newValue the new value of current item
	 */
	void onChanged(WheelView wheel, int oldValue, int newValue);
}

這裡只要知道哪個省、市、區被選中了，實現第三個介面就行，在方法回撥時去作同步和更新資料，比如省級條目滑動的時候，市級和縣級資料都要做對應的適配、市級滑動時需要去改變縣級(區)的資料，這樣才能實現級聯的效果，至於如何改變，需要三個HashMap來分別儲存他們的對應關係：

/**
	 * key - 省 value - 市
	 */
	protected Map<String, String[]> mCitisDatasMap = new HashMap<String, String[]>();
	/**
	 * key - 市 values - 區
	 */
	protected Map<String, String[]> mDistrictDatasMap = new HashMap<String, String[]>();
	
	/**
	 * key - 區 values - 郵編
	 */
	protected Map<String, String> mZipcodeDatasMap = new HashMap<String, String>();

在onChanged()回撥方法中，對於省、市、區/縣的滑動，分別做資料的適配，程式碼如下：

@Override
	public void onChanged(WheelView wheel, int oldValue, int newValue) {
		// TODO Auto-generated method stub
		if (wheel == mViewProvince) {
			updateCities();
		} else if (wheel == mViewCity) {
			updateAreas();
		} else if (wheel == mViewDistrict) {
			mCurrentDistrictName = mDistrictDatasMap.get(mCurrentCityName)[newValue];
			mCurrentZipCode = mZipcodeDatasMap.get(mCurrentDistrictName);
		}
	}
	/**
	 * 根據當前的市，更新區WheelView的資訊
	 */
	private void updateAreas() {
		int pCurrent = mViewCity.getCurrentItem();
		mCurrentCityName = mCitisDatasMap.get(mCurrentProviceName)[pCurrent];
		String[] areas = mDistrictDatasMap.get(mCurrentCityName);

		if (areas == null) {
			areas = new String[] { "" };
		}
		mViewDistrict.setViewAdapter(new ArrayWheelAdapter<String>(this, areas));
		mViewDistrict.setCurrentItem(0);
	}
	/**
	 * 根據當前的省，更新市WheelView的資訊
	 */
	private void updateCities() {
		int pCurrent = mViewProvince.getCurrentItem();
		mCurrentProviceName = mProvinceDatas[pCurrent];
		String[] cities = mCitisDatasMap.get(mCurrentProviceName);
		if (cities == null) {
			cities = new String[] { "" };
		}
		mViewCity.setViewAdapter(new ArrayWheelAdapter<String>(this, cities));
		mViewCity.setCurrentItem(0);
		updateAreas();
	}

綜上程式碼，最終實現的介面截圖：

Android省市區三級聯動滾輪選擇

Android省市區三級聯動滾輪選擇

Android省市區三級聯動滾輪選擇（真實專案中提取出來的元件）

android省市區三級聯動

Android——UI篇：android省市區三級聯動控制元件的使用

Android(省市區三級聯動Dialog)Demo

Android省市區三級聯動和地區定位

Android仿蘋果實現省市區三級聯動選擇

Android 地址選擇器，實現省市區三級聯動

vue結合android,mint中popup和picker實現省市區三級聯動

js實現移動端省市區三級聯動選擇器（附原始碼）

移動端省市區三級聯動選擇器

android地區三級聯動選擇

Android-PickerView 三級聯動選擇器的標題和內容的字型大小、顏色設定

【JS外掛】下拉框通用三級聯動選擇省市區三級聯動選擇

layui自定義外掛citySelect 省市區三級聯動選擇

一秒整合省市區三級聯動選擇器-CityPickerView

Android實現省市區三級聯動效果Spinner

Android開發之實現省市區三級聯動

Android ListView三級聯動，實現自定義地址選擇器

vue仿京東省市區三級聯動選擇元件

Android省市區三級聯動滾輪選擇

相關推薦