ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

FSCalendar自定义Cell实战:手把手教你实现农历日历与自定义样式

FSCalendar自定义Cell实战:手把手教你实现农历日历与自定义样式 FSCalendar自定义Cell实战手把手教你实现农历日历与自定义样式【免费下载链接】FSCalendarA fully customizable iOS calendar library, compatible with Objective-C and Swift项目地址: https://gitcode.com/gh_mirrors/fs/FSCalendarFSCalendar 是一款完全可定制的 iOS 日历组件库同时支持 Objective-C 和 Swift。本文带你从零实现一个农历日历通过继承自定义 Cell、注册复用类、配置农历副标题一步步掌握 FSCalendar 自定义Cell的完整流程最终做出「公历农历多选连片」的漂亮日历界面。一、先认识 FSCalendar 的细胞FSCalendarCell 每个日期格子本质上都是FSCalendarCell继承自UICollectionViewCell它已经内置了你常用的元素全部在 FSCalendarCell.h 中定义成员作用titleLabel日期主文本如15subtitleLabel副标题农历就放这里shapeLayer选中/今天的高亮形状层eventIndicator事件小圆点指示器官方为自定义 Cell 预留了 3 个重写点见 FSCalendarCell.hinit(frame:)— 添加你的子视图layoutSubviews— 布局子视图configureAppearance— 根据状态占位格、选中态配置外观 只要重写这 3 个方法你就能彻底接管格子的长相。二、跑起来两个官方示例项目仓库自带 Objective-C 与 Swift 两套完整示例Example-Objc/ — 含DIY自定义Cell示例Example-Swift/ — Swift 版对照实现本地克隆仓库运行git clone https://gitcode.com/gh_mirrors/fs/FSCalendar打开FSCalendarExamples.xcworkspace按Command U即可启动示例。三、第一步创建自定义 Cell 类 ✍️参考官方实现 DIYCalendarCell.mSwift 版见 DIYCalendarCell.swift核心就 4 件事1. 声明继承与成员interface DIYCalendarCell : FSCalendarCell property (weak, nonatomic) UIImageView *circleImageView; // 今天高亮圈 property (weak, nonatomic) CAShapeLayer *selectionLayer; // 多选连片背景 end2. 在init中搭建视图把圆形图片插到最底层把选中层selectionLayer插到titleLabel之下并隐藏内置shapeLayer[self.contentView insertSubview:circleImageView atIndex:0]; [self.contentView.layer insertSublayer:selectionLayer below:self.titleLabel.layer]; self.shapeLayer.hidden YES;3. 在layoutSubviews中动态画路径多选连片效果的关键根据选中类型单点 / 左圆角 / 中间满格 / 右圆角切换selectionLayer.path这样连续选中的日期就能粘成一条胶囊。4. 在configureAppearance中处理占位格上月/下月的灰色占位格要调淡文字、隐藏事件点避免视觉干扰if (self.isPlaceholder) { self.titleLabel.textColor [UIColor lightGrayColor]; self.eventIndicator.hidden YES; }四、第二步注册并复用自定义 Cell 在 ViewController 中参考 DIYExampleViewController.m[calendar registerClass:[DIYCalendarCell class] forCellReuseIdentifier:cell];然后通过两个数据源方法把它接进日历方法作用cellForDate:atMonthPosition:取出复用 CellwillDisplayCell:forDate:atMonthPosition:每次显示前刷新内容刷新时遍历visibleCells对每个 Cell 判断今天圈显隐、计算选中类型代码见 DIYExampleViewController.m。五、实现农历日历3 步搞定 1. 用NSCalendar的中文历法系统自带农历能力无需第三方库核心就一行见 LunarFormatter.mself.chineseCalendar [NSCalendar calendarWithIdentifier:NSCalendarIdentifierChinese];2. 区分初一与普通日月初 → 显示正月/二月/冬月veryShortMonthSymbols可识别闰月自动加闰字前缀其他日子 → 查一张初二…三十的映射表完整逻辑不到 20 行可直接参考 LunarFormatter.h 与 LunarFormatter.m。3. 把农历塞进副标题数据源中实现subtitleForDate:返回农历字符串即可- (NSString *)calendar:(FSCalendar *)calendar subtitleForDate:(NSDate *)date { return [self.lunarFormatter stringFromDate:date]; }配合titleForDate:返回今字效果就像系统日历一样优雅。六、进阶给不同日期上不同颜色 不想改 Cell 也能玩出花——FSCalendarDelegateAppearance提供了按日期微调外观的能力DelegateAppearanceViewController.m 展示了全套用法代理方法能做什么fillDefaultColorForDate:某天的填充色fillSelectionColorForDate:选中时的填充色borderDefaultColorForDate:边框颜色borderRadiusForDate:某天的圆角半径返回 0 变方格eventDefaultColorsForDate:事件点颜色可多个支持多彩圆点此外常用配置calendar.allowsMultipleSelection YES; // 多选 calendar.swipeToChooseGesture.enabled YES; // 滑动选区间 calendar.appearance.eventOffset CGPointMake(0, -7); // 事件点位置 calendar.today nil; // 隐藏今天圈DIY时常用七、常见坑尺寸变化不生效⚠️切换月/周模式时 FSCalendar 高度会变必须实现boundingRectWillChange手动更新 frame模板见 DIYExampleViewController.m- (void)calendar:(FSCalendar *)calendar boundingRectWillChange:(CGRect)bounds animated:(BOOL)animated { calendar.frame (CGRect){calendar.frame.origin, bounds.size}; }网络请求返回事件数据后记得调用[calendar reloadData]刷新。更多高级用法可查阅 MOREUSAGE.md。总结 ✅需求方案农历/节假日副标题subtitleForDate: LunarFormatter.m自定义格子外观继承 FSCalendarCell 重写 3 个方法按日期着色FSCalendarDelegateAppearance系列代理区间连片选中自定义selectionLayer路径切换掌握注册 Cell → 数据源供数 → 代理调样式这条主线后无论是农历日历、考勤打卡日历还是票务区间选择器都能快速落地。【免费下载链接】FSCalendarA fully customizable iOS calendar library, compatible with Objective-C and Swift项目地址: https://gitcode.com/gh_mirrors/fs/FSCalendar创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表