自定义日历，随心所欲的打造自己的日历选择器

最新推荐文章于 2023-12-17 20:14:25 发布
最新推荐文章于 2023-12-17 20:14:25 发布
阅读量542 收藏
点赞数
分类专栏： Android 文章标签： 日历 自定义滚动视图 listView滚动 自定义日历 xml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23915507/article/details/76685651
版权

不多说，先上图，第一次录屏，剪切的有点烂，将就看

title显示日期和星期，下面三个滚动控件，还有三个圆圈指示

正文开始

1.先看布局图
清楚明了

我们可以清晰的看到视图的结构

    1.头部两个TextView，左边是日期，右边是星期
    2.下方三个ListView ，每个ListView中间有个选择指示的圆

下面是xml的布局代码 ， 不想看代码的可以略过

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:background="@color/black"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_margin="30dp"
        android:background="@drawable/shape_all_round"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:layout_marginTop="15dp"
            android:layout_gravity="center_horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/show_title_year_month_day"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <TextView
                android:id="@+id/show_title_week"
                android:layout_marginLeft="20dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

        </LinearLayout>

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="200dp">
            <RelativeLayout
                android:layout_margin="10dp"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="match_parent">

                <ListView
                    android:id="@+id/list_view_year"
                    android:divider="@null"
                    android:scrollbars="none"
                    android:listSelector="@color/color_null"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"/>
                <TextView
                    android:background="@drawable/shap_calendar_list_btm_plastic"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" />

                <ImageView
                    app:srcCompat="@drawable/ic_round"
                    android:layout_centerInParent="true"
                    android:layout_width="80dp"
                    android:layout_height="80dp" />
            </RelativeLayout>
            <RelativeLayout
                android:layout_margin="10dp"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="match_parent">

                <ListView
                    android:id="@+id/list_view_month"
                    android:divider="@null"
                    android:scrollbars="none"
                    android:listSelector="@color/color_null"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"/>

                <TextView
                    android:background="@drawable/shap_calendar_list_btm_plastic"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" />

                <ImageView
                    app:srcCompat="@drawable/ic_round"
                    android:layout_centerInParent="true"
                    android:layout_width="80dp"
                    android:layout_height="80dp" />

            </RelativeLayout>
            <RelativeLayout
                android:layout_margin="10dp"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="match_parent">

                <ListView
                    android:id="@+id/list_view_day"
                    android:divider="@null"
                    android:scrollbars="none"
                    android:listSelector="@color/color_null"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"/>
                <TextView
                    android:background="@drawable/shap_calendar_list_btm_plastic"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" />
                <ImageView
                    app:srcCompat="@drawable/ic_round"
                    android:layout_centerInParent="true"
                    android:layout_width="80dp"
                    android:layout_height="80dp" />

            </RelativeLayout>
        </LinearLayout>

    </LinearLayout>

</LinearLayout>

上面的圆形图片用的是svg格式的矢量图，不会用svg的小伙伴，可以将图片替换为png的图片，把app:srcCompat 改成 android:src就行了
shap_calendar_list_btm_plastic.xml 这就是做一个毛玻璃的效果，从上下开始到中间，透明度逐渐变高，就能显示出类似滚轮的效果来，下面贴出代码，顺便把color的代码一起贴出来

布局文件的背景

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white"/>
    <corners android:radius="15dp"/>
</shape>

这是shap_calendar_list_btm_plastic.xml的

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="90"
        android:startColor="@color/white_btm_f"
        android:centerColor="@color/white_btm_0"
        android:endColor="@color/white_btm_f"/>

</shape>

这是color的

    <color name="white_btm_0">#00ffffff</color>
    <color name="white_btm_1">#11ffffff</color>
    <color name="white_btm_2">#22ffffff</color>
    <color name="white_btm_3">#33ffffff</color>
    <color name="white_btm_4">#44ffffff</color>
    <color name="white_btm_5">#55ffffff</color>
    <color name="white_btm_6">#66ffffff</color>
    <color name="white_btm_7">#77ffffff</color>
    <color name="white_btm_8">#88ffffff</color>
    <color name="white_btm_9">#99ffffff</color>
    <color name="white_btm_a">#aaffffff</color>
    <color name="white_btm_b">#bbffffff</color>
    <color name="white_btm_c">#ccffffff</color>
    <color name="white_btm_d">#ddffffff</color>
    <color name="white_btm_e">#eeffffff</color>
    <color name="white_btm_f">#ffffffff</color>

