使用wheel自定义日期弹出框

自定义日期弹出框

近日，项目中有用到日期选择，网上找了许久，没有现成的，只能拿一个来改造下,项目使用了第三方开源组件 wheelview,自定义了一个dialog.使用时只需要调dialog,使用callback返回选择的年，月，日。

注意点：

设置文字颜色

private static final int VALUE_TEXT_COLOR = 0xF02e9dd9; //选中文字颜色

private static final int ITEMS_TEXT_COLOR = 0xFFCFCFCF; //普通文字颜色
private static final int TEXT_SIZE = 48; //文字大小

设置wheelview背景 wheel-bg.xml用于设置wheelview背景色

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<gradient
android:startColor="#ffffff"
android:centerColor="#ffffff"
android:endColor="#ffffff"
android:angle="90" />

</shape>
</item>
</layer-list>

wheel_val.xml 用于设置前景色即选中时的text背景色

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#FFFFFF"
android:centerColor="#00FFFFFF"
android:endColor="#FFFFFF"
android:angle="90" />

</shape>

customerDialog源码

package cn.wq.datewheel.wheel;

import android.app.Dialog;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Window;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.Calendar;
import java.util.List;

import cn.wq.datewheel.R;

/**
* 自定义的日期选择器
*
* @author sxzhang
*/
public class CusDatePickDialog extends Dialog implements View.OnClickListener {

private Calendar calendar = Calendar.getInstance(); //������
private WheelView yearWheel;
private WheelView monthWheel;
private WheelView dayWheel;
private OnChangeListener onChangeListener; //onChangeListener
private final int MARGIN_RIGHT = 20;
private Context mContext;
private int year;
private int oldYear;
private int month;
private int day;
private NumericWheelAdapter yearAdapter;
private NumericWheelAdapter monthAdapter;
private NumericWheelAdapter dayAdapter;
private List<WheelAdapter> adapterList = new ArrayList<>();
private List<WheelView> wheelViewList = new ArrayList<>();
private List<OnWheelChangedListener> listenerList = new ArrayList<>();

//Constructors
public CusDatePickDialog(Context context) {
super(context);
this.mContext = context;
}

/**
* 初始化
*
* @param context
*/
private void init(Context context) {
year = calendar.get(Calendar.YEAR);
oldYear = year;
month = calendar.get(Calendar.MONTH) + 1;
day = calendar.get(Calendar.DAY_OF_MONTH);
View view = LayoutInflater.from(context).inflate(R.layout.dialog_layout_date_select, null);
yearWheel = (WheelView) view.findViewById(R.id.wheel_year);
monthWheel = (WheelView) view.findViewById(R.id.wheel_monty);
dayWheel = (WheelView) view.findViewById(R.id.wheel_day);
yearAdapter = new NumericWheelAdapter(year, 2020);
monthAdapter = new NumericWheelAdapter(1, 12);
dayAdapter = new NumericWheelAdapter(1, 31);
wheelViewList.add(yearWheel);
wheelViewList.add(monthWheel);
wheelViewList.add(dayWheel);
adapterList.add(yearAdapter);
adapterList.add(monthAdapter);
adapterList.add(dayAdapter);
listenerList.add(onYearsChangedListener);
listenerList.add(onMonthChangedListener);
listenerList.add(onDaysChangedListener);
//设置whellView
setWhellView();
//设置button
TextView mTvCancel = (TextView) view.findViewById(R.id.tv_cancel);
TextView mTvSure = (TextView) view.findViewById(R.id.tv_sure);
mTvCancel.setOnClickListener(this);
mTvSure.setOnClickListener(this);
this.setContentView(view);
}

private void setWhellView() {
for (int i = 0; i < wheelViewList.size(); i++) {
WheelView wheelView = wheelViewList.get(i);
wheelView.setAdapter(adapterList.get(i));
wheelView.setCyclic(true);
wheelView.setVisibleItems(3);
wheelView.addChangingListener(listenerList.get(i));
}
monthWheel.setCurrentItem(month - 1);
dayWheel.setCurrentItem(day - 1);
}

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
init(mContext);
}

/**
* 年监听器
*/
private OnWheelChangedListener onYearsChangedListener = new OnWheelChangedListener() {
@Override
public void onChanged(WheelView mins, int oldValue, int newValue) {
calendar.set(Calendar.YEAR, newValue + 1);
year = oldYear + newValue;
setDayAdapter();
}
};

