Control de fecha personalizado de iOS

Aunque iOS proporciona UIDatePickerun control para mostrar la fecha, su estilo no se puede cambiar y su función no se puede cumplir. Por lo tanto, debe personalizar el control de fecha, como se muestra a continuación.

El centro del control muestra el mes actual, y los botones izquierdo y derecho pueden cambiar de mes. El calendario tiene 6 filas por defecto, y cada semana comienza el domingo y termina el sábado.

- (void)setupInitialUI {
    
    
    self.backgroundColor = [UIColor whiteColor];
    
    [self addSubview:self.lastMonthImageView];
    [self.lastMonthImageView mas_makeConstraints:^(MASConstraintMaker *make) {
    
    
        make.left.equalTo(self).offset(5);
        make.top.equalTo(self);
        make.width.height.equalTo(@50);
    }];
    
    [self addSubview:self.nextMonthImageView];
    [self.nextMonthImageView mas_makeConstraints:^(MASConstraintMaker *make) {
    
    
        make.right.equalTo(self).offset(-5);
        make.top.equalTo(self);
        make.width.height.equalTo(@50);
    }];
    
    [self addSubview:self.monthLabel];
    [self.monthLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    
    
        make.left.right.equalTo(self);
        make.top.equalTo(self);
        make.height.equalTo(@50);
    }];
    
    CGFloat itemWidth = self.frame.size.width / 7.0;
    NSArray *titleArray = @[@"Sun", @"Mon", @"Tue", @"Wed", @"Thu", @"Fri", @"Sat"];
    for (NSInteger index = 0; index < 7; index++) {
    
    
        UILabel *titleLabel = [self makeTitleLabel:titleArray[index]];
        [self addSubview:titleLabel];
        
        [titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    
    
            make.left.equalTo(self).offset(itemWidth * index);
            make.width.equalTo(@(itemWidth));
            make.top.equalTo(self).offset(50);
            make.height.equalTo(@20);
        }];
    }
    
    [self addSubview:self.collectionView];
    [self.collectionView mas_makeConstraints:^(MASConstraintMaker *make) {
    
    
        make.left.right.equalTo(self);
        make.top.equalTo(self).offset(74);
        make.bottom.equalTo(self);
    }];
    
    [self moveToMonth];
}

- (void)moveToMonth {
    
    
}

#pragma mark - UICollectionViewDataSource -
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    
    
    return self.dateArray.count;
}

- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    
    
    UKCalendarCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"CellId" forIndexPath:indexPath];
    
    UKCalendarDate *date = self.dateArray[indexPath.row];
    [cell setCalendarDate:date];
    return cell;
}

UKCalendarCollectionViewCellcontroles de visualización,

• UKCalendarDateDayStyle, el mes actual se muestra en negro y el mes anterior y siguiente se muestran en gris.
• UKCalendarDateEventStyle, actualmente solo hay un tipo para el día, que se puede ampliar según la situación real.

// 非当月显示灰色
typedef NS_ENUM(NSInteger, UKCalendarDateDayStyle) {
    
    
    UKCalendarDateDayStyle_Current_Month    = 1,
    UKCalendarDateDayStyle_Last_Month       = 2,
    UKCalendarDateDayStyle_Next_Month       = 3,
};

// 特殊事件显示不同样式，例如当天
typedef NS_ENUM(NSInteger, UKCalendarDateEventStyle) {
    
    
    UKCalendarDateEventStyle_Today    = 1,
};

@interface UKCalendarDate : NSObject

@property(nonatomic, assign) NSInteger day;
@property(nonatomic, assign) UKCalendarDateDayStyle dayStyle;
@property(nonatomic, assign) UKCalendarDateEventStyle eventStyle;

@end

@interface UKCalendarCollectionViewCell : UICollectionViewCell

@property(nonatomic, strong) UILabel *dayLabel;

- (void)setCalendarDate:(UKCalendarDate *)date;

@end

@implementation UKCalendarCollectionViewCell

- (instancetype)initWithFrame:(CGRect)frame {
    
    
    self = [super initWithFrame:frame];
    if (self) {
    
    
        [self setupInitialUI];
    }
    return self;
}

- (void)setCalendarDate:(UKCalendarDate *)date {
    
    
    self.dayLabel.text = [NSString stringWithFormat:@"%ld", date.day];
    
    if (date.dayStyle == UKCalendarDateDayStyle_Current_Month) {
    
    
        self.dayLabel.textColor = [UIColor blackColor];
    } else {
    
    
        self.dayLabel.textColor = [UIColor lightGrayColor];
    }
    
    if (date.eventStyle == UKCalendarDateEventStyle_Today) {
    
    
        self.dayLabel.layer.backgroundColor = [UIColor blueColor].CGColor;
        self.dayLabel.textColor = [UIColor whiteColor];
    } else {
    
    
        self.dayLabel.layer.backgroundColor = [UIColor clearColor].CGColor;
    }
}

