用这个,自定义日历控件各种效果都不是问题

最近遇到要做一个日历控件,给的效果图是这样的:

日历 其实我在想,我下次如果又要写一个,只是其中的图标改掉了,那我不得又得写一遍??不存在的,tan90。

生无可恋


不知道大家有没有发现,其实所有日历都大同小异,不同的就是每个日期上的图标,文字大小,颜色,反正就是每个日期的样式不对,就好像我上面图片上框出来的那些。 既然知道,那么我们为何不把一些通用的封装起来,把不同的抽取出来,作为下次调用呢??说干就干

呵呵

思路篇:


我这里是基于ListView写的,既然是日历控件,那么每个条数是需要通过计算得出来的,在我们开始写之前,我先贴一些工具代码出来,方便使用:

获取某天的那个月,一共有几天

/**
     * 获取某天的那个月,一共有几天
     *
     * @param date
     * @return
     */
    public static int getDayCountOfMonth(Date date)
    {
        Calendar cal = Calendar.getInstance();
        cal.set(Calendar.YEAR, date.getYear() + 1900);
        cal.set(Calendar.MONTH, date.getMonth());//Java月份才0开始算 
        return cal.getActualMaximum(Calendar.DATE);
    }

根据输入的年月日,得到一个Date对象

/**
     * 根据输入的年月日,得到一个Date对象
     *
     * @param year
     * @param month
     * @param day
     * @return
     */
    public static Date getDate(int year, int month, int day)
    {
        Date date = new Date();
        date.setYear(year - 1900);
        date.setMonth(month - 1);
        date.setDate(day);
        return date;
    }

根据日期取得星期几

/**
     * 根据日期取得星期几
     */
    public static String getWeek(Date date)
    {
        String[] weeks = {"星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"};
        Calendar cal = Calendar.getInstance();
        cal.setTime(date);
        int week_index = cal.get(Calendar.DAY_OF_WEEK) - 1;
        if (week_index < 0)
        {
            week_index = 0;
        }
        return weeks[week_index];
    }

有了这三个工具代码,其实我们就解决了好多问题了。


因为是基于ListView改造,所以我们这个ListView肯定不可以滚动,所以我们需要加上这段代码,让ListView自适应我们的Item总和的高度:

public void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
    int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2, MeasureSpec.AT_MOST);
    super.onMeasure(widthMeasureSpec, expandSpec);
}

还有,我们必须禁用外部setAdapter,然后设置我们自己定义的Adapter:

@Override
public void setAdapter(ListAdapter adapter)
{   //禁止外部设置adapter
     // super.setAdapter(adapter);
}
public void setAdapter(Adapter adapter)
{
     outAdapter = adapter;
 }

当我们在设置日期的时候,要动态计算出日期的总条数,每条7天,刚好一个礼拜。

/**
     * 根据传入的Date显示对应的时间日历
     *
     * @param date
     */
    public void setDate(Date date)
    {
        month.clear();
        nowDate = new Date(date.getTime());//这里做一个备份,以备下次比较使用
        int dayCount = getItemDayCount(date);//获取当月总共几天
        int itemCount = (dayCount % 7 == 0) ? (dayCount / 7) : (dayCount / 7) + 1;
        date.setDate(1);//设置日历时间,到当月1号。
        for (int a = 0; a < itemCount; a++)//动态添加总共有几个横条
        {
            month.add(new WeekBean(new Date(date.getTime())));
            date.setDate(date.getDate() + 7);//加七天
        }
        adapter.notifyDataSetChanged();
    }

我们需要自己自定义一个Adapter,因为每个View的实例化与数据的整合需要调用者自己去实现。所以我们这个Adapter这样定义:

public static abstract class Adapter
{
        /**
         * 实例化UI,每个日期的UI碎片
         *
         * @param inflater
         * @param parent
         * @return
         */
        public abstract View getView(LayoutInflater inflater, ViewGroup parent);

        /**
         * 对每个UI碎片与数据整合,以及根据不同的业务需求做不同的处理方式
         *
         * @param holder       UI碎片的ViewHolder
         * @param date         当前这个UI碎片的日期
         * @param nowMonthDate 当前月份的日期
         */
        public abstract void onBindViewHolder(BaseAdapter.Holder holder, Date date, Date nowMonthDate);
}

当然,我们在这里也有一个自己的实现,在里面内置了一个DefaultAdapter

public static class DefaultAdapter extends Adapter
{
        /**
         * 实例化UI,每个日期的UI碎片
         *
         * @param inflater
         * @param parent
         * @return
         */
        @Override
        public View getView(LayoutInflater inflater, ViewGroup parent)
        {
            View view = inflater.inflate(R.layout.item_date_tv, parent, false);
            return view;
        }

        /**
         * 对每个UI碎片进行初始化
         *
         * @param holder       UI碎片的ViewHolder
         * @param date         当前这个UI碎片的日期
         * @param nowMonthDate 当前月份的日期
         */
        @Override
        public void onBindViewHolder(BaseAdapter.Holder holder, Date date, Date nowMonthDate)
        {
            TextView textView = holder.get(R.id.tv);
            textView.setText(date.getDate() + "");

            if (date.getMonth() == nowMonthDate.getMonth())//如果是当前月
            {
                textView.setTextColor(Color.parseColor("#353535"));
            } else
            {
                textView.setTextColor(Color.parseColor("#999999"));
            }
        }
}

