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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android自定义wheelview随机选号效果

    先看下利用wheelview实现滚动随机选择号码效果: 直接上代码 首页就是dialog显示不在描述 主要看dialog代码 package com.yskj.jh.wheeldemo; import android.app.Dialog; import android.content.Context; import android.os.Bundle; import android.view.View; import android.view.ViewGroup; import android

  • Android自定义WheelView地区选择三级联动

    本文实例为大家分享了WheelView地区选择三级联动的具体代码,供大家参考,具体内容如下 1. 效果 最近需要做一个地区选择的功能,但是在网上和github上找了很久都没找到满意的,然后朋友推荐了一个给我,我花了点时间把代码大致看懂并改成我想要的,并写上我的理解.效果如图: 2. 注意 a. 首先我们要明白,网上这写三级联动的demo,不管是把数据库文件放在raw还是assets中,我们都要进行复制,将这个文件复制到app目录下,即 /data/data/"+context.getPackag

  • Android自定义可循环的滚动选择器CycleWheelView

    最近碰到个项目要使用到滚动选择器,原生的NumberPicker可定制性太差,不大符合UI要求. 网上开源的WheelView是用ScrollView写的,不能循环滚动,而且当数据量很大时要加载的Item太多,性能非常低. 然后,还是自己写一个比较靠谱,用的是ListView实现的.写完自己体验了一下,性能不错,再大的数据也不怕了. 感觉不错,重新封装了一下,提供了一些接口可以直接按照自己的需求定制,调用方法在MainActivity中. 补个图片: 不多说了,直接上代码: CycleWheel

  • Android自定义实现循环滚轮控件WheelView

    首先呈上Android循环滚轮效果图: 现在很多地方都用到了滚轮布局WheelView,比如在选择生日的时候,风格类似系统提供的DatePickerDialog,开源的控件也有很多,不过大部分都是根据当前项目的需求绘制的界面,因此我就自己写了一款比较符合自己项目的WheelView. 首先这个控件有以下的需求:  1.能够循环滚动,当向上或者向下滑动到临界值的时候,则循环开始滚动  2.中间的一块有一块半透明的选择区,滑动结束时,哪一块在这个选择区,就选择这快.  3.继承自View进行绘制 然

  • WheelView实现上下滑动选择器

    本文实例为大家分享了WheelView实现上下滑动选择器的具体代码,供大家参考,具体内容如下 1.获得wheel wheel是GitHub上的一个开源控件,我们可以直接在GitHub上下载,地址https://github.com/maarek/android-wheel,下载完成之后我们可以把里边的wheel文件直接当作一个library来使用,也可以把wheel里边的Java类和xml文件拷贝到我们的项目中使用. 2.使用方法 首先我们来看看主布局文件: <RelativeLayout xm

  • 微信小程序滑动选择器的实现代码

    本文介绍了微信小程序滑动选择器的实现代码,分享给大家,具体如下: 实现微信小程序滑动选择效果 在wxml文件中,用一个picker标签代表选择器,bindchange是用户点击确定后触发的函数,index是picker自带的参数,用户点击确定后,bindchange绑定的函数用.detail.value就可以访问到.第一个选择的index值为0,依次递增.range要在page的data中先定义一个数组给它赋值,然后数组的值就会变为选择器中的选项 <picker bindchange="b

  • Android基于wheelView实现自定义日期选择器

    本文实例为大家分享了Android实现自定义日期选择器的具体代码,供大家参考,具体内容如下 项目要求效果图: 要求 "6月20 星期五" 这一项作为一个整体可以滑动,"7时"."48分"分别作为一个滑动整体. 系统自带的DatePicker.TimePicker大家都知道,只有这种效果: 百度了很多,试了NumberPicker等都不行,本来打算自己写.网友推荐了一个开源组件WheelView,下下来试了试,发现他已经定义的很完善了,在他的基础上

  • Android自定义wheelview实现滚动日期选择器

    本文实例为大家分享了Android实现滚动日期选择器的具体代码,供大家参考,具体内容如下 wheelview滚动效果的View 这段时间需要用到一个时间选择器,但是不能使用日期对话框, 因为它是筛选条件框架下的,只能是View!这个WheelView改造后可以达到要求! 这个wheelview框架使用的类不多,就几个,还有一些资源文件. 我根据这个框架设计了日期的选择器. 主页面: 第一种日期选择器页面: 动态效果: 使用: 具体的实现是一个LoopView的类,这是一个继承View的类! 理解

  • Android自定义半圆形圆盘滚动选择器

    前段时间公司项目要求做一个特效的滑动选择器,效果如下图的样子: 功能要求:两边的半圆形转盘可以转动,转盘上的图标也一起滚动,蓝红色图标指着的小图标变成高亮选中状态. 第一眼看到这个需求就想到这个必须要用自定义控件来做才行,于是产生了这样的思路: 半圆形的滚动的转盘自定义view继承viewgroup,重写滑动事件,自定义圆盘上图片的摆放角度,至于蓝色和红色箭头图标指向的选中状态可以用坐标数组绘制一个区域来判断是否有符合条件的图标滚动到了这个位置,如果有的话就将这个图标所在的控件透明度设置为1,如

  • 微信小程序 slider 详解及实例代码

    微信小程序slider 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 滑动选择器 属性名 类型 默认值 说明 min Number 0 最小值 max Number 100 最大值 step Number 1 步长,取值必须大

  • 微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】

    本文实例讲述了微信小程序使用slider设置数据值及switch开关组件功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <view>微信小程序组件:滑动选择器slider</view> <slider bindchange="sliderBindchange" min="{{min}}" max="{{max}}" show-value/> <view>

  • 微信小程序slider组件使用详解

    本文为大家分享了微信小程序slider组件的使用方法,供大家参考,具体内容如下 效果图 WXML <view class="tui-content"> <view class="tui-slider-head">设置step,当前设置步伐为5,当前值:{{slider1}}</view> <view class="tui-slider-box"> <slider bindchange=&quo

  • Android自定义控件实现按钮滚动选择效果

    本文实例为大家分享了Android实现按钮滚动选择效果的具体代码,供大家参考,具体内容如下 效果图 代码实现 package com.demo.ui.view; import android.annotation.TargetApi; import android.content.Context; import android.os.Build; import android.os.Handler; import android.support.v4.content.ContextCompat;

  • Qt编写提示进度条的实现示例

    目录 一.前言 二.实现的功能 三.效果图 四.头文件代码 五.核心代码 六.控件介绍 一.前言 我们在很多的安装包中,在安装过程中,经常可以在底部看到一个漂亮的进度条,上面悬浮着显示对应的进度,然后底部进度多种颜色渐变展示,Qt自带的进度条或者操作系统的进度条样式,不够炫,这次索性直接来个自定义绘制实现,至于是继承QWidget类还是QProgressBar类,都无所谓,如果是继承自QWidget类的话,就需要自己设置最大值最小值范围值,而继承自QProgressBar的话就可以直接用自带的函

随机推荐