使用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 adapterList = new ArrayList<>();
    private List wheelViewList = new ArrayList<>();
    private List 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.
 * 
The currentItemChanged() method is called whenever current wheel positions is changed:
 * 
 New Wheel position is set
 * 
 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文件

<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>

效果图：

源码下载

代码传送门