- (void)setupInitialUI {
    
    
    [self.contentView addSubview:self.dayLabel];
    [self.dayLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    
    
        make.center.equalTo(self.contentView);
        make.width.height.equalTo(@40);
    }];
}

- (UILabel *)dayLabel {
    
    
    if (!_dayLabel) {
    
    
        _dayLabel = [[UILabel alloc] init];
        [_dayLabel setFont:[UIFont systemFontOfSize:15]];
        _dayLabel.textAlignment = NSTextAlignmentCenter;
        _dayLabel.layer.cornerRadius = 20;
        _dayLabel.layer.masksToBounds = YES;
    }
    return _dayLabel;
}

La interfaz no es muy complicada, hay dos puntos problemáticos, NSCalendarsolo proporcione una solución a estos dos problemas

• Cómo obtener la cantidad de días en el mes actual, el valor rangeOfUnit: inUnit: forDate:devuelto , el valor es la cantidad de días en el mes actualNSRangelength
• Cómo obtener la semana del primer día de un solo mes y ordinalityOfUnit: inUnit: forDate: calcular la posición de la semana, a partir del domingo, el valor es 1

El código de cálculo específico es el siguiente

// 把currentDateComponents设置为每月一号
self.currentDateComponents.day = 1;
[self.dateArray removeAllObjects];
NSDate *firstDayDate = [self.calendar dateFromComponents:self.currentDateComponents];

// 计算1号所在星期
NSDateComponents *calcDateComponents = [self.calendar components:self.calendarUnits fromDate:firstDayDate];
NSUInteger firstDayOfWeek = [self.calendar ordinalityOfUnit:NSCalendarUnitWeekday inUnit:NSCalendarUnitWeekOfMonth forDate:firstDayDate];

// 如果1号不是星期一，需要补全前面日期
if (firstDayOfWeek > 1) {
    
    
    calcDateComponents.month--;
    
    // 计算上月最后一天是几号
    NSDate *lastDayDate = [NSDate dateWithTimeInterval:(-24*60*60) sinceDate:firstDayDate];
    NSInteger lastDayOfLastMonth = [self.calendar rangeOfUnit:NSCalendarUnitDay inUnit:NSCalendarUnitMonth forDate:lastDayDate].length;

    // 添加上月日期
    for (NSInteger index = 1; index < firstDayOfWeek; index++) {
    
    
        UKCalendarDate *lastMonthDate = [[UKCalendarDate alloc] init];
        lastMonthDate.day = lastDayOfLastMonth - (firstDayOfWeek - index - 1);
        lastMonthDate.dayStyle = UKCalendarDateDayStyle_Last_Month;
        
        [self.dateArray addObject:lastMonthDate];
    }
}

// 重置
calcDateComponents.month = self.currentDateComponents.month;

// 计算当月最后一天是几号
NSInteger lastDayOfCurrentMonth = [self.calendar rangeOfUnit:NSCalendarUnitDay inUnit:NSCalendarUnitMonth forDate:firstDayDate].length;
// 添加当月日期
for (NSInteger day = 1; day <= lastDayOfCurrentMonth; day++) {
    
    
    UKCalendarDate *currentMonthDate = [[UKCalendarDate alloc] init];
    currentMonthDate.day = day;
    currentMonthDate.dayStyle = UKCalendarDateDayStyle_Current_Month;
    
    calcDateComponents.day = day;
    NSString *day = [self.dateFormat stringFromDate:[self.calendar dateFromComponents:calcDateComponents]];
    if ([day isEqualToString:self.todayDay]) {
    
    
        currentMonthDate.eventStyle = UKCalendarDateEventStyle_Today;
    }

    [self.dateArray addObject:currentMonthDate];
}

// 添加下月日期
calcDateComponents.month++;
NSInteger len = 42 - self.dateArray.count;
for (NSInteger day = 1; day <= len; day++) {
    
    
    UKCalendarDate *nextMonthDate = [[UKCalendarDate alloc] init];
    nextMonthDate.day = day;
    nextMonthDate.dayStyle = UKCalendarDateDayStyle_Next_Month;
    
    [self.dateArray addObject:nextMonthDate];
}
[self.collectionView reloadData];