android 动态时间控件,Android滚轮选择时间控件使用详解

滚轮选择控件

Android自带的选择时间控件有点丑，往往产品和设计都比较嫌弃，希望做成ios一样的滚轮选择，下面是我在NumberPicker的基础上自定义的选择控件，效果如下：

原理

基于NumberPicker实现

动态填充数值

联动

接口监听回调

实现滚轮效果有github上mark比较多的WheelView，但是阅读源码发现数据是一次性填入的，选择时间的话，填入10年就是10*365=3650条数据，也就是new出三千多个TextView，想想都觉得恐怖，肯定是不行的，于是便想到用NumberPicker，动态填充数据，一次只设置5个数据，当选中变化时，重新设置数据填充，所以关键在于填充的数据的计算。

设置数据部分逻辑代码：

/**

* 更新左侧控件

* 日期：选择年控件

* 时间：选择月份和日期控件

*

* @param timeMillis

*/

private void updateLeftValue(long timeMillis) {

SimpleDateFormat sdf;

String str[] = new String[DATA_SIZE];

if (mCurrentType == TYPE_PICK_DATE) {

sdf = new SimpleDateFormat("yyyy");

for (int i = 0; i < DATA_SIZE; i++) {

Calendar cal = Calendar.getInstance();

cal.setTimeInMillis(timeMillis);

cal.add(Calendar.YEAR, (i - DATA_SIZE / 2));

str[i] = sdf.format(cal.getTimeInMillis());

}

} else {

sdf = new SimpleDateFormat("MM-dd EEE");

for (int i = 0; i < DATA_SIZE; i++) {

Calendar cal = Calendar.getInstance();

cal.setTimeInMillis(timeMillis);

cal.add(Calendar.DAY_OF_MONTH, (i - DATA_SIZE / 2));

str[i] = sdf.format(cal.getTimeInMillis());

}

}

mNpLeft.setDisplayedValues(str);

mNpLeft.setValue(DATA_SIZE / 2);

mNpLeft.postInvalidate();

}

对滚轮的监听，并重新设置填充数据：

@Override

public void onValueChange(NumberPicker picker, int oldVal, int newVal) {

Calendar calendar = Calendar.getInstance();

calendar.setTimeInMillis(mTimeMillis);

int year = calendar.get(Calendar.YEAR);

int month = calendar.get(Calendar.MONTH);

int day = calendar.get(Calendar.DAY_OF_MONTH);

int hour = calendar.get(Calendar.HOUR_OF_DAY);

int offset = newVal - oldVal;

if (picker == mNpLeft) {

if (mCurrentType == TYPE_PICK_DATE) {

calendar.add(Calendar.YEAR, offset);

} else {

calendar.add(Calendar.DAY_OF_MONTH, offset);

}

updateLeftValue(calendar.getTimeInMillis());

mTimeMillis = calendar.getTimeInMillis();

} else if (picker == mNpMiddle) {

if (mCurrentType == TYPE_PICK_DATE) {

calendar.add(Calendar.MONTH, offset);

if (calendar.get(Calendar.YEAR) != year) {

calendar.set(Calendar.YEAR, year);

}

} else {

calendar.add(Calendar.HOUR_OF_DAY, offset);

if (calendar.get(Calendar.DAY_OF_MONTH) != day) {

calendar.set(Calendar.DAY_OF_MONTH, day);

}

if (calendar.get(Calendar.MONTH) != month) {

calendar.set(Calendar.MONTH, month);

}

if (calendar.get(Calendar.YEAR) != year) {

calendar.set(Calendar.YEAR, year);

}

}

updateMiddleValue(calendar.getTimeInMillis());

updateRightValue(calendar.getTimeInMillis());

mTimeMillis = calendar.getTimeInMillis();

} else if (picker == mNpRight) {

if (mCurrentType == TYPE_PICK_DATE) {

int days = getMaxDayOfMonth(year, month + 1);

if(day == 1 && offset < 0){

calendar.set(Calendar.DAY_OF_MONTH,days);

}else if(day == days && offset > 0){

calendar.set(Calendar.DAY_OF_MONTH,1);

}else{

calendar.add(Calendar.DAY_OF_MONTH, offset);

}

if (calendar.get(Calendar.MONTH) != month) {

calendar.set(Calendar.MONTH, month);

}

if (calendar.get(Calendar.YEAR) != year) {

calendar.set(Calendar.YEAR, year);

}

Log.e(TAG,"time：：："+test.format(calendar.getTimeInMillis()));

} else {

calendar.add(Calendar.MINUTE, offset);

if (calendar.get(Calendar.HOUR_OF_DAY) != hour) {

calendar.set(Calendar.HOUR_OF_DAY, hour);

}

if (calendar.get(Calendar.DAY_OF_MONTH) != day) {

calendar.set(Calendar.DAY_OF_MONTH, day);

}

if (calendar.get(Calendar.MONTH) != month) {

calendar.set(Calendar.MONTH, month);

}

if (calendar.get(Calendar.YEAR) != year) {

calendar.set(Calendar.YEAR, year);

}

}

updateRightValue(calendar.getTimeInMillis());

mTimeMillis = calendar.getTimeInMillis();

}

/**

* 向外部发送当前选中时间

*/

if (mOnSelectedChangeListener != null) {

mOnSelectedChangeListener.onSelected(this,mTimeMillis);

}

Log.e(TAG, "selected time:" + test.format(mTimeMillis));

}

