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

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

日历 其实我在想,我下次如果又要写一个,只是其中的图标改掉了,那我不得又得写一遍??不存在的,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 图片功能模块相关库

If you want to let your users choose crop ratio dynamically, just do not call wi...

1172
来自专栏Flutter入门到实战

自定义ViewPager实现3D画廊效果

本文源码请看github地址:https://github.com/AweiLoveAndroid/My3DViewPager

5161
来自专栏向治洪

listview的工作原理

/**      * Unsorted views that can be used by the adapter as a convert vi...

22210
来自专栏闵开慧

jquery中各个ajax实例操作

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf...

3318
来自专栏ml

nautilus出现一闪而过现象

linux相关问题:   1.这几天在使用乌班图时,出现文件夹打开一闪而过现象,于是我试着使用命令行来启动:    sudo nautilus   出现下面这一...

39410
来自专栏向治洪

android来电归属地提醒

现在市面上常用的一些拨号软件的一个功能,来电归属地。拨号的时候,会在拨号界面出现一个号码归属地的小框框。效果如下:而且这个小窗体还可以自定义风格,并且可以自由移...

2557
来自专栏非著名程序员

关于 Android 实现滑动返回的几种方法总结

关于 Android 实现滑动返回的方法,网上有很多种,实现的方式也都各不一样。有用 SwipeBackLayout 开源库的,有用 SlidingPaneLa...

1.2K9
来自专栏林冠宏的技术文章

三行代码接入,社交软件打字时底下弹出的表情布局,自定义ViewPager+页面点标+各种功能的android小框架。

(转载请声明出处:https://cloud.tencent.com/developer/user/1148436/activities) 前言:       ...

3449
来自专栏java初学

android入门 — ProgressDialog/DatePickerDialog/TimePickerDialog

29411
来自专栏郭霖

Android ListView工作原理完全解析,带你从源码的角度彻底理解

在Android所有常用的原生控件当中,用法最复杂的应该就是ListView了,它专门用于处理那种内容元素很多,手机屏幕无法展示出所有内容的情况。ListVie...

38110

扫码关注云+社区

领取腾讯云代金券