android仿iphone的地区选择

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
简介: <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; font-family:Arial; font-size:14px; line-height:26px"> 最近项目要做一个,类似淘宝手机客户端的,选择收货地址的三级联动滚动选择组件,下面是它的大致界面截图:</p> <p

最近项目要做一个,类似淘宝手机客户端的,选择收货地址的三级联动滚动选择组件,下面是它的大致界面截图:



在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三种解析方式,这里就不讲了,可以看我的前面的几篇学习的文章:

Android解析XML方式(一)使用SAX解析

Android解析XML方式(二)使用PULL解析XML

Android解析XML方式(三)使用DOM解析XML


此次项目中使用的是SAX解析方式,因为它占用内存少,并且速度快,数据解析代码写在了 com.mrwujay.cascade.service/XmlParserHandler.java中,代码如下:


[java]  view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. package com.mrwujay.cascade.service;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5. import org.xml.sax.Attributes;  
  6. import org.xml.sax.SAXException;  
  7. import org.xml.sax.helpers.DefaultHandler;  
  8.   
  9. import com.mrwujay.cascade.model.CityModel;  
  10. import com.mrwujay.cascade.model.DistrictModel;  
  11. import com.mrwujay.cascade.model.ProvinceModel;  
  12.   
  13. public class XmlParserHandler extends DefaultHandler {  
  14.   
  15.     /** 
  16.      * 存储所有的解析对象 
  17.      */  
  18.     private List<ProvinceModel> provinceList = new ArrayList<ProvinceModel>();  
  19.             
  20.     public XmlParserHandler() {  
  21.           
  22.     }  
  23.   
  24.     public List<ProvinceModel> getDataList() {  
  25.         return provinceList;  
  26.     }  
  27.   
  28.     @Override  
  29.     public void startDocument() throws SAXException {  
  30.         // 当读到第一个开始标签的时候,会触发这个方法  
  31.     }  
  32.   
  33.     ProvinceModel provinceModel = new ProvinceModel();  
  34.     CityModel cityModel = new CityModel();  
  35.     DistrictModel districtModel = new DistrictModel();  
  36.       
  37.     @Override  
  38.     public void startElement(String uri, String localName, String qName,  
  39.             Attributes attributes) throws SAXException {  
  40.         // 当遇到开始标记的时候,调用这个方法  
  41.         if (qName.equals("province")) {  
  42.             provinceModel = new ProvinceModel();  
  43.             provinceModel.setName(attributes.getValue(0));  
  44.             provinceModel.setCityList(new ArrayList<CityModel>());  
  45.         } else if (qName.equals("city")) {  
  46.             cityModel = new CityModel();  
  47.             cityModel.setName(attributes.getValue(0));  
  48.             cityModel.setDistrictList(new ArrayList<DistrictModel>());  
  49.         } else if (qName.equals("district")) {  
  50.             districtModel = new DistrictModel();  
  51.             districtModel.setName(attributes.getValue(0));  
  52.             districtModel.setZipcode(attributes.getValue(1));  
  53.         }  
  54.     }  
  55.   
  56.     @Override  
  57.     public void endElement(String uri, String localName, String qName)  
  58.             throws SAXException {  
  59.         // 遇到结束标记的时候,会调用这个方法  
  60.         if (qName.equals("district")) {  
  61.             cityModel.getDistrictList().add(districtModel);  
  62.         } else if (qName.equals("city")) {  
  63.             provinceModel.getCityList().add(cityModel);  
  64.         } else if (qName.equals("province")) {  
  65.             provinceList.add(provinceModel);  
  66.         }  
  67.     }  
  68.       
  69.     @Override  
  70.     public void characters(char[] ch, int start, int length)  
  71.             throws SAXException {  
  72.     }  
  73.   
  74. }  


通过XmlParserHandler.java提供的getDataList()方法获取得到,之后再进行拆分放到省、市、区不同的HashMap里面方便做数据适配。

这里是它的具体实现代码:

[java]  view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. protected void initProvinceDatas()  
  2.     {  
  3.         List<ProvinceModel> provinceList = null;  
  4.         AssetManager asset = getAssets();  
  5.         try {  
  6.             InputStream input = asset.open("province_data.xml");  
  7.             // 创建一个解析xml的工厂对象  
  8.             SAXParserFactory spf = SAXParserFactory.newInstance();  
  9.             // 解析xml  
  10.             SAXParser parser = spf.newSAXParser();  
  11.             XmlParserHandler handler = new XmlParserHandler();  
  12.             parser.parse(input, handler);  
  13.             input.close();  
  14.             // 获取解析出来的数据  
  15.             provinceList = handler.getDataList();  
  16.             //*/ 初始化默认选中的省、市、区  
  17.             if (provinceList!= null && !provinceList.isEmpty()) {  
  18.                 mCurrentProviceName = provinceList.get(0).getName();  
  19.                 List<CityModel> cityList = provinceList.get(0).getCityList();  
  20.                 if (cityList!= null && !cityList.isEmpty()) {  
  21.                     mCurrentCityName = cityList.get(0).getName();  
  22.                     List<DistrictModel> districtList = cityList.get(0).getDistrictList();  
  23.                     mCurrentDistrictName = districtList.get(0).getName();  
  24.                     mCurrentZipCode = districtList.get(0).getZipcode();  
  25.                 }  
  26.             }  
  27.             //*/  
  28.             mProvinceDatas = new String[provinceList.size()];  
  29.             for (int i=0; i< provinceList.size(); i++) {  
  30.                 mProvinceDatas[i] = provinceList.get(i).getName();  
  31.                 List<CityModel> cityList = provinceList.get(i).getCityList();  
  32.                 String[] cityNames = new String[cityList.size()];  
  33.                 for (int j=0; j< cityList.size(); j++) {  
  34.                     cityNames[j] = cityList.get(j).getName();  
  35.                     List<DistrictModel> districtList = cityList.get(j).getDistrictList();  
  36.                     String[] distrinctNameArray = new String[districtList.size()];  
  37.                     DistrictModel[] distrinctArray = new DistrictModel[districtList.size()];  
  38.                     for (int k=0; k<districtList.size(); k++) {  
  39.                         DistrictModel districtModel = new DistrictModel(districtList.get(k).getName(), districtList.get(k).getZipcode());  
  40.                         mZipcodeDatasMap.put(districtList.get(k).getName(), districtList.get(k).getZipcode());  
  41.                         distrinctArray[k] = districtModel;  
  42.                         distrinctNameArray[k] = districtModel.getName();  
  43.                     }  
  44.                     mDistrictDatasMap.put(cityNames[j], distrinctNameArray);  
  45.                 }  
  46.                 mCitisDatasMap.put(provinceList.get(i).getName(), cityNames);  
  47.             }  
  48.         } catch (Throwable e) {    
  49.             e.printStackTrace();    
  50.         } finally {  
  51.               
  52.         }   
  53.     }  


在使用wheel组件时,数据适配起来也很方便,只需要做些数据、显示数量的配置即可,我这边设置了一行显示7条数据

[java]  view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. initProvinceDatas();  
  2.         mViewProvince.setViewAdapter(new ArrayWheelAdapter<String>(MainActivity.this, mProvinceDatas));  
  3.         // 设置可见条目数量  
  4.         mViewProvince.setVisibleItems(7);  
  5.         mViewCity.setVisibleItems(7);  
  6.         mViewDistrict.setVisibleItems(7);  
  7.         updateCities();  
  8.         updateAreas();  

要监听wheel组件的滑动、点击、选中改变事件,可以通过实现它的三个事件监听接口来实现,分别是:

1、OnWheelScrollListener 滑动事件:

[java]  view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. /** 
  2.  * Wheel scrolled listener interface. 
  3.  */  
  4. public interface OnWheelScrollListener {  
  5.     /** 
  6.      * Callback method to be invoked when scrolling started. 
  7.      * @param wheel the wheel view whose state has changed. 
  8.      */  
  9.     void onScrollingStarted(WheelView wheel);  
  10.       
  11.     /** 
  12.      * Callback method to be invoked when scrolling ended. 
  13.      * @param wheel the wheel view whose state has changed. 
  14.      */  
  15.     void onScrollingFinished(WheelView wheel);  
  16. }  