好了,废话不多说,给你们上个图,这只是默认的样式,只需要修改外部的item的view,配合onBindViewHolder这个方法,可以达到很多变得显示效果:

上图


怎么使用:

有人说,这个太难看,我想在文字右上角加一个红点点 OK,没问题,我们首先自己定义一个日期的Item;

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#ffffff"
    android:gravity="center_horizontal"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:paddingBottom="15dp"
        android:paddingTop="15dp"
        android:text="5"
        android:textColor="#353535"
        android:textSize="15sp" />

    <View
        android:id="@+id/point"
        android:layout_width="15dp"
        android:layout_height="15dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/red_point" />
</LinearLayout>

效果图

然后,我们自己设置一个Adapter:

      date_picker.setAdapter(object : Adapter()
        {
            override fun getView(inflater: LayoutInflater , parent: ViewGroup): View
            {
                //这里使用到我们自定义的item
                val view = inflater.inflate(R.layout.item_layout_date1 , parent , false)
                return view
            }
            
            override fun onBindViewHolder(holder: BaseAdapter.Holder , date: Date , nowMonthDate: Date)
            {
                val textview = holder.get<TextView>(R.id.tv)
                val point = holder.get<View>(R.id.point)
                // 为item上的TextView设置文字为当月的几号
                textview.text = "${date.date}"
            }
        })

我们来看一下效果

加红点

有人又说,我想当月双数天显示红点,不是当月的,或者是当月但是是单数天的不显示,当月的文字是黑色,不是当月的文字是灰色、 OK,没问题。我们这里来改造一下:

        date_picker.setAdapter(object : Adapter()
        {
            override fun getView(inflater: LayoutInflater , parent: ViewGroup): View
            {
                val view = inflater.inflate(R.layout.item_layout_date1 , parent , false)
                return view
            }
            
            override fun onBindViewHolder(holder: BaseAdapter.Holder , date: Date , nowMonthDate: Date)
            {
                val textview = holder.get<TextView>(R.id.tv)
                val point = holder.get<View>(R.id.point)
                textview.text = "${date.date}"
                
                if (date.month == nowMonthDate.month)
                {
                    textview.setTextColor(Color.parseColor("#353535"))
                    if ((date.date + 1) % 2 != 0)
                    {
                        point.visibility = View.VISIBLE
                    } else
                    {
                        point.visibility = View.GONE
                    }
                } else
                {
                    textview.setTextColor(Color.parseColor("#999999"))
                    point.visibility = View.GONE
                }
            }
        })

显示效果:

效果图

有人又说了,我想获取每个Item的点击事件,以便我后来处理 OK,没问题

        date_picker.setonDateItemClickListener { view , date ->
            Toast.makeText(this , "${date.month + 1}.${date.date}" , Toast.LENGTH_SHORT).show()
        }

点击事件

有人可能会问,你这个控件,怎么切换日期啊??还有我怎么知道当前日期? OK,我们首先在界面上加两个按钮,上一个月,下一个月: 然后如下代码则可以完成你的需求:

pro_mon.setOnClickListener {
    date_picker.date = date_picker.date.apply {
        month -= 1
    }
}
next_mon.setOnClickListener {
    date_picker.date = date_picker.date.apply {
        month += 1
    }
}

效果图:

效果图


写的好匆忙,写的乱七八糟的,下次要整理一下,多放一些其他效果的示例图。 GitHub地址:https://github.com/xiaolei123/SimpleDatePicker

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏吴小龙同學

Android MVP 实例

Android MVP 实例 简单的请求天气功能,演示Android MVP是如何使用的 效果预览 image.png 准备 MVP流程 ? 说明: 步骤...

2865
来自专栏androidBlog

装饰者模式及其应用

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/details/...

692
来自专栏技术小黑屋

自定义支持读取XML属性的View

在Android中,添加一个View很简单,简单的你可以简简单单地使用xml和一部分简单的java代码就可以搞定。 比如这样

832
来自专栏Android干货

Android项目实战(十六):QQ空间实现(一)—— 展示说说中的评论内容并有相应点击事件

1437
来自专栏从零开始学 Web 前端

11 - JavaSE之GUI

PS: Panel 的 setBounds 方法中设置的位置大小是相对于相对装入的 Frame 窗口位置和大小的。

1015
来自专栏曾大稳的博客

Android LayoutInflater.inflate()源码流程分析

  我们在根据layout文件得到View的时候都会使用LayoutInflater.from(mContext).inflate().下面我们来分析这个获取V...

651
来自专栏一个会写诗的程序员的博客

第14章 使用Kotlin 进行 Android 开发(2)

我们使用 fastjson 来解析这个数据。在 app 下面的 build.gradle中添加依赖

732
来自专栏Android开发指南

1.viewpager

35213
来自专栏mukekeheart的iOS之旅

Andriod基础——Adapter类

Android是完全遵循MVC模式设计的框架,Activity是Controller,layout是View,因为layout五花八门,很多数据都不能直接绑定上...

2915
来自专栏developerHaoz 的安卓之旅

手把手教你从零开始做一个好看的 APP - Day four

本文为 手把手教你从零开始做一个好看的 APP - Day four ,如果想看该系列的其他文章,请点击以下连接

762

扫码关注云+社区