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

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


日历

其实我在想，我下次如果又要写一个，只是其中的图标改掉了，那我不得又得写一遍？？不存在的，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

QQ群：559259945

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

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,858评论 25赞 707
  • 最后一丝挣扎
    在生命垂危的那一刻，我看到了它的顽强；在病痛病魔面前，又看到了它的脆弱。 最后的那两声呻吟和一口血浆带走了外婆--...
    Hellym阅读 343评论 0赞 0
  • 认识组织
    近言阅读 266评论 1赞 0