WheelView实现上下滑动选择器 WheelView实现上下滑动选择器

时间:2021-03-28 Angel_jn 人气:0

想了解WheelView实现上下滑动选择器的相关内容吗，Angel_jn在本文为您仔细讲解WheelView实现上下滑动选择器的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：WheelView上下滑动选择器,WheelView滑动选择器,WheelView上下滑动，下面大家一起来学习吧。

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(); 
      } 
    } 
  } 
}

json解析技术上没有难点，这里的逻辑稍微有点复杂，用到了三个嵌套的for循环，大家慢慢琢磨一下其实也不难。好了，当数据集中都有数据之后，我们就可以给三个wheel设置Adapter了：

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); 
}

设置完Adapter之后我们还设置了一些缺省值，都很简单，大家直接看注释即可，我们这里设置了两个监听事件，我们看看：

@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 };

在WheelView.java文件中，这一行代码定义了上下黑边的颜色的变化，三个参数分别是起始颜色，过渡颜色以及结束时的颜色，那么我们可以通过修改这里的源码来去掉上下的黑边，还有中间那个透明的东东黑不拉叽的，我们想改，通过源码找到了这个文件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>

这里定义了中间那个透明条的样式，我们可以根据自己的需要进行修改。好了，这里的源码不多，也不难，大家可以自己去琢磨琢磨，关于wheel的介绍我们就说这么多。

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

加载全部内容