/**
* 根据年，月设置当月显示多少天
*/
private void setDayAdapter() {
Calendar c = Calendar.getInstance();
c.set(year, month - 1, 1);
int days = c.getActualMaximum(Calendar.DAY_OF_MONTH);
dayAdapter.setMaxValue(days);
if (day > 28) {
dayWheel.post(new Runnable() {
@Override
public void run() {
dayWheel.setAdapter(dayAdapter);
dayWheel.setCurrentItem(0, false);
}
});
}
}

private boolean isFirst = true;
/**
* 滑动月份监听器
*/
private OnWheelChangedListener onMonthChangedListener = new OnWheelChangedListener() {
@Override
public void onChanged(WheelView mins, int oldValue, int newValue) {
month = newValue + 1;
calendar.set(Calendar.MONTH, newValue + 1);
if (isFirst) {
isFirst = false;
return;
}
setDayAdapter();
//            ToolLog.w("date", "oldvalue:" + oldValue + "\tnewValue:" + newValue + "\tmonth:" + month);
}
};
/**
* 滑动日期监听器
*/
private OnWheelChangedListener onDaysChangedListener = new OnWheelChangedListener() {
@Override
public void onChanged(WheelView mins, int oldValue, int newValue) {
day = newValue + 1;
}
};

@Override
public void onClick(View v) {
if (v.getId() == R.id.tv_cancel) {
dismiss();
} else if (v.getId() == R.id.tv_sure) {
change();
dismiss();
}
}

/**
* 滑动改变监听器回调的接口
*/
public interface OnChangeListener {
void onChange(int year, int month, int day);
}

/**
* 设置滑动改变监听器
*
* @param onChangeListener
*/
public void setOnChangeListener(OnChangeListener onChangeListener) {
this.onChangeListener = onChangeListener;
}

@Override
protected void onStop() {
wheelViewList = null;
adapterList = null;
listenerList = null;
super.onStop();
}

/**
* 滑动最终调用的方法
*/
private void change() {
if (onChangeListener != null) {
onChangeListener.onChange(year, month, day);
}
}
}

adapter中内容

adapter 使用下方代码 创建，设置最小值与最大值。也可以使用set方法设置

public NumericWheelAdapter(int minValue, int maxValue) {
this(minValue, maxValue, null);
}

具体代码如下：

/*
*  Copyright 2010 Yuri Kanivets
*
*  Licensed under the Apache License, Version 2.0 (the "License");
*  you may not use this file except in compliance with the License.
*  You may obtain a copy of the License at
*
*  http://www.apache.org/licenses/LICENSE-2.0 *
*  Unless required by applicable law or agreed to in writing, software
*  distributed under the License is distributed on an "AS IS" BASIS,
*  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
*  See the License for the specific language governing permissions and
*  limitations under the License.
*/

package cn.wq.datewheel.wheel;

/**
* Numeric Wheel adapter.
*/
public class NumericWheelAdapter implements WheelAdapter {

/**
* The default min value
*/
public static final int DEFAULT_MAX_VALUE = 9;

/**
* The default max value
*/
private static final int DEFAULT_MIN_VALUE = 0;

// Values
private int minValue;
private int maxValue;

// format
private String format;

/**
* Default constructor
*/
public NumericWheelAdapter() {
this(DEFAULT_MIN_VALUE, DEFAULT_MAX_VALUE);
}

/**
* Constructor
*
* @param minValue the wheel min value
* @param maxValue the wheel max value
*/
public NumericWheelAdapter(int minValue, int maxValue) {
this(minValue, maxValue, null);
}

/**
* Constructor
*
* @param minValue the wheel min value
* @param maxValue the wheel max value
* @param format   the format string
*/
public NumericWheelAdapter(int minValue, int maxValue, String format) {
this.minValue = minValue;
this.maxValue = maxValue;
this.format = format;
}

@Override
public String getItem(int index) {
if (index >= 0 && index < getItemsCount()) {
int value = minValue + index;
return format != null ? String.format(format, value) : Integer.toString(value);
}
return null;
}

@Override
public int getItemsCount() {
return maxValue - minValue + 1;
}

@Override
public int getMaximumLength() {
int max = Math.max(Math.abs(maxValue), Math.abs(minValue));
int maxLen = Integer.toString(max).length();
if (minValue < 0) {
maxLen++;
}
return maxLen;
}

public void setMaxValue(int maxValue) {
this.maxValue = maxValue;
}
}