2、OnWheelClickedListener 条目点击事件:

[java]  view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. /** 
  2.  * Wheel clicked listener interface. 
  3.  * <p>The onItemClicked() method is called whenever a wheel item is clicked 
  4.  * <li> New Wheel position is set 
  5.  * <li> Wheel view is scrolled 
  6.  */  
  7. public interface OnWheelClickedListener {  
  8.     /** 
  9.      * Callback method to be invoked when current item clicked 
  10.      * @param wheel the wheel view 
  11.      * @param itemIndex the index of clicked item 
  12.      */  
  13.     void onItemClicked(WheelView wheel, int itemIndex);  
  14. }  

3、OnWheelChangedListener 被选中项的positon变化事件:

[java]  view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. /** 
  2.  * Wheel changed listener interface. 
  3.  * <p>The onChanged() method is called whenever current wheel positions is changed: 
  4.  * <li> New Wheel position is set 
  5.  * <li> Wheel view is scrolled 
  6.  */  
  7. public interface OnWheelChangedListener {  
  8.     /** 
  9.      * Callback method to be invoked when current item changed 
  10.      * @param wheel the wheel view whose state has changed 
  11.      * @param oldValue the old value of current item 
  12.      * @param newValue the new value of current item 
  13.      */  
  14.     void onChanged(WheelView wheel, int oldValue, int newValue);  
  15. }  

这里只要知道哪个省、市、区被选中了,实现第三个接口就行,在方法回调时去作同步和更新数据,比如省级条目滑动的时候,市级和县级数据都要做对应的适配、市级滑动时需要去改变县级(区)的数据,这样才能实现级联的效果,至于如何改变,需要三个HashMap来分别保存他们的对应关系:

[java]  view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. /** 
  2.      * key - 省 value - 市 
  3.      */  
  4.     protected Map<String, String[]> mCitisDatasMap = new HashMap<String, String[]>();  
  5.     /** 
  6.      * key - 市 values - 区 
  7.      */  
  8.     protected Map<String, String[]> mDistrictDatasMap = new HashMap<String, String[]>();  
  9.       
  10.     /** 
  11.      * key - 区 values - 邮编 
  12.      */  
  13.     protected Map<String, String> mZipcodeDatasMap = new HashMap<String, String>();   

在onChanged()回调方法中,对于省、市、区/县的滑动,分别做数据的适配,代码如下:

[java]  view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. @Override  
  2.     public void onChanged(WheelView wheel, int oldValue, int newValue) {  
  3.         // TODO Auto-generated method stub  
  4.         if (wheel == mViewProvince) {  
  5.             updateCities();  
  6.         } else if (wheel == mViewCity) {  
  7.             updateAreas();  
  8.         } else if (wheel == mViewDistrict) {  
  9.             mCurrentDistrictName = mDistrictDatasMap.get(mCurrentCityName)[newValue];  
  10.             mCurrentZipCode = mZipcodeDatasMap.get(mCurrentDistrictName);  
  11.         }  
  12.     }  
  13.   
  14.     /** 
  15.      * 根据当前的市,更新区WheelView的信息 
  16.      */  
  17.     private void updateAreas() {  
  18.         int pCurrent = mViewCity.getCurrentItem();  
  19.         mCurrentCityName = mCitisDatasMap.get(mCurrentProviceName)[pCurrent];  
  20.         String[] areas = mDistrictDatasMap.get(mCurrentCityName);  
  21.   
  22.         if (areas == null) {  
  23.             areas = new String[] { "" };  
  24.         }  
  25.         mViewDistrict.setViewAdapter(new ArrayWheelAdapter<String>(this, areas));  
  26.         mViewDistrict.setCurrentItem(0);  
  27.     }  
  28.   
  29.     /** 
  30.      * 根据当前的省,更新市WheelView的信息 
  31.      */  
  32.     private void updateCities() {  
  33.         int pCurrent = mViewProvince.getCurrentItem();  
  34.         mCurrentProviceName = mProvinceDatas[pCurrent];  
  35.         String[] cities = mCitisDatasMap.get(mCurrentProviceName);  
  36.         if (cities == null) {  
  37.             cities = new String[] { "" };  
  38.         }  
  39.         mViewCity.setViewAdapter(new ArrayWheelAdapter<String>(this, cities));  
  40.         mViewCity.setCurrentItem(0);  
  41.         updateAreas();  
  42.     }  