选择数值和字符串

同样的，使用NumberPicker进行封装，动态填充数值从而实现滚动变换的效果。

考虑到通用性，传入的是Object类型的数组，在控件里进行判断。

可以选择一列数值、两列数值、三列数值，字符串同理。每一列数值可以设置它的单位、标题等，默认是隐藏，需要自己设置。

可以设置步长step

完整代码如下：

package com.example.moore.picktimeview.widget;

import android.content.Context;

import android.graphics.Color;

import android.util.AttributeSet;

import android.util.Log;

import android.view.Gravity;

import android.view.ViewGroup;

import android.widget.LinearLayout;

import android.widget.NumberPicker;

import android.widget.TextView;

/**

* Created by Moore on 2016/10/21.

*/

public class PickValueView extends LinearLayout implements NumberPicker.OnValueChangeListener {

private Context mContext;

/**

* 组件 标题、单位、滚轮

*/

private TextView mTitleLeft, mTitleMiddle, mTitleRight;

private TextView mUnitLeft, mUnitMiddle, mUnitRight;

private MyNumberPicker mNpLeft, mNpMiddle, mNpRight;

/**

* 数据个数 1列 or 2列 or 3列

*/

private int mViewCount = 1;

/**

* 一组数据长度

*/

private final int DATA_SIZE = 3;

/**

* 需要设置的值与默认值

*/

private Object[] mLeftValues;

private Object[] mMiddleValues;

private Object[] mRightValues;

private Object mDefaultLeftValue;

private Object mDefaultMiddleValue;

private Object mDefaultRightValue;

/**

* 当前正在显示的值

*/

private Object[] mShowingLeft = new Object[DATA_SIZE];

private Object[] mShowingMiddle = new Object[DATA_SIZE];

private Object[] mShowingRight = new Object[DATA_SIZE];

/**

* 步长

*/

private int mLeftStep = 5;

private int mMiddleStep = 1;

private int mRightStep = 1;

/**

* 回调接口对象

*/

private onSelectedChangeListener mSelectedChangeListener;

public PickValueView(Context context) {

super(context);

this.mContext = context;

generateView();

}

public PickValueView(Context context, AttributeSet attrs) {

super(context, attrs);

this.mContext = context;

generateView();

}

public PickValueView(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

this.mContext = context;

generateView();

}

/**

* 生成视图

*/

private void generateView() {

//标题

LinearLayout titleLayout = new LinearLayout(mContext);

LayoutParams titleParams = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);

titleParams.setMargins(0, 0, 0, dip2px(12));

titleLayout.setLayoutParams(new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));

titleLayout.setOrientation(HORIZONTAL);

mTitleLeft = new TextView(mContext);

mTitleMiddle = new TextView(mContext);

mTitleRight = new TextView(mContext);

LayoutParams params = new LayoutParams(0, ViewGroup.LayoutParams.WRAP_CONTENT, 1);

TextView[] titles = new TextView[]{mTitleLeft, mTitleMiddle, mTitleRight};

for (int i = 0; i < titles.length; i++) {

titles[i].setLayoutParams(params);

titles[i].setGravity(Gravity.CENTER);

titles[i].setTextColor(Color.parseColor("#3434EE"));

}

titleLayout.addView(mTitleLeft);

titleLayout.addView(mTitleMiddle);

titleLayout.addView(mTitleRight);

//内容

LinearLayout contentLayout = new LinearLayout(mContext);

contentLayout.setLayoutParams(new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));

contentLayout.setOrientation(HORIZONTAL);

contentLayout.setGravity(Gravity.CENTER);

mNpLeft = new MyNumberPicker(mContext);

mNpMiddle = new MyNumberPicker(mContext);

