How to Use the wheel control in android Development

How to Use the wheel control in android Development

I can't afford to get sick when I leave the house. I just need two boxes of medicine for more than 60 yuan. Okay, no nonsense. Let's take a look at the use of the wheel control today. This is an open-source control on GitHub, which is very convenient to use. We can use it to do many things, for example, to build a custom datepicker, in some e-commerce apps, it is often used for provincial, municipal, and county-level linkages. In short, there are still a lot of uses. Let's take a look at how to use this stuff today.

Let's take a look at one of the following:

This is what we want to do today. Let's get started.

1. Obtain the wheel

Wheel is an open-source control on GitHub. We can download it directly from GitHub.

2. Usage

First, let's look at the main layout file:

 

All right, we use three wheelviews in the main layout file to represent provinces, cities, and counties. In MainActivity, we first need to get these three controls:

 

 

provinceView = (WheelView) this.findViewById(R.id.province_view);cityView = (WheelView) this.findViewById(R.id.city_view);areaView = (WheelView) this.findViewById(R.id.area_view);

After obtaining the information, we need to use the ArrayWheelAdapter data adapter for data adaptation. Here we need two parameters: context and array. This array is what we want to display, that is to say, we need to save provinces, cities, and counties as arrays, but considering that a province corresponds to multiple cities, a city corresponds to multiple districts and counties, In order to associate provinces, cities, and counties, we also need to use a Map set. Therefore, the data structure we designed is as follows:

 

 

/*** Province */private String [] provinceArray;/*** province-city */private Map
 
  
CitiesMap;/*** city-district/county */private Map
  
   
AreasMap;
  
 

The first array stores the data of all provinces, the second Map stores the data of the cities corresponding to all provinces, and the third Map stores the data of the districts and counties corresponding to all cities, now we want to assign values to these three datasets. Let's take a look at our json data format:

 

 

[{Name: Beijing, city: [{name: Beijing, area: [Dongcheng District, Xicheng district, Chongwen district, Xuanwu District...]} ......]

Our json data is in this format. json data is stored in the assets folder. Let's see how to parse json data and assign it to the preceding three datasets:

 

 

private void initJson() {citiesMap = new HashMap
 
  ();areasMap = new HashMap
  
   ();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();}}}}
  
 

There are no technical difficulties in json parsing. The logic here is a little complicated. It is not difficult to use three nested for loops. Well, when there is data in the dataset, we can set the Adapter for the three wheel:

 

 

Private void initView () {provinceView. setViewAdapter (new ArrayWheelAdapter
 
  
(MainActivity. this, provinceArray); // The cityView. setViewAdapter (new ArrayWheelAdapter)
  
   
(MainActivity. this, citiesMap. get (Beijing); // by default, areaView. setViewAdapter (new ArrayWheelAdapter
   
    
(MainActivity. this, areasMap. get (Beijing); // The first provinceView item is displayed by default. setCurrentItem (0); // The first cityView item is displayed by default. setCurrentItem (0); // The first item areaView is displayed by default. setCurrentItem (0); // seven items of provinceView are displayed on the page. setVisibleItems (7); cityView. setVisibleItems (7); areaView. setVisibleItems (7); // Add the slide event provinceView. addChangingListener (this); cityView. addChangingListener (this );}
   
  
 

After setting the Adapter, we also set some default values, which are very simple. You just need to comment them out. Here we have set two listener events. Let's take a look:

 

 

@ Overridepublic void onChanged (WheelView wheel, int oldValue, int newValue) {if (wheel = provinceView) {// when updating a province, you must update the city and the district/county updateCity (); updateArea ();} else if (wheel = cityView) {// updateArea () ;}} private void updateArea () {// obtain the subscript int cityIndex = cityView of the currently displayed City. getCurrentItem (); // obtain the subscript int provinceIndex = provinceView of the currently displayed province. getCurrentItem (); // obtain the name of the currently displayed province String proviceName = provinceArray [provinceIndex]; // obtain the name of the currently displayed city String currentName = citiesMap. get (proviceName) [cityIndex]; // obtain all districts and counties in the city according to the name of the currently displayed city. String [] areas = areasMap. get (currentName); // set the new data to areaViewareaView. setViewAdapter (new ArrayWheelAdapter
 
  
(MainActivity. this, areas); // The first areaView is displayed by default. setCurrentItem (0);} private void updateCity () {// obtain the subscript int currentIndex = provinceView of the currently displayed province. getCurrentItem (); // obtain the name of the currently displayed province String currentName = provinceArray [currentIndex]; // obtain all cities in the province according to the name of the currently displayed province. String [] cities = citiesMap. get (currentName); // set the new data to cityViewcityView. setViewAdapter (new ArrayWheelAdapter
  
   
(MainActivity. this, cities); // The first cityView. setCurrentItem (0) is displayed by default );}
  
 

Almost every line of code has comments, so I won't be so embarrassed. Finally, let's take a look at the click event:

 

 

Public void onClick (View v) {// obtain the subscript int provinceIndex = provinceView of the currently displayed province. getCurrentItem (); // obtain the name of the currently displayed province String provinceName = provinceArray [provinceIndex]; // obtain the subscript int cityIndex = cityView of the currently displayed city. getCurrentItem (); // obtain the name of the currently displayed city String cityName = citiesMap. get (provinceName) [cityIndex]; // obtain the subscript int areaIndex = areaView of the currently displayed district/county. getCurrentItem (); Toast. makeText (this, the region you selected is + provinceArray [provinceIndex] + cityName + areasMap. get (cityName) [areaIndex], Toast. LENGTH_SHORT ). show ();}

Okay, Here we want to implement the function, but we can see that the default style of the system is slightly ugly. Then we can get the style we want by modifying the source code, first look at the black side above and below:

 

 

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

In the WheelView. in the java file, this line of code defines the changes in the color of the Black edge, the three parameters are the starting color, the transition color and the color at the end, respectively, then we can modify the source code here to remove the Black edge from the upper and lower layers, and the transparent East-East black in the middle. We want to modify it and find the file "wheel_val.xml" through the source code:

 

 

The style of the transparent bar in the middle is defined here. We can modify it as needed. Well, the source code here is not much, and it is not difficult. You can think about it yourself. We will say so much about the introduction of wheel.