鸿蒙开源组件——自定义各种风格日历

jacksky

发布于 2021-12-3 17:09

1.8w浏览

0收藏

CalendarView

项目介绍

项目名称：CalendarView
所属系列：openharmony的第三方组件适配移植
功能：自定义各种风格日历
项目移植状态：主功能完成
调用差异：无
开发版本：sdk6，DevEco Studio2.2 beta1
基线版本：release v1.0.4

效果演示

鸿蒙开源组件——自定义各种风格日历-鸿蒙开发者社区

安装教程

在moudle级别下的build.gradle文件中添加依赖，在dependencies标签中增加对libs目录下jar包的引用。

// 添加maven仓库
repositories {
    maven {
        url 'https://s01.oss.sonatype.org/content/repositories/snapshots/'
    }
}

// 添加依赖库
dependencies {
    implementation 'com.gitee.chinasoft_ohos:CalendarView:0.0.1-SNAPSHOT'
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

在sdk6，DevEco Studio2.2 beta1下项目可直接运行如无法运行，删除项目.gradle,.idea,build,gradle,build.gradle文件，并依据自己的版本创建新项目，将新项目的对应文件复制到根目录下

使用说明

步骤1:

添加CalendarView到你的xml布局文件

<com.kizitonwose.calendarview.CalendarView
    ohos:id="@+id/calendarView"
    ohos:layout_width="match_parent"
    ohos:layout_height="wrap_content"
    app:cv_dayViewResource="@layout/calendar_day_layout" />1.
2.
3.
4.
5.

创建日的xml布局在 res/layout/calendar_day_layout.xml;

<TextView
    ohos:id="@+id/calendarDayText"
    ohos:layout_width="match_parent"
    ohos:layout_height="match_parent"
    ohos:gravity="center"
    ohos:textSize="16sp"
    tools:text="22" />1.
2.
3.
4.
5.
6.
7.

创建视图容器,作为每个日期单元格的视图容器;

class DayViewContainer(view: View) : ViewContainer(view) {    
    Text text = (Text) component.findComponentById(ResourceTable.Id_calendarDayText);
}1.
2.
3.

为CalendarView提供"DayViewContainer"类型的"DayBinder";

calendarView.setDayBinder(new DayBinder<DayViewContainer>() {
            @Override
            public DayViewContainer create(Component component) {
                return new DayViewContainer(component);
            }

            @Override
            public void bind(DayViewContainer container, CalendarDay day) {
                container.bind(day);
            }
        });1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

步骤 2:

        YearMonth currentMonth = YearMonth.now();
        calendarView.setup(currentMonth, currentMonth.plusMonths(3), LocalDate.now().getDayOfWeek());
        calendarView.scrollToDate(LocalDate.now());1.
2.
3.