如何缩小UICalendarView中日历日期的水平与垂直间距？

问题描述 #

通过YouTube视频教程实现了基于UICalendarView的SwiftUI视图，但日历日期单元格之间的水平、垂直间距过大，不符合需求，需要缩小附图中标注的间距。

附图：

原代码：

import SwiftUI

struct CalendarView: UIViewRepresentable {
    func makeUIView(context: Context) -> UICalendarView {
        let calendarView = UICalendarView()
        calendarView.delegate = context.coordinator
        calendarView.calendar = Calendar(identifier: .gregorian)
        calendarView.availableDateRange = DateInterval(start: .distantPast, end: .distantFuture)
        calendarView.translatesAutoresizingMaskIntoConstraints = false
        calendarView.fontDesign = .rounded
        return calendarView
    }
    
    func makeCoordinator() -> Coordinator {
        return Coordinator(parent: self)
    }
    
    func updateUIView(_ uiView: UICalendarView, context: Context) {
        
    }
    
    class Coordinator: NSObject, UICalendarViewDelegate {
        var parent: CalendarView
        init(parent: CalendarView) {
            self.parent = parent
        }
        
        @MainActor
        func calendarView(_ calendarView: UICalendarView, decorationFor dateComponents: DateComponents) -> UICalendarView.Decoration? {
            return nil
        }
    }
    
}

struct TasksMonthView: View {
    var body: some View {
        NavigationStack {
            CalendarView()
                .fixedSize(horizontal: true, vertical: true)
            Spacer()
            .navigationTitle("Month's Tasks")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

解决方案 #

UICalendarView的间距由其UICalendarViewLayout控制，通过自定义布局参数即可缩小日期间距：

• 创建自定义UICalendarViewLayout，调整日期单元格的尺寸和间距
• 将自定义布局赋值给UICalendarView
• 按需调整fixedSize修饰符，避免限制日历视图的自适应空间

修改后的完整代码：

import SwiftUI

struct CalendarView: UIViewRepresentable {
    func makeUIView(context: Context) -> UICalendarView {
        let calendarView = UICalendarView()
        calendarView.delegate = context.coordinator
        calendarView.calendar = Calendar(identifier: .gregorian)
        calendarView.availableDateRange = DateInterval(start: .distantPast, end: .distantFuture)
        calendarView.translatesAutoresizingMaskIntoConstraints = false
        calendarView.fontDesign = .rounded
        
        // 自定义日历布局，缩小间距
        let layout = UICalendarViewLayout()
        // 调整日期单元格大小，数值越小单元格越紧凑
        layout.itemSize = .init(width: 40, height: 40)
        // 日期间水平最小间距
        layout.minimumInteritemSpacing = 2
        // 日期行之间垂直最小间距
        layout.minimumLineSpacing = 2
        calendarView.calendarViewLayout = layout
        
        return calendarView
    }
    
    func makeCoordinator() -> Coordinator {
        return Coordinator(parent: self)
    }
    
    func updateUIView(_ uiView: UICalendarView, context: Context) {
        
    }
    
    class Coordinator: NSObject, UICalendarViewDelegate {
        var parent: CalendarView
        init(parent: CalendarView) {
            self.parent = parent
        }
        
        @MainActor
        func calendarView(_ calendarView: UICalendarView, decorationFor dateComponents: DateComponents) -> UICalendarView.Decoration? {
            return nil
        }
    }
    
}

struct TasksMonthView: View {
    var body: some View {
        NavigationStack {
            CalendarView()
                // 若需要日历自适应父容器，可移除fixedSize；需固定大小则保留并配合布局参数调整
                // .fixedSize(horizontal: true, vertical: true)
            Spacer()
            .navigationTitle("月度任务")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

参数说明 #

• itemSize：控制单个日期单元格的宽高，缩小数值可让整体布局更紧凑
• minimumInteritemSpacing：控制同一行内日期单元格的水平最小间距
• minimumLineSpacing：控制不同日期行之间的垂直最小间距

内容的提问来源于stack exchange，提问作者Abdullah