2.java代码部分

适配器


/**
 * 适配器
 * Created by zcy on 2017/8/2.
 */
public class CalendarListAdapter extends BaseAdapter {

    private Context mContext;
    private List<Integer> list;
    //listView中显示的item个数
    private int count;
    //最小个数，如果count比这个值小，将会默认使用MIN_COUNT
    private static final int MIN_COUNT = 3;

    public static final int TYPE_YEAR = 10;//年
    public static final int TYPE_MONTH = 11;//月
    public static final int TYPE_DAY = 12;//日

    private int type;

    public CalendarListAdapter(Context mContext, List<Integer> list , int count , int type) {
        this.mContext = mContext;
        this.list = list;
        this.count = count;
        this.type = type;
    }

    public CalendarListAdapter(Context mContext) {
        this.mContext = mContext;
    }

    @Override
    public int getCount() {
        return null == list ? 0 : list.size();
    }

    @Override
    public Object getItem(int i) {
        return null;
    }

    @Override
    public long getItemId(int i) {
        return 0;
    }

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        int height = viewGroup.getHeight();
        TextView textView = new TextView(mContext);
        textView.setWidth(ViewGroup.LayoutParams.MATCH_PARENT);
        textView.setHeight(count < MIN_COUNT ? height/MIN_COUNT : height/count);
        textView.setGravity(Gravity.CENTER);
        textView.setText(list.get(i) < 0 ? "" :new StringBuilder().append(list.get(i)).append(getTypeName()));
        return textView;
    }

    private String getTypeName(){
        String name =  null;
        switch (type){
            case TYPE_YEAR:
                name = "年";
                break;
            case TYPE_MONTH:
                name = "月";
                break;
            case TYPE_DAY:
                name = "日";
                break;
            default:
                name = "";
                break;
        }
        return name;
    }
}

实现代码


/**
 * 日历fragment
 * Created by zcy on 2017/8/2.
 */

public class CalendarFragment extends BaseFragment {

    public static CalendarFragment getInstance(){
        return new CalendarFragment();
    }

    // 年月日 ， 星期几
    @BindView(R.id.show_title_year_month_day)
    TextView titleYMD;
    @BindView(R.id.show_title_week) TextView titleNeek;
    //年份选择 ， 月份选择 ，天数选择
    @BindView(R.id.list_view_year)
    ListView listViewYear;
    @BindView(R.id.list_view_month) ListView listViewMonth;
    @BindView(R.id.list_view_day) ListView listViewDay;

    //年份listView中显示的第一个item编号
    private int firstVisibleYearItem;
    //月份listView中显示的第一个item编号
    private int firstVisibleMonthItem;
    //天数listView中显示的第一个item编号
    private int firstVisibleDayItem;

    private List<Integer> listYear;
    private List<Integer> listMonth;
    private List<Integer> listDay;

    //初始年份和结束年份
    private int firstYear;
    private int lastYear;




    //年月日的适配器
    private CalendarListAdapter yearAdapter;
    private CalendarListAdapter monthAdapter;
    private CalendarListAdapter daydApter;

    //日历对象
    private Calendar calendar;
    //当前时间，年，月，日，周
    private int currentTimeYear;
    private int currentTimeMonth;
    private int currentTimeDay;



    @Override
    protected int getLayoutId() {
        return R.layout.fragment_calendar;
    }

    @Override
    protected void initViews() {
        initYearListView();
        initMonthListView();
        initDayListView();
        listViewYear.setSelection(listYear.indexOf(currentTimeYear)-1);
        listViewMonth.setSelection(listMonth.indexOf(currentTimeMonth)-1);
        listViewDay.setSelection(listDay.indexOf(currentTimeDay)-1);
        upData(false);
    }