mNpRight = new MyNumberPicker(mContext);

mUnitLeft = new TextView(mContext);

mUnitMiddle = new TextView(mContext);

mUnitRight = new TextView(mContext);

MyNumberPicker[] nps = new MyNumberPicker[]{mNpLeft, mNpMiddle, mNpRight};

for (int i = 0; i < nps.length; i++) {

nps[i].setLayoutParams(params);

nps[i].setDescendantFocusability(FOCUS_BLOCK_DESCENDANTS);

nps[i].setOnValueChangedListener(this);

}

contentLayout.addView(mNpLeft);

contentLayout.addView(mUnitLeft);

contentLayout.addView(mNpMiddle);

contentLayout.addView(mUnitMiddle);

contentLayout.addView(mNpRight);

contentLayout.addView(mUnitRight);

this.setLayoutParams(new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));

this.setOrientation(VERTICAL);

this.addView(titleLayout);

this.addView(contentLayout);

}

/**

* 初始化数据和值

*/

private void initViewAndPicker() {

if (mViewCount == 1) {

this.mNpMiddle.setVisibility(GONE);

this.mNpRight.setVisibility(GONE);

this.mUnitMiddle.setVisibility(GONE);

this.mUnitRight.setVisibility(GONE);

} else if (mViewCount == 2) {

this.mNpRight.setVisibility(GONE);

this.mUnitRight.setVisibility(GONE);

}

//初始化数组值

if (mLeftValues != null && mLeftValues.length != 0) {

if (mLeftValues.length < DATA_SIZE) {

for (int i = 0; i < mLeftValues.length; i++) {

mShowingLeft[i] = mLeftValues[i];

}

for (int i = mLeftValues.length; i < DATA_SIZE; i++) {

mShowingLeft[i] = -9999;

}

} else {

for (int i = 0; i < DATA_SIZE; i++) {

mShowingLeft[i] = mLeftValues[i];

}

}

mNpLeft.setMinValue(0);

mNpLeft.setMaxValue(DATA_SIZE - 1);

if (mDefaultLeftValue != null)

updateLeftView(mDefaultLeftValue);

else

updateLeftView(mShowingLeft[0]);

}

/**

* 中间控件

*/

if (mViewCount == 2 || mViewCount == 3) {

if (mMiddleValues != null && mMiddleValues.length != 0) {

if (mMiddleValues.length < DATA_SIZE) {

for (int i = 0; i < mMiddleValues.length; i++) {

mShowingMiddle[i] = mMiddleValues[i];

}

for (int i = mMiddleValues.length; i < DATA_SIZE; i++) {

mShowingMiddle[i] = -9999;

}

} else {

for (int i = 0; i < DATA_SIZE; i++) {

mShowingMiddle[i] = mMiddleValues[i];

}

}

mNpMiddle.setMinValue(0);

mNpMiddle.setMaxValue(DATA_SIZE - 1);

if (mDefaultMiddleValue != null)

updateMiddleView(mDefaultMiddleValue);

else

updateMiddleView(mShowingMiddle[0]);

}

}

/**

* 右侧控件

*/

if (mViewCount == 3) {

if (mRightValues != null && mRightValues.length != 0) {

if (mRightValues.length < DATA_SIZE) {

for (int i = 0; i < mRightValues.length; i++) {

mShowingRight[i] = mRightValues[i];

}

for (int i = mRightValues.length; i < DATA_SIZE; i++) {

mShowingRight[i] = -9999;

}

} else {

for (int i = 0; i < DATA_SIZE; i++) {

mShowingRight[i] = mRightValues[i];

}

}

mNpRight.setMinValue(0);

mNpRight.setMaxValue(DATA_SIZE - 1);

if (mDefaultRightValue != null)

updateRightView(mDefaultRightValue);

else

updateRightView(mShowingRight[0]);

}

}

}

private void updateLeftView(Object value) {

updateValue(value, 0);

}

private void updateMiddleView(Object value) {

updateValue(value, 1);

}

private void updateRightView(Object value) {

updateValue(value, 2);

}

/**

* 更新滚轮视图

*

* @param value

* @param index

*/

