天天看点

android sdio 时钟 ios->clock,iOS实现一个电子时钟

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

最终效果如下:

android sdio 时钟 ios->clock,iOS实现一个电子时钟

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的好处是一次加载图片,然后分别展示图片的不同区域。

本例子中只有一张图片

android sdio 时钟 ios->clock,iOS实现一个电子时钟

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来解决。

** 如果喜欢,点个赞吧 **