滚动时间控件,只选年月

原文链接:https://www.jianshu.com/p/4a2c853d9276

滚动时间控件,只选年月_第1张图片
年月滚动时间选择器

1. 创建BottomDatePickerPop来从底部弹出此时间选择器

/**
 * 底部年月时间选择弹出窗
 */
public class BottomDatePickerPop extends BottomPopupView {
    @BindView(R.id.wheel_year)
    WheelPicker wheelYear;
    @BindView(R.id.tv_title)
    TextView tvTitle;
    @BindView(R.id.wheel_month)
    WheelPicker wheelMonth;
    @BindView(R.id.btn_confirm)
    Button btnConfirm;

    int selectYear;
    int selectMonth;

    public BottomDatePickerPop(@NonNull Context context) {
        super(context);
    }
    private onSelectYearMonth listener;

    public void setListener(onSelectYearMonth listener) {
        this.listener = listener;
    }

    public interface  onSelectYearMonth{
        void selectYearMonth(int year,int month);
    }
    @Override
    protected int getImplLayoutId() {
        return R.layout.pop_bottom_date_picker;
    }

    @Override
    protected void onCreate() {
        ButterKnife.bind(this);
        super.onCreate();
        initYearMonth();
    }

    private void initYearMonth() {
        Calendar now = Calendar.getInstance();
        int yearNum = now.get(Calendar.YEAR);
        int monthNum = now.get(Calendar.MONTH);//默认月份会少1
        selectYear = yearNum;
        selectMonth = monthNum+1;

        List years = getYearNum(yearNum);
        List months = getMonthNum(monthNum);
        wheelYear.setData(years);
        wheelMonth.setData(months);
        //设置默认选中位置
        wheelYear.setSelectedItemPosition(yearNum);
        wheelMonth.setSelectedItemPosition(monthNum);

        initWheelSet(wheelYear);
        initWheelSet(wheelMonth);
        wheelYear.setOnItemSelectedListener(new WheelPicker.OnItemSelectedListener() {
            @Override
            public void onItemSelected(WheelPicker picker, Object data, int position) {
                String year = (String) data;
                L.e(year);
                selectYear  = Integer.parseInt(year.substring(0,year.length()-1));
            }
        });
        wheelMonth.setOnItemSelectedListener(new WheelPicker.OnItemSelectedListener() {
            @Override
            public void onItemSelected(WheelPicker picker, Object data, int position) {
                String month = (String) data;
                L.e(month);
                selectMonth = Integer.parseInt(month.substring(0,month.length()-1));
            }
        });
    }
    private List getYearNum( int yearNum){
        List data = new ArrayList<>();
        for (int i = yearNum-10; i <= yearNum; i++) {
            data.add(i+"年");
        }
        return data;
    }
    private List getMonthNum(int monthNum){
        List data = new ArrayList<>();
        for (int i = 1; i <= 12; i++) {
            data.add(i+"月");
        }
        return data;
    }
    private void initWheelSet(WheelPicker wheel){
//        wheel.setCurtainColor(Color.RED);//蒙版层颜色
//        wheel.setCurtain(true);//是否加入蒙版层:覆盖在选中的文字上层
        wheel.setAtmospheric(true);//未选中项进行高斯模糊效果
        wheel.setCurved(true);//圆弧滚轮效果
        wheel.setItemSpace(DpPxUtils.dp2px(28));
        wheel.setItemTextColor(ContextCompat.getColor(this.getContext(),R.color.text_light_gray));
        wheel.setSelectedItemTextColor(ContextCompat.getColor(this.getContext(),R.color.text_black));
        wheel.setItemTextSize(DpPxUtils.dp2px(16));
        wheel.setTypeface(Typeface.DEFAULT_BOLD);
    }
    @OnClick(R.id.btn_confirm)
    public void doClick(){
        if (listener!=null)listener.selectYearMonth(selectYear,selectMonth);
        this.dismiss();
    }
}

其中的BottomPopupViewXPopup的基类

2. 布局中使用WheelPicker创建两个并排的时间滚动器

布局文件pop_bottom_date_picker为:




    

    

    

    

    

3.页面中使用:

    BasePopupView basePopupView;
    private void initDatePicker() {
        BottomDatePickerPop bottomDatePickerPop = new BottomDatePickerPop(_mActivity);
        bottomDatePickerPop.setListener((year, month) -> 
            tvTitle.setText("订单明细(" + year + "年" + month + "月)")
        );
        basePopupView = new XPopup.Builder(_mActivity)
                .asCustom(bottomDatePickerPop);
    }

最后的效果:


滚动时间控件,只选年月_第2张图片
滚动选择年月

你可能感兴趣的:(滚动时间控件,只选年月)