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

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

需求

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


选择开始后
选择开始与结束后
开始与结束为同一天

实现思路

第一步,日历主体实现

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

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

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

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

另外一点

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


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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容