iOS实现一个电子时钟

最近在学习iOS-Core Animation相关东西。学以致用,这里用寄宿图和拉伸过滤来实现一个电子时钟。
最终效果如下:


iOS实现一个电子时钟_第1张图片
1.gif

实现思路很简单,就是利用图层寄宿图的contentsRect特性来实现。

这里简单介绍一下图层寄宿图。

寄宿图

图层CALayer和View一样,可以给它设置一个image用来展示,给CALayer设置image就是寄宿图。

UIImage *digitImage = [UIImage imageNamed:@"Digits"];
view.layer.contents = (__bridge id)digitImage.CGImage;
        view.layer.contentsRect = CGRectMake(0, 0, 0.1, 1);
        view.layer.contentsGravity = kCAGravityResizeAspect;
//        set nearest-neighbour
        view.layer.magnificationFilter = kCAFilterNearest;

这里涉及到4点:
1.设置寄宿图,用CALayer的contents属性来设置。
2.设置拉伸contentsGravity,和view的contentMode一样,这里不过是设置寄宿图的拉伸效果而已。
3.设置拉伸过滤kCAFilterNearest。说白了就是放大缩小的效果。
4.CALayer的contentsRect。图层的这个属性用于展示寄宿图的展示区域。默认为(0,0,1,1)表示整个区域。这么说吧这里面都是按照比例来计算的。如果你要展示图层左上角四分之一的区域那么设置contentsRect为(0, 0, 0.5, 0.5)。如果展示右下角四分之一区域,那么为(0.5, 0.5, 0.5, 0.5)。使用contentRects的好处是一次加载图片,然后分别展示图片的不同区域。
本例子中只有一张图片

digit

通过一次加载该图片,然后设置contentsRect来更改不同的位置即可。

最后附上关键代码:

- (void)viewDidLoad {
    [super viewDidLoad];
    UIImage *digitImage = [UIImage imageNamed:@"Digits"];
    
    for (UIView *view in self.digitViews) {
        view.layer.contents = (__bridge id)digitImage.CGImage;
        view.layer.contentsRect = CGRectMake(0, 0, 0.1, 1);
        view.layer.contentsGravity = kCAGravityResizeAspect;
//        set nearest-neighbour
        view.layer.magnificationFilter = kCAFilterNearest;
    }
    self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(digitClockRunning) userInfo:nil repeats:YES];
    [self digitClockRunning];
}

- (void)setDigit:(NSUInteger)digitNumber forView:(UIView *)view {
    view.layer.contentsRect = CGRectMake(digitNumber * 0.1, 0, 0.1, 1);
}

- (void)digitClockRunning {
    
    NSCalendar *calendar = [[NSCalendar alloc] initWithCalendarIdentifier:NSCalendarIdentifierGregorian];
    NSCalendarUnit unit = NSCalendarUnitHour | NSCalendarUnitMinute | NSCalendarUnitSecond;
    NSDateComponents *components = [calendar components:unit fromDate:[NSDate date]];
    [self setDigit:(components.hour / 10) forView: self.digitViews[0]];
    [self setDigit:components.hour % 10 forView:self.digitViews[1]];
    [self setDigit:components.minute / 10 forView:self.digitViews[2]];
    [self setDigit:components.minute % 10 forView:self.digitViews[3]];
    [self setDigit:components.second / 10 forView:self.digitViews[4]];
    [self setDigit:components.second % 10 forView:self.digitViews[5]];
}

PS:另外注意,如果代码里面使用NSTimer,会出现无法释放的情况,解决办法是使用一个第三方的库HWWeakTimer来解决。
** 如果喜欢,点个赞吧 **

你可能感兴趣的:(iOS实现一个电子时钟)