仿去哪儿选择日期区间控件从0到1的实现

本篇学习的内容
第一,recyclerview的多类型item的使用;
第二,calendar的基本使用与日期计算;
第三,DialogFragment的基本使用。

需求

最近公司项目需要一个选择时间区间的控件,效果跟去哪儿网选择住宿时间区间非常像,先来看看最终放入我项目中的效果图(压缩后图片比较不清晰,请见谅,最终在移动端显示效果比这个更佳)如下图:


仿去哪儿选择日期区间控件从0到1的实现_第1张图片
选择开始后
仿去哪儿选择日期区间控件从0到1的实现_第2张图片
选择开始与结束后
仿去哪儿选择日期区间控件从0到1的实现_第3张图片
开始与结束为同一天

实现思路

第一步,日历主体实现

首先,利用recycerview的多item布局实现日历主体部分,其中,有两种item类型;
第一种,月份;
这个简单,不做过多说明
第二种,日期。
有GridLayoutManager实现,设置SpanCount为7,注意空白数据的填充和每个item的样式类型。

既然数据itme有两种类型,那么数据源也是会有两种类型的,要显示的数据体为了方便咱们可以用一个object类型,就可以匹配itme不同的数据类型了

第二步,就是利用calendar计算出这个recyclerview的数据源

1.先看今天所在月份的第一天为星期几;
2.填充空白日期;
3.然后循环12次,也就是12个月份;
4.每次月份循环时,看看当前月的天数,然后循环天数,添加数据;
5.每次天数循环后,利用calendar增加1;(最后,注意添加节日)

另外一点

item中的日期布局,我想讲一下,每个item


仿去哪儿选择日期区间控件从0到1的实现_第4张图片
日期item

底色是两半边,因为选中时开始与结束的itme只需要显示半边颜色。

这个布局画一条中心线,然后从中间分开,利用在左在右的布局形式分别设置两个view。节日在选中情况下,会变成开始字样,这时注意变色。

实现过程

利用DialogFragment实现从下往上弹出框效果

在DialogFragment的onCreateView方法中初始化view布局,并且设置相应的参数动画,代码注释已经很清晰。

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    // 去掉默认title
    this.getDialog().requestWindowFeature(Window.FEATURE_NO_TITLE);
    // 外部点击是否可以收起该dialog
    getDialog().setCanceledOnTouchOutside(false);

    Window window = this.getDialog().getWindow();
    if (window != null) {
        //去掉dialog默认的padding
        window.getDecorView().setPadding(0, 0, 0, 0);
        WindowManager.LayoutParams lp = window.getAttributes();
        lp.width = WindowManager.LayoutParams.MATCH_PARENT;
        // 设置高度为屏幕高度的四分之三
        lp.height = UIUtils.getScreenHeight(getActivity()) * 3 / 4;
        //设置dialog的位置在底部
        lp.gravity = Gravity.BOTTOM;
        //设置dialog的动画
        lp.windowAnimations = R.style.AnimBottom;
        window.setAttributes(lp);
        window.setBackgroundDrawable(new ColorDrawable());
    }

    View view = inflater.inflate(R.layout.dialog_choose_date, container, false);

    initView(view);
    initRecyclerView();
    initListener();
    initData();

    return view;
}
初始化recyclerview
final GridLayoutManager layoutManager = new GridLayoutManager(getActivity(), 7);
layoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
    @Override
    public int getSpanSize(int position) {
        // 这个item占有几个位置
        return (mChooseRecyclerAdapter.getItemViewType(position)
                == ChooseDateRecyclerAdapter.TYPE_YEAR_MONTH ? layoutManager.getSpanCount() : 1);
    }
});

mDateRecyclerView.setAdapter(mChooseRecyclerAdapter);
mDateRecyclerView.setLayoutManager(layoutManager);
mDateRecyclerView.setItemAnimator(new DefaultItemAnimator());

如上所示,GridLayoutManager可以设置一行划分为几个区域来显示几个item,然后在setSpanSizeLookup方法中设置当前item类型可以占据几个区域以此来调节item的显示宽度。

如果一行中显示区域不足以显示该item的长度,则会另起一行。所以这个控件用起来是相当灵活而且爽歪歪。

初始化适配器数据

这里其实是整个实现过程中的一个难点,咱们按照上面的思路来实现数据的初始化。

设置当当前月份的第一天。

Calendar calendar = Calendar.getInstance();
calendar.set(Calendar.DAY_OF_MONTH, 1);
// 添加月份数据
mData.add(new ChooseDateBean(1, String.valueOf(calendar.get(Calendar.MONTH) + 1) + "月"));

然后查看第一天是星期几,设置相应的空白数据。

int dayOfWeek = calendar.get(Calendar.DAY_OF_WEEK);
for (int j = 1; j < dayOfWeek; j++) {
    DateOfDayBean bean = new DateOfDayBean();
    bean.setDayOfMonth("");
    mData.add(new ChooseDateBean(2, bean));
}

获取当前月份的天数

private int getDayCountByYearAndMonth(int year, int month) {
    int days = 30;
    switch (month) {
        case 1:
        case 3:
        case 5:
        case 7:
        case 8:
        case 10:
        case 12:
            days = 31;
            break;
        case 4:
        case 6:
        case 9:
        case 11:
            days = 30;
            break;
        case 2:
            if (year % 400 == 0 || (year % 100 != 0 && year % 4 == 0)) {
                days = 29;
            } else {
                days = 28;
            }
            break;
    }
    return days;
}

循环遍历当前月份天数,添加相应的数据(因为代码最终会全部上传,所以这里只写重要部分来讲解)

DateOfDayBean bean = new DateOfDayBean();
bean.setDayOfMonth(String.valueOf(calendar.get(Calendar.DAY_OF_MONTH)));
bean.setCalendar(calendar);

这里我遇到了一个坑,就是计算今天的时候,用了calendar.compareTo(Calendar.getInstance()));这个方法,这个方法其实比较算了时分秒,完全相同的时间戳才会相等,后面该用判断年月日相同就认为是同一天了。

点击逻辑部分

这个部分也是难点之一,点击分为三个部分来进行判断显示:

选了开始,没选结束
选了开始与结束
什么都没有选

其中选了开始与结束,还有一种样式就是开始与结束为同一天,这种需要区分对待。详细见代码。

完整的项目地址如下:
github项目地址,欢迎star

你可能感兴趣的:(仿去哪儿选择日期区间控件从0到1的实现)