[Android]体验好于NumberPicker的自定义控件NumberPickerView

前言

在平时开发中会用到NumberPicker组件，但是默认风格的NumberPicker具有一些不灵活的属性，且定制起来比较麻烦，且缺少一些过渡动效，因此在应用开发时，一般采用自定义的控件来完成选择功能。

效果图：

使用方法

compile 'cn.carbswang.android:NumberPickerView:1.0.2'

实现代码：

package com.***.******.activity;


import org.json.JSONException;
import org.json.JSONObject;

import java.util.HashMap;
import java.util.Map;

import cn.carbswang.android.numberpickerview.library.NumberPickerView;
import de.greenrobot.event.EventBus;


/**
 * 弹出时间框
 */
public class Tankuangactivity extends Activity {
    private NumberPickerView kpickers, kpickerf, jpickers, jpickerf;
    private TextView baochunann, sjbjann;
    private int ks = 0, kf = 0, js = 0, jf = 0;
    private int pd;
    private String id;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉标题栏
        setContentView(R.layout.shijiantankuang_layout);
        try {
            pd = getIntent().getExtras().getInt("pd");//1为新增;0为修改
            id = getIntent().getExtras().getString("id");
            ks = getIntent().getExtras().getInt("ks");
            kf = getIntent().getExtras().getInt("kf");
            js = getIntent().getExtras().getInt("js");
            jf = getIntent().getExtras().getInt("jf");
        } catch (Exception e) {
            e.printStackTrace();
        }
        final String strs[];
        final String[] arr;
        try {
            strs = new String[]{"00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"};

            arr = new String[60];
            for (int i = 0; i < arr.length; i++) {
                if (i < 10) {
                    arr[i] = "0" + i;
                } else {
                    arr[i] = i + "";
                }
            }


            kpickers = (NumberPickerView) findViewById(R.id.kpickers);
            kpickerf = (NumberPickerView) findViewById(R.id.kpickerf);
            jpickers = (NumberPickerView) findViewById(R.id.jpickers);
            jpickerf = (NumberPickerView) findViewById(R.id.jpickerf);
            baochunann = (TextView) findViewById(R.id.baochunann);
            sjbjann = (TextView) findViewById(R.id.sjbjann);

            //=====开始时
            kpickers.setDisplayedValues(strs);
            kpickers.setMaxValue(23);
            kpickers.setMinValue(0);
            kpickers.setValue(ks);//默认时间
            //=====开始分
            kpickerf.setDisplayedValues(arr);
            kpickerf.setMaxValue(59);
            kpickerf.setMinValue(0);
            kpickerf.setValue(kf);
            //=====结束时
            jpickers.setDisplayedValues(strs);
            jpickers.setMaxValue(23);
            jpickers.setMinValue(0);
            jpickers.setValue(js);
            //=====结束分
            jpickerf.setDisplayedValues(arr);
            jpickerf.setMaxValue(59);
            jpickerf.setMinValue(0);
            jpickerf.setValue(jf);


            baochunann.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    int ks = Integer.valueOf(strs[kpickers.getValue()]);
                    int js = Integer.valueOf(strs[jpickers.getValue()]);
                    int kf = Integer.valueOf(arr[kpickerf.getValue()]);
                    int jf = Integer.valueOf(arr[jpickerf.getValue()]);
                    String time = String.valueOf(strs[kpickers.getValue()])+ ":" + String.valueOf(arr[kpickerf.getValue()]) + "-" +  String.valueOf(strs[jpickers.getValue()]) + ":" + String.valueOf(arr[jpickerf.getValue()]);
                    if (ks > js) {
                        Toast.makeText(Tankuangactivity.this, "时间错误", Toast.LENGTH_SHORT).show();
                    } else if (ks == js) {
                        if (kf == jf) {
                            Toast.makeText(Tankuangactivity.this, "时间错误", Toast.LENGTH_SHORT).show();
                        } else {
                            if(pd==0){
                                //xgtime(time);
                            }else {
                                //addtime(time);
                            }
                        }
                    } else {
                        if(pd==0){
                           // xgtime(time);
                        }else {
                           // addtime(time);
                        }
                    }
                }
            });

            sjbjann.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    finish();
                }
            });
        } catch (Exception e) {
            e.printStackTrace();
        }
    }


}