private void updateValue(Object value, int index) {

String showStr[] = new String[DATA_SIZE];

MyNumberPicker picker;

Object[] showingValue;

Object[] values;

int step;

if (index == 0) {

picker = mNpLeft;

showingValue = mShowingLeft;

values = mLeftValues;

step = mLeftStep;

} else if (index == 1) {

picker = mNpMiddle;

showingValue = mShowingMiddle;

values = mMiddleValues;

step = mMiddleStep;

} else {

picker = mNpRight;

showingValue = mShowingRight;

values = mRightValues;

step = mRightStep;

}

if (values instanceof Integer[]) {

for (int i = 0; i < DATA_SIZE; i++) {

showingValue[i] = (int) value - step * (DATA_SIZE / 2 - i);

int offset = (int) values[values.length - 1] - (int) values[0] + step;

if ((int) showingValue[i] < (int) values[0]) {

showingValue[i] = (int) showingValue[i] + offset;

}

if ((int) showingValue[i] > (int) values[values.length - 1]) {

showingValue[i] = (int) showingValue[i] - offset;

}

showStr[i] = "" + showingValue[i];

}

} else {

int strIndex = 0;

for (int i = 0; i < values.length; i++) {

if (values[i].equals(value)) {

strIndex = i;

break;

}

}

for (int i = 0; i < DATA_SIZE; i++) {

int temp = strIndex - (DATA_SIZE / 2 - i);

if (temp < 0) {

temp += values.length;

}

if (temp >= values.length) {

temp -= values.length;

}

showingValue[i] = values[temp];

showStr[i] = (String) values[temp];

}

}

picker.setDisplayedValues(showStr);

picker.setValue(DATA_SIZE / 2);

picker.postInvalidate();

}

@Override

public void onValueChange(NumberPicker picker, int oldVal, int newVal) {

if (picker == mNpLeft) {

updateLeftView(mShowingLeft[newVal]);

} else if (picker == mNpMiddle) {

updateMiddleView(mShowingMiddle[newVal]);

} else if (picker == mNpRight) {

updateRightView(mShowingRight[newVal]);

}

if (mSelectedChangeListener != null) {

mSelectedChangeListener.onSelected(this, mShowingLeft[DATA_SIZE / 2], mShowingMiddle[DATA_SIZE / 2], mShowingRight[DATA_SIZE / 2]);

}

}

/**

* 设置数据--单列数据

*

* @param leftValues

* @param mDefaultLeftValue

*/

public void setValueData(Object[] leftValues, Object mDefaultLeftValue) {

this.mViewCount = 1;

this.mLeftValues = leftValues;

this.mDefaultLeftValue = mDefaultLeftValue;

initViewAndPicker();

}

/**

* 设置数据--两列数据

*

* @param leftValues

* @param mDefaultLeftValue

* @param middleValues

* @param defaultMiddleValue

*/

public void setValueData(Object[] leftValues, Object mDefaultLeftValue, Object[] middleValues, Object defaultMiddleValue) {

this.mViewCount = 2;

this.mLeftValues = leftValues;

this.mDefaultLeftValue = mDefaultLeftValue;

this.mMiddleValues = middleValues;

this.mDefaultMiddleValue = defaultMiddleValue;

initViewAndPicker();

}

/**

* 设置数据--三列数据

*

* @param leftValues

* @param mDefaultLeftValue

* @param middleValues

* @param defaultMiddleValue

* @param rightValues

* @param defaultRightValue

*/

public void setValueData(Object[] leftValues, Object mDefaultLeftValue, Object[] middleValues, Object defaultMiddleValue, Object[] rightValues, Object defaultRightValue) {

this.mViewCount = 3;

this.mLeftValues = leftValues;

this.mDefaultLeftValue = mDefaultLeftValue;

this.mMiddleValues = middleValues;

this.mDefaultMiddleValue = defaultMiddleValue;

this.mRightValues = rightValues;

this.mDefaultRightValue = defaultRightValue;

initViewAndPicker();

}

/**

* 设置左边数据步长

*

* @param step

*/

public void setLeftStep(int step) {

this.mLeftStep = step;

initViewAndPicker();

}

/**

* 设置中间数据步长

*

* @param step

*/

public void setMiddleStep(int step) {

this.mMiddleStep = step;

initViewAndPicker();

}

/**

* 设置右边数据步长

*

* @param step

*/

public void setRightStep(int step) {

this.mRightStep = step;

initViewAndPicker();

}

/**

* 设置标题

*

* @param left

* @param middle

* @param right

*/

public void setTitle(String left, String middle, String right) {

if (left != null) {

mTitleLeft.setVisibility(VISIBLE);

mTitleLeft.setText(left);

} else {

mTitleLeft.setVisibility(GONE);

}

if (middle != null) {

mTitleMiddle.setVisibility(VISIBLE);

mTitleMiddle.setText(middle);

} else {

mTitleMiddle.setVisibility(GONE);

}

if (right != null) {

mTitleRight.setVisibility(VISIBLE);

mTitleRight.setText(right);

} else {

mTitleRight.setVisibility(GONE);

}

this.postInvalidate();

}