    @Override
    protected void init() {
        initYear();
        initMonth();
        calendar = Calendar.getInstance();
        currentTimeYear = calendar.get(Calendar.YEAR);
        currentTimeMonth = calendar.get(Calendar.MONTH)+1;
        currentTimeDay = calendar.get(Calendar.DAY_OF_MONTH);
        upData(false);
    }

    //初始化天数的listView
    private void initDayListView() {
        daydApter = new CalendarListAdapter(getContext() , listDay , 0 , CalendarListAdapter.TYPE_DAY);
        listViewDay.setAdapter(daydApter);
        listViewDay.setSelected(true);
        listViewDay.setOnScrollListener(new AbsListView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(AbsListView absListView, int i) {
                if (i == SCROLL_STATE_IDLE){
                    listViewDay.setSelection(firstVisibleDayItem);
                    calendar.set(Calendar.DAY_OF_MONTH ,listDay.get(firstVisibleDayItem+1));
                    upData(false);
                }
            }

            @Override
            public void onScroll(AbsListView absListView, int i, int i1, int i2) {
                firstVisibleDayItem = i;
            }
        });
    }
    //初始化月份的listView
    private void initMonthListView() {
        monthAdapter = new CalendarListAdapter(getContext() , listMonth , 0 , CalendarListAdapter.TYPE_MONTH);
        listViewMonth.setAdapter(monthAdapter);
        listViewMonth.setSelected(true);
        listViewMonth.setOnScrollListener(new AbsListView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(AbsListView absListView, int i) {
                if (i == SCROLL_STATE_IDLE){
                    listViewMonth.setSelection(firstVisibleMonthItem);
//                    upDayList();
                    calendar.set(Calendar.DAY_OF_MONTH , 1);
                    calendar.set(Calendar.MONTH , listMonth.get(firstVisibleMonthItem+1)-1);
                    upData(true);
                }
            }

            @Override
            public void onScroll(AbsListView absListView, int i, int i1, int i2) {
                firstVisibleMonthItem = i;
            }
        });

    }
    //初始化年份的listView
    private void initYearListView() {
        yearAdapter = new CalendarListAdapter(getContext() , listYear , 0 , CalendarListAdapter.TYPE_YEAR);
        listViewYear.setAdapter(yearAdapter);
        listViewYear.setSelected(true);
        listViewYear.setOnScrollListener(new AbsListView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(AbsListView absListView, int i) {
                if (i == SCROLL_STATE_IDLE){
                    listViewYear.setSelection(firstVisibleYearItem);
//                    upDayList();
                    calendar.set(Calendar.DAY_OF_MONTH , 1);
                    calendar.set(Calendar.YEAR , listYear.get(firstVisibleYearItem + 1));
                    upData(true);
                }
            }

            @Override
            public void onScroll(AbsListView absListView, int i, int i1, int i2) {
                //此处i代表屏幕中显示的第一个item
                firstVisibleYearItem = i;
            }
        });
    }


    /**
     * 有任何动作之后刷新数据和界面
     * @param isNotify 是否对天数的适配器进行刷新
     */
    private void upData(boolean isNotify){
        initDay();
        if (isNotify && null != daydApter){
            daydApter.notifyDataSetChanged();
            //这里须要在刷新之后将selection设置为0，否则在31号的时候调整月份，会出现显示异常的情况
            listViewDay.setSelection(0);
        }
        if (null != calendar){
            if (null != titleYMD)titleYMD.setText(getYMD());
            if (null != titleNeek)titleNeek.setText(getNeek());

        }
    }

    //从Calendar中取出年月日并拼接成想要的格式
    private String getYMD(){
        int year = calendar.get(Calendar.YEAR);
        int month = calendar.get(Calendar.MONTH);
        int day = calendar.get(Calendar.DAY_OF_MONTH);
        StringBuilder sb = new StringBuilder();
        if (year >= 1900){
            sb.append(year).append("年");
            if (month >= 0 && month <12){
                sb.append(month+1).append("月")
                        .append(day);
            }
        }
        return sb.toString();
    }
    //从Calendar中取出星期数，并返回对应的名称
    private String getNeek(){
        int dayOfNeek = calendar.get(Calendar.DAY_OF_WEEK);
        String neek = null;
        switch (dayOfNeek){
            case 1:
                neek = "星期日";
                break;
            case 2:
                neek = "星期一";
                break;
            case 3:
                neek = "星期二";
                break;
            case 4:
                neek = "星期三";
                break;
            case 5:
                neek = "星期四";
                break;
            case 6:
                neek = "星期五";
                break;
            case 7:
                neek = "星期六";
                break;
            default:
                neek = "";
                break;
        }
        return neek;
    }

    //初始化天数list数据
    private void initDay(){
        //指定年份指定月份有多少天
        int actualMaximum = calendar.getActualMaximum(Calendar.DATE);
        if (null == listDay)listDay = new ArrayList<>();
        else listDay.clear();
        listDay.add(-1);
        for (int i = 1 ; i <= actualMaximum ; i++){
            listDay.add(i);
        }
        listDay.add(-1);
    }

    //初始化年份相关
    private void initYear() {
        firstYear = 2000;
        lastYear = 2017;
        if (null == listYear) listYear = new ArrayList<>();
        else listYear.clear();
        listYear.add(-1);
        for (int i = firstYear ; i <= lastYear ; i++){
            listYear.add(i);
        }
        listYear.add(-1);
    }

    //初始化月份
    private void initMonth(){
        if (null == listMonth) listMonth = new ArrayList<>();
        else listMonth.clear();
        listMonth.add(-1);
        for (int i = 0 ; i < 12 ; i++){
            listMonth.add(i+1);
        }
        listMonth.add(-1);
    }


}