布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@mipmap/store_bgimg">

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="322dp"
        android:background="#ffffff"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true">
        <RelativeLayout
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="49dp"
            android:background="#ffffff" >
                <TextView
                    android:id="@+id/sjbjann"
                    android:layout_width="50dp"
                    android:layout_height="match_parent"
                    android:gravity="center_vertical"
                    android:layout_alignParentLeft="true"
                    android:text="取消"
                    android:padding="8dp"
                    android:textColor="#fe405d"
                    android:textSize="16dp"
                    />
            <TextView
                android:id="@+id/chatName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="设置营业时间"
                android:textColor="#262626"
                android:textSize="18dp" />
            <TextView
                android:id="@+id/baochunann"
                android:layout_width="50dp"
                android:layout_height="match_parent"
                android:gravity="center_vertical"
                android:layout_alignParentRight="true"
                android:text="保存"
                android:textColor="#fe405d"
                android:textSize="16dp"
                />
        </RelativeLayout>
        <View
            android:id="@+id/diyiview"
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:layout_below="@+id/title"
            android:background="#d9d9d9" />


        <LinearLayout
            android:id="@+id/title1"
            android:layout_below="@+id/diyiview"
            android:layout_width="match_parent"
            android:layout_height="49dp"
            android:background="#ffffff" >
            <TextView
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="开始时间"
                android:textColor="#262626"
                android:textSize="14dp"
                />

            <TextView
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="结束时间"
                android:textColor="#262626"
                android:textSize="14dp"
                />
        </LinearLayout>
        <View
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:layout_below="@+id/title1"
            android:background="#d9d9d9"
            android:id="@+id/view14" />

        <!--时间框-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="224dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true">

        <cn.carbswang.android.numberpickerview.library.NumberPickerView
            android:id="@+id/kpickers"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:background="#ffffff"
            android:contentDescription="test_number_picker_view"
            app:npv_ItemPaddingHorizental="15dp"
            app:npv_ItemPaddingVertical="5dp"
            app:npv_ShowCount="5"
            app:npv_TextSizeNormal="18dp"
            app:npv_TextSizeSelected="24dp"
            app:npv_TextColorSelected="#fd405b"
            app:npv_TextColorNormal="#9d9d9d"
            app:npv_DividerColor="#d9d9d9"
            app:npv_WrapSelectorWheel="true"
           />
            <cn.carbswang.android.numberpickerview.library.NumberPickerView
                android:id="@+id/kpickerf"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="match_parent"
                android:background="#ffffff"
                android:contentDescription="test_number_picker_view"
                app:npv_ItemPaddingHorizental="15dp"
                app:npv_ItemPaddingVertical="5dp"
                app:npv_ShowCount="5"
                app:npv_TextSizeNormal="18dp"
                app:npv_TextSizeSelected="24dp"
                app:npv_TextColorSelected="#fd405b"
                app:npv_TextColorNormal="#9d9d9d"
                app:npv_DividerColor="#d9d9d9"
                app:npv_WrapSelectorWheel="true"
                />

<!--结束时间-->
            <cn.carbswang.android.numberpickerview.library.NumberPickerView
                android:id="@+id/jpickers"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="match_parent"
                android:background="#ffffff"
                android:contentDescription="test_number_picker_view"
                app:npv_ItemPaddingHorizental="15dp"
                app:npv_ItemPaddingVertical="5dp"
                app:npv_ShowCount="5"
                app:npv_TextSizeNormal="18dp"
                app:npv_TextSizeSelected="24dp"
                app:npv_TextColorSelected="#fd405b"
                app:npv_TextColorNormal="#9d9d9d"
                app:npv_DividerColor="#d9d9d9"
                app:npv_WrapSelectorWheel="true"
                />
            <cn.carbswang.android.numberpickerview.library.NumberPickerView
                android:id="@+id/jpickerf"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="match_parent"
                android:background="#ffffff"
                android:contentDescription="test_number_picker_view"
                app:npv_ItemPaddingHorizental="15dp"
                app:npv_ItemPaddingVertical="5dp"
                app:npv_ShowCount="5"
                app:npv_TextSizeNormal="18dp"
                app:npv_TextSizeSelected="24dp"
                app:npv_TextColorSelected="#fd405b"
                app:npv_TextColorNormal="#9d9d9d"
                app:npv_DividerColor="#d9d9d9"
                app:npv_WrapSelectorWheel="true"
                />

        </LinearLayout>


    </RelativeLayout>

</RelativeLayout>

各项自定义属性的说明

 	<attr name="npv_ShowCount" format="reference|integer" />//显示的条目个数，默认3个
        <attr name="npv_ShowDivider" format="reference|boolean" />//是否显示两条divider，默认显示
        <attr name="npv_DividerColor" format="reference|color" />//两条divider的颜色
        <attr name="npv_DividerMarginLeft" format="reference|dimension" />//divider距左侧的距离
        <attr name="npv_DividerMarginRight" format="reference|dimension" />//divider距右侧的距离
        <attr name="npv_DividerHeight" format="reference|dimension" />//divider的高度
        <attr name="npv_TextColorNormal" format="reference|color" />//未选中文字的颜色
        <attr name="npv_TextColorSelected" format="reference|color" />//选中文字的颜色
        <attr name="npv_TextColorHint" format="reference|color" />//中间偏右侧说明文字的颜色
        <attr name="npv_TextSizeNormal" format="reference|dimension" />//未选中文字的大小
        <attr name="npv_TextSizeSelected" format="reference|dimension" />//选中文字的大小
        <attr name="npv_TextSizeHint" format="reference|dimension" />//说明文字的大小
        <attr name="npv_TextArray" format="reference" />//文字内容，stringarray类型
        <attr name="npv_MinValue" format="reference|integer" />//最小值，同setMinValue()
        <attr name="npv_MaxValue" format="reference|integer" />//最大值，同setMaxValue()
        <attr name="npv_WrapSelectorWheel" format="reference|boolean" />//设置是否wrap，同setWrapSelectorWheel
        <attr name="npv_HintText" format="reference|string" />//设置说明文字
        <attr name="npv_EmptyItemHint" format="reference|string" />//空行的显示文字，默认不显示任何文字。只在WrapSelectorWheel==false是起作用
        <attr name="npv_MarginStartOfHint" format="reference|dimension" />//说明文字距离左侧的距离，"左侧"是指文字array最宽item的右侧
        <attr name="npv_MarginEndOfHint" format="reference|dimension" />//说明文字距离右侧的距离
        <attr name="npv_ItemPaddingHorizental" format="reference|dimension" />//item的水平padding，用于wrap_content模式
        <attr name="npv_ItemPaddingVertical" format="reference|dimension" />//item的竖直padding，用于wrap_content模式