Android-PickerView【仿iOS的PickerView控件，并封装了时间选择和选项选择这两种选择器】使用

版权声明：本文为HaiyuKing原创文章，转载请注明出处！

前言

本文主要演示Android-PickerView的选项选择器、时间选择器的简单运用。由于每一个版本略有不用，所以实际使用方式以github项目wiki文档为准。

效果图

     

代码分析

本文使用的版本是compile 'com.contrarywind:Android-PickerView:4.1.4'；

时间选择器搭配DateTimeHelper使用；

需要执行setDecorView方法，否则底部虚拟导航栏会显示在弹出的选择器区域；

使用步骤

一、项目组织结构图

注意事项：

1、  导入类文件后需要change包名以及重新import R文件路径

2、  Values目录下的文件（strings.xml、dimens.xml、colors.xml等），如果项目中存在，则复制里面的内容，不要整个覆盖

二、导入步骤

在APP中的bundle.gradle文件中添加以下代码，引入Android-PickerView控件

apply plugin: 'com.android.application'

android {
    compileSdkVersion 27
    defaultConfig {
        applicationId "com.why.project.pickerviewdemo"
        minSdkVersion 16
        targetSdkVersion 27
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support.constraint:constraint-layout:1.1.1'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

    //PickerView
    compile 'com.contrarywind:Android-PickerView:4.1.4'
}

三、使用方法

在colors.xml文件中添加以下代码

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>

    <!-- **************************pickerview选择器常用颜色值********************************** -->
    <color name="pickerview_divider_color">#9D9D9D</color>
    <color name="pickerview_cancel_text_color">#979696</color>
    <color name="pickerview_submit_text_color">#FAA359</color>
    <color name="pickerview_title_text_color">#1A78EC</color>
    <color name="pickerview_center_text_color">#333333</color>
</resources>

布局文件

需要以RelativeLayout为根布局（LinearLayout不合适，其他的比如FrameLayout可能可以，需要尝试），主要用于setDecorView方法。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_rootview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">

    <LinearLayout
        android:id="@+id/optionsPickerLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_margin="10dp">

        <!-- 选择爱好 -->
        <TextView
            android:id="@+id/hobbyTv"
            android:layout_width="0.0dp"
            android:layout_weight="1"
            android:layout_height="38dp"
            android:gravity="center_vertical"
            android:text="选择爱好"
            android:textSize="16sp"
            android:textColor="#3090d9"
            android:drawableRight="@drawable/pickerview_jiantou"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:background="#E7E7E7"
            android:layout_marginRight="10dp"
            />

        <!-- 选择地址 -->
        <TextView
            android:id="@+id/addressTv"
            android:layout_width="0.0dp"
            android:layout_weight="1"
            android:layout_height="38dp"
            android:gravity="center_vertical"
            android:text="选择地址"
            android:textSize="16sp"
            android:textColor="#3090d9"
            android:drawableRight="@drawable/pickerview_jiantou"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:background="#E7E7E7"
            />

    </LinearLayout>

    <!-- 开始时间 -->
    <TextView
        android:id="@+id/startdateTv"
        android:layout_alignLeft="@+id/optionsPickerLayout"
        android:layout_below="@+id/optionsPickerLayout"
        android:layout_width="wrap_content"
        android:layout_height="38dp"
        android:gravity="center_vertical"
        android:text="开始日期"
        android:textSize="16sp"
        android:textColor="#3090d9"
        android:drawableLeft="@drawable/date_icon"
        android:drawablePadding="5dp"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:layout_marginTop="10dp"
        android:background="#E7E7E7"
        />


</RelativeLayout>

MainActivity

黄色标记的是选项选择器常规写法；

橙色标记的是选项选择器常规之外的实现文本滑动的效果；

package com.why.project.pickerviewdemo;

import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.method.ScrollingMovementMethod;
import android.view.MotionEvent;
import android.view.View;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

import com.bigkoo.pickerview.builder.OptionsPickerBuilder;
import com.bigkoo.pickerview.builder.TimePickerBuilder;
import com.bigkoo.pickerview.listener.OnOptionsSelectListener;
import com.bigkoo.pickerview.listener.OnTimeSelectListener;
import com.bigkoo.pickerview.view.OptionsPickerView;
import com.bigkoo.pickerview.view.TimePickerView;
import com.why.project.pickerviewdemo.bean.SpinnearBean;
import com.why.project.pickerviewdemo.util.DateTimeHelper;

import org.json.JSONArray;
import org.json.JSONObject;

import java.io.ByteArrayOutputStream;
import java.io.InputStream;
import java.text.ParseException;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.Date;

public class MainActivity extends AppCompatActivity {

    private TextView hobbyTv;//选择爱好
    /**爱好列表集合*/
    private ArrayList<SpinnearBean> mHobbyList;
    private ArrayList<String> mHobbyNameList;//用于选择器显示
    private OptionsPickerView mHobbyPickerView;//选择器

    private TextView addressTv;//选择地址
    /**地址列表集合*/
    private ArrayList<SpinnearBean> mAddressList;
    private ArrayList<String> mAddressNameList;//用于选择器显示
    private OptionsPickerView mAddressPickerView;//选择器

    private TextView startdateTv;//开始日期
    private TimePickerView mStartDatePickerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initViews();
        initDatas();
        initEvents();
    }

    private void initViews() {
        hobbyTv = findViewById(R.id.hobbyTv);
        addressTv = (TextView) findViewById(R.id.addressTv);
        //实现文本区域可滑动的效果，用于当显示的文本过长时
        addressTv.setMovementMethod(ScrollingMovementMethod.getInstance());//实现可滑动，但是和ScrollView滑动冲突，需要处理下
        //https://blog.csdn.net/qq_36070190/article/details/70053228
        addressTv.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                // TODO Auto-generated method stub
                if(event.getAction()==MotionEvent.ACTION_DOWN){
                    //通知父控件不要干扰
                    v.getParent().requestDisallowInterceptTouchEvent(true);
                }
                if(event.getAction()==MotionEvent.ACTION_MOVE){
                    //通知父控件不要干扰
                    v.getParent().requestDisallowInterceptTouchEvent(true);
                }
                if(event.getAction()==MotionEvent.ACTION_UP){
                    v.getParent().requestDisallowInterceptTouchEvent(false);
                }
                return false;
            }
        });
        startdateTv = findViewById(R.id.startdateTv);
    }

    private void initDatas() {
        //========================================初始化爱好列表集合========================================
        mHobbyList = new ArrayList<SpinnearBean>();
        mHobbyNameList = new ArrayList<String>();

        //模拟获取数据集合
        try{
            mHobbyList = parseJsonArray("spinners.txt");
        }catch (Exception e) {
            e.printStackTrace();
        }
        for(SpinnearBean spinnearBean : mHobbyList){
            mHobbyNameList.add(spinnearBean.getParaName());
        }

        //============初始化选择器============
        initHobbyOptionPicker();
        //如果想要直接赋值的话，这样写
        /*if(mHobbyNameList.size() > 0){
            hobbyTv.setText(mHobbyNameList.get(0));//默认展现第一个
        }*/

        //========================================初始化地址列表集合========================================
        mAddressList = new ArrayList<SpinnearBean>();
        mAddressNameList = new ArrayList<String>();
        //模拟获取数据集合
        try{
            mAddressList = parseJsonArray("spinners2.txt");
        }catch (Exception e) {
            e.printStackTrace();
        }
        for(SpinnearBean spinnearBean : mAddressList){
            mAddressNameList.add(spinnearBean.getParaName());
        }
        //============初始化选择器============
        initAddressOptionPicker();
        //当选择器列表项文本过长时，直接赋值的话，会有问题：高度变小了。不太明白什么原因，所以需要延迟设置文本，实际过程中因为有网络请求，所以一般没有问题
        /*new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                if(mAddressNameList.size() > 0){
                    addressTv.setText(mAddressNameList.get(0));//默认展现第一个
                }
            }
        }, 500);*/

        //========================================初始化开始日期选择器控件========================================
        initStartTimePicker();//初始化开始日期选择器控件
    }

    //初始化爱好选择器
    private void initHobbyOptionPicker() {
        mHobbyPickerView = new OptionsPickerBuilder(MainActivity.this, new OnOptionsSelectListener() {
                @Override
                public void onOptionsSelect(int options1, int option2, int options3, View v) {
                        //返回的分别是三个级别的选中位置
                        String tx = mHobbyNameList.get(options1);
                        hobbyTv.setText(tx);
                    }
                })
                .setDecorView((RelativeLayout)findViewById(R.id.activity_rootview))//必须是RelativeLayout，不设置setDecorView的话，底部虚拟导航栏会显示在弹出的选择器区域
                .setTitleText("选择爱好")//标题文字
                .setTitleSize(20)//标题文字大小
                .setTitleColor(getResources().getColor(R.color.pickerview_title_text_color))//标题文字颜色
                .setCancelText("取消")//取消按钮文字
                .setCancelColor(getResources().getColor(R.color.pickerview_cancel_text_color))//取消按钮文字颜色
                .setSubmitText("确定")//确认按钮文字
                .setSubmitColor(getResources().getColor(R.color.pickerview_submit_text_color))//确定按钮文字颜色
                .setContentTextSize(20)//滚轮文字大小
                .setTextColorCenter(getResources().getColor(R.color.pickerview_center_text_color))//设置选中文本的颜色值
                .setLineSpacingMultiplier(1.8f)//行间距
                .setDividerColor(getResources().getColor(R.color.pickerview_divider_color))//设置分割线的颜色
                .setSelectOptions(0)//设置选择的值
                .build();

        mHobbyPickerView.setPicker(mHobbyNameList);//添加数据
    }

    //初始化地址选择器
    private void initAddressOptionPicker() {
        mAddressPickerView = new OptionsPickerBuilder(MainActivity.this, new OnOptionsSelectListener() {
            @Override
            public void onOptionsSelect(int options1, int option2, int options3, View v) {
                //返回的分别是三个级别的选中位置
                String tx = mAddressNameList.get(options1);
                addressTv.setText(tx);
            }
        })
                .setDecorView((RelativeLayout)findViewById(R.id.activity_rootview))//必须是RelativeLayout，不设置setDecorView的话，底部虚拟导航栏会显示在弹出的选择器区域
                .setTitleText("选择地址")//标题文字
                .setTitleSize(20)//标题文字大小
                .setTitleColor(getResources().getColor(R.color.pickerview_title_text_color))//标题文字颜色
                .setCancelText("取消")//取消按钮文字
                .setCancelColor(getResources().getColor(R.color.pickerview_cancel_text_color))//取消按钮文字颜色
                .setSubmitText("确定")//确认按钮文字
                .setSubmitColor(getResources().getColor(R.color.pickerview_submit_text_color))//确定按钮文字颜色
                .setContentTextSize(20)//滚轮文字大小
                .setTextColorCenter(getResources().getColor(R.color.pickerview_center_text_color))//设置选中文本的颜色值
                .setLineSpacingMultiplier(1.8f)//行间距
                .setDividerColor(getResources().getColor(R.color.pickerview_divider_color))//设置分割线的颜色
                .setSelectOptions(0)//设置选择的值
                .build();

        mAddressPickerView.setPicker(mAddressNameList);//添加数据
    }

    /**初始化开始日期选择器控件*/
    private void initStartTimePicker() {
        //控制时间范围(如果不设置范围，则使用默认时间1900-2100年，此段代码可注释)
        //因为系统Calendar的月份是从0-11的,所以如果是调用Calendar的set方法来设置时间,月份的范围也要是从0-11
        Calendar selectedDate = Calendar.getInstance();
        //设置最小日期和最大日期
        Calendar startDate = Calendar.getInstance();
        try {
            startDate.setTime(DateTimeHelper.parseStringToDate("1970-01-01"));//设置为2006年4月28日
        } catch (ParseException e) {
            e.printStackTrace();
        }
        Calendar endDate = Calendar.getInstance();//最大日期是今天

        //时间选择器
        mStartDatePickerView = new TimePickerBuilder(MainActivity.this, new OnTimeSelectListener() {
                    @Override
                    public void onTimeSelect(Date date, View v) {//选中事件回调
                        // 这里回调过来的v,就是show()方法里面所添加的 View 参数，如果show的时候没有添加参数，v则为null
                        startdateTv.setText(DateTimeHelper.formatToString(date,"yyyy-MM-dd"));
                    }
                })
                .setDecorView((RelativeLayout)findViewById(R.id.activity_rootview))//必须是RelativeLayout，不设置setDecorView的话，底部虚拟导航栏会显示在弹出的选择器区域
                //年月日时分秒 的显示与否，不设置则默认全部显示
                .setType(new boolean[]{true, true, true, false, false, false})
                .setLabel("", "", "", "", "", "")
                .isCenterLabel(false)//是否只显示中间选中项的label文字，false则每项item全部都带有label。
                .setTitleText("开始日期")//标题文字
                .setTitleSize(20)//标题文字大小
                .setTitleColor(getResources().getColor(R.color.pickerview_title_text_color))//标题文字颜色
                .setCancelText("取消")//取消按钮文字
                .setCancelColor(getResources().getColor(R.color.pickerview_cancel_text_color))//取消按钮文字颜色
                .setSubmitText("确定")//确认按钮文字
                .setSubmitColor(getResources().getColor(R.color.pickerview_submit_text_color))//确定按钮文字颜色
                .setContentTextSize(20)//滚轮文字大小
                .setTextColorCenter(getResources().getColor(R.color.pickerview_center_text_color))//设置选中文本的颜色值
                .setLineSpacingMultiplier(1.8f)//行间距
                .setDividerColor(getResources().getColor(R.color.pickerview_divider_color))//设置分割线的颜色
                .setRangDate(startDate, endDate)//设置最小和最大日期
                .setDate(selectedDate)//设置选中的日期
                .build();
    }

    private void initEvents() {
        //选择爱好的下拉菜单点击事件
        hobbyTv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mHobbyPickerView.show();
            }
        });

        //选择地址的下拉菜单点击事件
        addressTv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mAddressPickerView.show();
            }
        });

        //开始日期的下拉菜单点击事件
        startdateTv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mStartDatePickerView.show();
            }
        });
    }





    /*===========读取assets目录下的js字符串文件（js数组和js对象），然后生成List集合===========*/
    public static final String LISTROOTNODE = "spinnerList";
    public static final String KEY_LISTITEM_NAME = "paraName";
    public static final String KEY_LISTITEM_VALUE = "paraValue";
    public static final String KEY_LISTITEM_CHECKCOLOR = "checkColor";

    /**
     * 解析JSON文件的简单数组
     */
    private ArrayList<SpinnearBean> parseJsonArray(String fileName) throws Exception{

        ArrayList<SpinnearBean> itemsList = new ArrayList<SpinnearBean>();

        String jsonStr = getStringFromAssert(MainActivity.this, fileName);
        if(jsonStr.equals("")){
            return null;
        }
        JSONObject allData = new JSONObject(jsonStr);  //全部内容变为一个项
        JSONArray jsonArr = allData.getJSONArray(LISTROOTNODE); //取出数组
        for(int x = 0;x<jsonArr.length();x++){
            SpinnearBean model = new SpinnearBean();
            JSONObject jsonobj = jsonArr.getJSONObject(x);
            model.setParaName(jsonobj.getString(KEY_LISTITEM_NAME));
            model.setParaValue(jsonobj.getString(KEY_LISTITEM_VALUE));
            if(jsonobj.has(KEY_LISTITEM_CHECKCOLOR)){
                model.setCheckColor(jsonobj.getString(KEY_LISTITEM_CHECKCOLOR));
            }
            model.setSelectedState(false);
            itemsList.add(model);
            model = null;
        }
        return itemsList;
    }

    /**
     * 访问assets目录下的资源文件，获取文件中的字符串
     * @param filePath - 文件的相对路径，例如："listdata.txt"或者"/www/listdata.txt"
     * @return 内容字符串
     * */
    public String getStringFromAssert(Context mContext, String filePath) {

        String content = ""; // 结果字符串
        try {
            InputStream is = mContext.getResources().getAssets().open(filePath);// 打开文件
            int ch = 0;
            ByteArrayOutputStream out = new ByteArrayOutputStream(); // 实现了一个输出流
            while ((ch = is.read()) != -1) {
                out.write(ch); // 将指定的字节写入此 byte 数组输出流
            }
            byte[] buff = out.toByteArray();// 以 byte 数组的形式返回此输出流的当前内容
            out.close(); // 关闭流
            is.close(); // 关闭流
            content = new String(buff, "UTF-8"); // 设置字符串编码
        } catch (Exception e) {
            Toast.makeText(mContext, "对不起，没有找到指定文件！", Toast.LENGTH_SHORT)
                    .show();
        }
        return content;
    }
}

混淆配置

无

参考资料

Android-PickerView

Android项目总结（二）仿IOS效果的日期选择器和省市县三级联动

完美解决ScrollView与内部嵌套的TextView滚动冲突

项目demo下载地址

https://github.com/haiyuKing/PickerViewDemo