这里我将逻辑全写在Fragment里面了，哪里需要用的时候，直接加载这个fragment就行了，还有个BaseFragment,也贴个代码吧


/**
 * baseFragment
 * Created by zcy on 2017/8/2.
 */
public abstract class BaseFragment extends Fragment{

    /**
     * 这个方法提供初始化的布局id
     * @return 布局id
     */
    protected abstract int getLayoutId();
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(getLayoutId(),container,false);
        ButterKnife.bind(this,view);
        initViews();
        return view;
    }
    /**
     * 初始化视图控件，代替了onCreateView，不需要再重写onCreateView在该方法里面写具体实现就可以了
     */
    protected abstract void initViews();

    /**
     * 初始化成员属性，不需要手动调用，只需要重写内容即可
     */
    protected abstract void init();

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        init();
    }

}

有点乱，也不是很复杂，需要用到的可以自己整理一下；基本全局就对一个Calendar对象操作，然后在合适的地方刷新页面就行了；还有疑问的小伙伴可以私信我

Android-ZCY
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义日历
10-17
很炫的自定义日历功能 支持手势操作
自定义日历(一)
hw5230的博客
01-04 695
顺便提一句，支持动画切换月份的日历控件时在一个窗口的基础上切换的，感兴趣的同学也可以实现5个月份的切换，就像一些音乐播放器主页上的音乐提示一样，是一个轮播的形式。日历同意可以以这样的形式来切换，这样的功能我已经实现了，如果感兴趣的同学可以私聊，demo中的代码在完善优化下，就可以做出这个效果，基于widget完全绘制的日历可能更合适这样的切换，label的堆砌在切换的时候可能会有效率的问题，这就取决于你的机器了，一般的机器还都是没有问题的，除非你要做对效率要求很高的程序。
前端之vue 封装自定义日历
最新发布
baidu_33164415的博客
12-17 1540
前端之vue 封装自定义日历
vue实现自定义日历
qq_29677283的博客
05-10 4430
vue日历面板、vue日历、自定义日历。
照片日历制作软件服务器端,Radicale搭建CalDAV日历服务
weixin_35426348的博客
07-31 1459
由于google 日历已经被墙，qq exchange日历经常无法同步，因此萌发了自建calDAV的念头；网上搜索了一番，比较轻量级的就是radicale了。假定存放目录为：/home/zc/calDav/ , 运行用户为zc，则：#!bin/bashecho "begin to install radicale calDAV."sudo pip install radicalesudo pip ...
CalendarView：由RecyclerView驱动的高度可定制的Android日历库
02-21
自定义日历视图-随心所欲地使用各种功能。 -使用任意一天作为一周的第一天。 水平或垂直滚动​​模式。 -添加任何类型的页眉/页脚。 使用日期轻松滚动到任何日期或月份视图。 由于CalendarView是从RecyclerView扩展...
My_Luncher
06-20
总的来说，My_Luncher作为一个手机桌面应用，其核心价值在于提供丰富的自定义选项，让用户能够打造出极具个性的手机界面。通过Luncher文件中的各个组件，用户可以随心所欲地调整手机的外观和功能，创造出既美观又...
网址网站导航整站源码
03-19
.#增加模版选择器模块，规范模版制作，方便站长用户使用多种模版； .#优化首页搜索框调用和配置，使用户可以快速填入搜索联盟代码； .#修改广告调用模式，用户可直接写入代码，增强可操控性； .#新增站长需要的闹钟...
鱼鱼桌面秀 XDeskShow V2
12-13
总之，鱼鱼桌面秀 XDeskShow V2 是一款集实用与美观于一体的桌面增强软件，它通过丰富的桌面小部件、壁纸管理和动画效果，让用户可以随心所欲地打造属于自己的个性化桌面。通过安装名为“鱼鱼桌面秀 XDeskShow V2....
Excel百宝箱
10-27
公农双历查询】：生成多功能日历，可以查询所有节、假日和农历 【高级定位】：多功能选择（查找）工具。可以选择大于某值或者小于某值或者在某范围之间的值，文本定位时支持通配符。还可以按格式查找/定位 【背景...
自定义日历控件
11-27
在Android平台3.0中才新增了日历视图控件，可以显示网格状的日历内容，那么对于Android 3.0以下的版本要使用日历控件只能借助第三方，目前这个是android2.2的日历没有携带一年的第几周，这个是我自定义携带一年的第几周的日历控件
Android自定义PopupWindow日历 日期时间选择器 可自由搭配年月日时分显示
03-19
Android自定义PopupWindow日历 日期时间选择器 可自由搭配年月日时分显示，可以设置只显示年月日，不显示时分等，
Android自定义简易日期选择器
09-06
Android自定义简易日期选择器，可自定义背景格式，可滑动选择日期，该项目是用Android studio写的，如果是eclipse用户请改成eclipse格式再使用。
极具个性化的【自定义日历】（英式）
06-20
最近笔者在实习的过程中，需要做一个极具个性化的【自定义日历】（英式），来记录你的【学习计划】和【完成情况】，纯干货，超详细喔~O(∩_∩)O~
Android自定义组件之精美日历实现（内容、样式可扩展）
08-18
Android自定义组件之日历控件-精美日历实现（内容、样式可扩展），参考博客：http://blog.csdn.net/daijin888888/article/details/47752723
PostgreSQL 时间/日期 常用函数
03-31 1219
PostgreSQL支持SQL标准中所有的日期和时间类型 日期/时间类型 名字 描述 timestamp [ (p) ] [ without time zone ] 日期和时间(无时区) times...
PostgreSQL时间格式及相关函数实践
dimawei2225的博客
11-16 1525
在创建表的时候，有客户需要将时间转为字符串，而且要求了具体的格式，如：20181115101010001。方便记录数据的更新时间，貌似是给Mysql使用，当时就很蛋疼，时间格式存储子啊数据库中就是varchar，导出来是字符串，导入到那边，是什么格式不是自动就转好了吗。但是没办法，还是得听客户的。解决办法如下： apple=# create table test_time(id i...
HTML+JavaScript+css 自定义日历列表
随风潜入夜，不白头
05-23 570
效果图： html的body： <!-- 日期测试 --> <h2 style="display: none;" id="calendar_year">2020</h2> <div class="date_list"> <div class="to_month date_click" id="calendar_month"></div> <ul id="days"></ul>
【vue】 实现 自定义 Calendar 日历
weixin_50450473的博客
11-14 1584
{{ date.split('年')[0]+'-'+date.split('年')[1].replace('月','')}}
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值