综上代码,最终实现的界面截图:



源码下载地址:http://download.csdn.net/detail/wulianghuan/8205211

目录
相关文章
|
3天前
|
JavaScript Linux 网络安全
Termux安卓终端美化与开发实战:从下载到插件优化,小白也能玩转Linux
Termux是一款安卓平台上的开源终端模拟器,支持apt包管理、SSH连接及Python/Node.js/C++开发环境搭建,被誉为“手机上的Linux系统”。其特点包括零ROOT权限、跨平台开发和强大扩展性。本文详细介绍其安装准备、基础与高级环境配置、必备插件推荐、常见问题解决方法以及延伸学习资源,帮助用户充分利用Termux进行开发与学习。适用于Android 7+设备,原创内容转载请注明来源。
50 18
|
1月前
|
安全 Android开发 iOS开发
escrcpy:【技术党必看】Android开发,Escrcpy 让你无线投屏新体验!图形界面掌控 Android,30-120fps 超流畅!🔥
escrcpy 是一款基于 Scrcpy 的开源项目,使用 Electron 构建,提供图形化界面来显示和控制 Android 设备。它支持 USB 和 Wi-Fi 连接,帧率可达 30-120fps,延迟低至 35-70ms,启动迅速且画质清晰。escrcpy 拥有丰富的功能,包括自动化任务、多设备管理、反向网络共享、批量操作等,无需注册账号或广告干扰。适用于游戏直播、办公协作和教育演示等多种场景,是一款轻量级、高性能的 Android 控制工具。
|
1月前
|
JavaScript 搜索推荐 Android开发
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
69 8
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
|
1月前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
57 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
1月前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
182 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
2月前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
117 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
2月前
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
44 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
3月前
|
开发框架 Android开发 iOS开发
安卓与iOS开发中的跨平台策略:一次编码,多平台部署
在移动应用开发的广阔天地中,安卓和iOS两大阵营各占一方。随着技术的发展,跨平台开发框架应运而生,它们承诺着“一次编码,到处运行”的便捷。本文将深入探讨跨平台开发的现状、挑战以及未来趋势,同时通过代码示例揭示跨平台工具的实际运用。
194 3
|
3月前
|
搜索推荐 前端开发 API
探索安卓开发中的自定义视图:打造个性化用户界面
在安卓应用开发的广阔天地中,自定义视图是一块神奇的画布,让开发者能够突破标准控件的限制,绘制出独一无二的用户界面。本文将带你走进自定义视图的世界,从基础概念到实战技巧,逐步揭示如何在安卓平台上创建和运用自定义视图来提升用户体验。无论你是初学者还是有一定经验的开发者,这篇文章都将为你打开新的视野,让你的应用在众多同质化产品中脱颖而出。
87 19
|
3月前
|
JSON Java API
探索安卓开发:打造你的首个天气应用
在这篇技术指南中,我们将一起潜入安卓开发的海洋,学习如何从零开始构建一个简单的天气应用。通过这个实践项目,你将掌握安卓开发的核心概念、界面设计、网络编程以及数据解析等技能。无论你是初学者还是有一定基础的开发者,这篇文章都将为你提供一个清晰的路线图和实用的代码示例,帮助你在安卓开发的道路上迈出坚实的一步。让我们一起开始这段旅程,打造属于你自己的第一个安卓应用吧!
111 14

热门文章

最新文章