使用的接口回调

/*
*  Copyright 2010 Yuri Kanivets
*
*  Licensed under the Apache License, Version 2.0 (the "License");
*  you may not use this file except in compliance with the License.
*  You may obtain a copy of the License at
*
*  http://www.apache.org/licenses/LICENSE-2.0 *
*  Unless required by applicable law or agreed to in writing, software
*  distributed under the License is distributed on an "AS IS" BASIS,
*  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
*  See the License for the specific language governing permissions and
*  limitations under the License.
*/

package cn.wq.datewheel.wheel;

/**
* Wheel changed listener interface.
* <p>The currentItemChanged() method is called whenever current wheel positions is changed:
* <li> New Wheel position is set
* <li> Wheel view is scrolled
*/
public interface OnWheelChangedListener {
/**
* Callback method to be invoked when current item changed
*
* @param wheel    the wheel view whose state has changed
* @param oldValue the old value of current item
* @param newValue the new value of current item
*/
void onChanged(WheelView wheel, int oldValue, int newValue);
}

/*
*  Copyright 2010 Yuri Kanivets
*
*  Licensed under the Apache License, Version 2.0 (the "License");
*  you may not use this file except in compliance with the License.
*  You may obtain a copy of the License at
*
*  http://www.apache.org/licenses/LICENSE-2.0 *
*  Unless required by applicable law or agreed to in writing, software
*  distributed under the License is distributed on an "AS IS" BASIS,
*  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
*  See the License for the specific language governing permissions and
*  limitations under the License.
*/

package cn.wq.datewheel.wheel;

/**
* Wheel scrolled listener interface.
*/
public interface OnWheelScrollListener {
/**
* Callback method to be invoked when scrolling started.
*
* @param wheel the wheel view whose state has changed.
*/
void onScrollingStarted(WheelView wheel);

/**
* Callback method to be invoked when scrolling ended.
*
* @param wheel the wheel view whose state has changed.
*/
void onScrollingFinished(WheelView wheel);
}

MainActivity代码

package cn.wq.datewheel;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

import cn.wq.datewheel.wheel.CusDatePickDialog;

public class MainActivity extends AppCompatActivity {
private Button mBtOpenDialog;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mBtOpenDialog = (Button) findViewById(R.id.bt_popup);

mBtOpenDialog.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
CusDatePickDialog dialog = new CusDatePickDialog(MainActivity.this);
dialog.setOnChangeListener(new CusDatePickDialog.OnChangeListener() {
@Override
public void onChange(int year, int month, int day) {
String date = String.format("%02d-%02d-%02d", year, month, day);
showToast(date);
}
});
dialog.show();
}
});
}

private void showToast(String str) {
Toast.makeText(MainActivity.this, str, Toast.LENGTH_SHORT).show();
}
}

layout文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:orientation="vertical">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:gravity="center"
android:text="选择日期"
android:textColor="@color/color_blue"
android:textSize="20sp" />

<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="16dp"
android:background="@color/color_blue" />

<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginTop="16dp"
android:gravity="center"
android:orientation="horizontal">

<cn.wq.datewheel.wheel.WheelView
android:id="@+id/wheel_year"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp" />

<TextView
style="@style/wheel_text_unit"
android:text="年" />

<cn.wq.datewheel.wheel.WheelView
android:id="@+id/wheel_monty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:background="@color/color_blue" />

<TextView
style="@style/wheel_text_unit"
android:text="月" />

<cn.wq.datewheel.wheel.WheelView
android:id="@+id/wheel_day"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp" />

<TextView
style="@style/wheel_text_unit"
android:text="日" />
</LinearLayout>
</FrameLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="30dp"
android:layout_marginTop="16dp"
android:orientation="horizontal">

<TextView
android:id="@+id/tv_cancel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
android:layout_weight="1"
android:gravity="right"
android:text="取消"
android:textColor="@color/color_blue" />

<TextView
android:id="@+id/tv_sure"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="16dp"
android:layout_weight="1"
android:text="确定"
android:textColor="@color/color_blue" />

</LinearLayout>
</LinearLayout>

效果图：

源码下载

代码传送门