Android 类似于仿日历选择 区间变色

最近一个朋友问到我一个小需求,类似于一个日历布局的页面,需要根据服务端传递过来的起始与结束日期将起始与结束日期变颜色,区间也变换颜色,就写的一个小demo,刚好分享一下:最下面有提供demo, 设置的0积分,后面平台可能会变动, 有需要的评论区留言邮箱,我发邮箱

不说了,还是先上效果图:

整个布局使用的是一个网格布局.

主要分为4个部分,

1: 白色区域

2:开始点

3:结束点

4:中间部分

其实开始和结束部分目前颜色是相同的.但是为了防止需求改动,就分开了

封装一个实体类,里面存了每个条目的标识与文本

private int flag;
    private String text;
    public RangeBean(int flag,String text){
        this.flag = flag;
        this.text = text;
    }
    public int getFlag() {
        return flag;
    }
    public void setFlag(int flag) {
        this.flag = flag;
    }
    public String getText() {
        return text;
    }
    public void setText(String text) {
        this.text = text;
    }      

写一个全局的常量参数,来作为固定的标识,直接写,防止错乱,记不住

//外面
    public final static int BOX_OUT = 1;
    //开始
    public final static int BOX_START = 2;
    //结束
    public final static int BOX_END = 3;
    //里面
    public final static int BOX_IN = 4;      

在适配器中封装一个方法,来根据不同标识返回不同的颜色,在适配器的onBindViewHolder中给条目布局设置背景颜色

private int getBoxBgColor(int flag) {
        int boxBgColor = R.color.box_out;
        //根据不同的标识符来返回颜色
        switch (flag) {
            case RangeBean.BOX_OUT:
                boxBgColor = R.color.box_out;
                break;
            case RangeBean.BOX_START:
                boxBgColor = R.color.box_start_end;
                break;
            case RangeBean.BOX_END:
                boxBgColor = R.color.box_start_end;
                break;
            case RangeBean.BOX_IN:
                boxBgColor = R.color.box_in;
                break;
        }
        return boxBgColor;
    }
    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
        holder.tvNum.setText(rangeBeanList.get(position).getText());
        holder.tvNum.setBackgroundColor(context.getResources().getColor(getBoxBgColor(rangeBeanList.get(position).getFlag())));
    }      

数据默认全部为没选择,北京全部为白色

/**
     * 初始化数据
     */
    private void initData() {
        //默认全部白色背景
        for (int i = 0; i < 30; i++) {
            rangeList.add(new RangeBean(RangeBean.BOX_OUT, (i + 1) + ""));
        }
        rangeAdapter.notifyDataSetChanged();
    }      

在点击时,给每个指定的条目变换指定的颜色,详情看注释

/**
     * 绘制view
     */
    private void renderView(int startDate, int endDate) {
        //先全部置为白色
        for (int i = 0; i < rangeList.size(); i++) {
            rangeList.get(i).setFlag(RangeBean.BOX_OUT);
        }
        rangeAdapter.notifyDataSetChanged();
        //开始绘制当前的点(因为数组下标是从0开始的,所以当前输入的值减1),算作是开始和结束的点
        rangeList.get(startDate - 1).setFlag(RangeBean.BOX_START);
        rangeList.get(endDate - 1).setFlag(RangeBean.BOX_END);
        //从输入的值的位置(输入值的位置比下标往后一位),也就是说下标的后一位,算作是区间里面,到结束点下标的前一个
        for (int i = startDate; i < endDate - 1; i++) {
            rangeList.get(i).setFlag(RangeBean.BOX_IN);
        }
        //这个区间刷新
        rangeAdapter.notifyItemRangeChanged(startDate - 1, endDate - startDate + 1);
    }      

下载地址:

Android 仿日历区间选择变色