Giter VIP home page Giter VIP logo

calendarview's Introduction

自定义日历控件

RecycleView实现,每个itemView cavas绘制,这意味着日历上每个月份很容易的实现自定义绘制。

1. 支持以下功能

  • 日历支持自定义范围展示
  • 月份视图支持自定义行高度,间距,间距颜色设置
  • 月份视图支持自定义绘制
  • 月份视图头,脚布局。头布局支持悬停
  • 月份视图支持固定行和动态行高度展示 (固定行:6行,动态行:根据当前展示的月份计算)
  • 月份视图支持从一周的某个星期开始
  • 月份视图支持纵向,横向滑动(ViewPager模式)
  • 日期支持单选,范围选择,多选
  • 日期支持点击事件拦截
  • 日期支持自定义绘制

2. Example

image

扫码体验

3. 使用

3.1. 集成

implementation 'io.github.sy007:calendar-view:1.2.1'

3.2. 在XML中定义CalendarView

<!--周视图-->
<com.sy007.calendar.widget.WeekView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:layout_marginBottom="10dp"
    sy:wv_content="@array/week_sunday_to_saturday"
    sy:wv_text_color="#333333"
    sy:wv_text_size="13sp" />

<!--日历-->
<com.sy007.calendar.widget.CalendarView
    android:id="@+id/cv_single_calendar_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

3.3. 代码中初始化

3.3.1. 设置月份布局
var selectedDay:CalendarDay?=null
val cvSingleCalendarView:CalendarView
...
//设置月份视图
cvSingleCalendarView.monthViewBinder = object : MonthViewBinder<SingleMonthViewSimple2> {
    override fun create(parent: ViewGroup): SingleMonthViewSimple2 {
        return SingleMonthViewSimple2(parent.context)
    }
    override fun onBind(view: SingleMonthViewSimple2, calendarDay: CalendarDay) {
        view.apply {
            //设置选中的日期
            selected = selectedDay
            onSelectedListener = object : OnSelectedListener {
                override fun onSelected(selected: CalendarDay) {
                    selectedDay = selected
                    //点击日期后滑动到指定日期
                    cvSingleCalendarView.smoothScrollToMonth(selected)
                    tvCurrentSelectedDate.text = selected.formatDate("yyyy-MM-dd")
                }
            }
        }
    }
}
3.3.2. 构建日历展示范围和样式数据模型
val startCalendar = Calendar.getInstance().apply {
    set(Calendar.DAY_OF_MONTH, getActualMinimum(Calendar.DAY_OF_MONTH))
}
val endCalendar = Calendar.getInstance().apply {
    add(Calendar.MONTH, 10)
    set(Calendar.DAY_OF_MONTH, getActualMaximum(Calendar.DAY_OF_MONTH))
}
//初始化日历展示范围和样式
val calendarConfig = CalendarConfig(startCalendar, endCalendar).apply {
  //横向滑动
  orientation = RecyclerView.HORIZONTAL
  //ViewPager滚动模式
  scrollMode = ScrollMode.PAGE
  //固定6行高度
  heightMode = HeightMode.FIXED
  //月份视图上展示额外日期
  isDisplayExtraDay = true
}
3.3.3. 将数据模型设置给日历视图
cvSingleCalendarView.setUp(calendarConfig)

SingleMonthViewSimple2是自定义月份视图,它继承SingleMonthView;你可以在SingleMonthViewSimple2中自定义绘制和处理日期是否可以被选中逻辑。

框架内部还内置了RangeMonthView(范围选择),MultipleMonthView(多选)月份视图基类,根据需求选择一个继承即可。

SingleMonthViewSimple2简略代码如下

class SingleMonthViewSimple2 @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) : SingleMonthView(context, attrs, defStyleAttr) {

    /**
     * 拦截日期选中事件,如果拦截则不会回调日期选中事件
     * 你可以在此方法中拦截不想让用户点击的日期
     * @return true 表示拦截,false 表示不拦截
     */
    override fun onInterceptSelect(calendarDay: CalendarDay): Boolean {
        return super.onInterceptSelect(calendarDay)
    }

    /**
     * 月份日期绘制前调用,你可以在绘制前做一些事
     */
    override fun onDrawMonthBefore(canvas: Canvas, calendarDay: CalendarDay) {
        super.onDrawMonthBefore(canvas, calendarDay)

    }

    /**
     * 月份日期绘制后调用,你可以在绘制后做一些事
     */
    override fun onDrawMonthAfter(canvas: Canvas, calendarDay: CalendarDay) {
        super.onDrawMonthAfter(canvas, calendarDay)
    }

    /**
     * 日期绘制时调用,你可以在这里绘制月份上的日期
     *
     * [calendarDay] 待绘制的日期模型
     * [rect]       日期绘制的范围
     * [isSelected] 该日期是否是选中状态
     */
    override fun onDrawDay(canvas: Canvas, calendarDay: CalendarDay, rect: Rect, isSelected: Boolean) {

    }
}

4. 自定义属性

WeekView(周视图)

属性 类型 描述
wv_weekend_text_color color 周末字体颜色
wv_text_color color 默认字体颜色
wv_text_size color 字体大小
wv_content reference 星期展示的文案
wv_weekend_index reference 周末索引(如果要设置周末字体颜色,需要告诉框架周末在wv_content中的索引位置)

XXMonthView(月份视图)

属性 类型 描述
dividerHeight dimension 月份视图行间距高度
dividerColor color 月份视图行间距颜色
rowHeight dimension 月份视图行高度

5. Docs

6. 更新日志

v1.2.1

修复ScrollMode.PAGE模式下,高度无法自适应问题

v1.2.0

支持脚布局

v1.0.1

修复获取BaseMonthView#rowHeight自定义属性类型不正确问题

calendarview's People

Contributors

sy007 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.