public void setUnitLeft(String unitLeft) {

setUnit(unitLeft, 0);

}

public void setmUnitMiddle(String unitMiddle) {

setUnit(unitMiddle, 1);

}

public void setUnitRight(String unitRight) {

setUnit(unitRight, 2);

}

private void setUnit(String unit, int index) {

TextView tvUnit;

if (index == 0) {

tvUnit = mUnitLeft;

} else if (index == 1) {

tvUnit = mUnitMiddle;

} else {

tvUnit = mUnitRight;

}

if (unit != null) {

tvUnit.setText(unit);

} else {

tvUnit.setText(" ");

}

initViewAndPicker();

}

/**

* 设置回调

*

* @param listener

*/

public void setOnSelectedChangeListener(onSelectedChangeListener listener) {

this.mSelectedChangeListener = listener;

}

/**

* dp转px

*

* @param dp

* @return

*/

private int dip2px(int dp) {

float scale = mContext.getResources().getDisplayMetrics().density;

return (int) (scale * dp + 0.5f);

}

/**

* 回调接口

*/

public interface onSelectedChangeListener {

void onSelected(PickValueView view, Object leftValue, Object middleValue, Object rightValue);

}

}

关于NumberPicker

默认的NumberPicker往往字体颜色、分割线颜色等都是跟随系统，不能改变，考虑到可能比较丑或者有其他需求，所以自定义的NumberPicker，通过反射的方式更改里面的一些属性，代码如下：

package com.example.moore.picktimeview.widget;

import android.content.Context;

import android.graphics.Color;

import android.graphics.drawable.ColorDrawable;

import android.util.AttributeSet;

import android.util.Log;

import android.view.View;

import android.view.ViewGroup;

import android.widget.EditText;

import android.widget.ImageButton;

import android.widget.NumberPicker;

import java.lang.reflect.Field;

/**

* Created by Moore on 2016/10/20.

*/

public class MyNumberPicker extends NumberPicker {

private static int mTextSize = 16;

private static int mTextColor = 0x000000;

private static int mDividerColor = 0xFFFF00;

public MyNumberPicker(Context context) {

super(context);

setNumberPickerDividerColor();

}

public MyNumberPicker(Context context, AttributeSet attrs) {

super(context, attrs);

setNumberPickerDividerColor();

}

public MyNumberPicker(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

setNumberPickerDividerColor();

}

@Override

public void addView(View child) {

super.addView(child);

updateView(child);

}

@Override

public void addView(View child, int index, ViewGroup.LayoutParams params) {

super.addView(child, index, params);

updateView(child);

}

@Override

public void addView(View child, ViewGroup.LayoutParams params) {

super.addView(child, params);

updateView(child);

}

private void updateView(View view) {

if (view instanceof EditText) {

// ((EditText) view).setTextSize(mTextSize);

((EditText) view).setTextSize(17);

// ((EditText) view).setTextColor(mTextColor);

((EditText) view).setTextColor(Color.parseColor("#6495ED"));

}

}

private void setNumberPickerDividerColor() {

Field[] pickerFields = NumberPicker.class.getDeclaredFields();

/**

* 设置分割线颜色

*/

for (Field pf : pickerFields) {

if (pf.getName().equals("mSelectionDivider")) {

pf.setAccessible(true);

try {

// pf.set(this, new ColorDrawable(mDividerColor));

pf.set(this, new ColorDrawable(Color.parseColor("#C4C4C4")));

} catch (IllegalAccessException e) {

e.printStackTrace();

}

break;

}

}

/**

* 设置分割线高度

*/

for (Field pf : pickerFields) {

if (pf.getName().equals("mSelectionDividerHeight")) {

pf.setAccessible(true);

try {

pf.set(this, 2);

} catch (IllegalAccessException e) {

e.printStackTrace();

}

break;

}

}

for (Field pf : pickerFields) {

if (pf.getName().equals("mSelectorElementHeight")) {

pf.setAccessible(true);

try {

pf.set(this, 2);

} catch (IllegalAccessException e) {

e.printStackTrace();

}

break;

}

}

}

public void setDividerColor(int color) {

this.mDividerColor = color;

// this.postInvalidate();

}

public void setTextColor(int color) {

this.mTextColor = color;

// this.postInvalidate();

}

public void setTextSize(int textSize) {

this.mTextSize = textSize;

// this.postInvalidate();

}

}

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