最近在学习iOS-Core Animation相关东西。学以致用,这里用寄宿图和拉伸过滤来实现一个电子时钟。
最终效果如下:
实现思路很简单,就是利用图层寄宿图的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的好处是一次加载图片,然后分别展示图片的不同区域。
本例子中只有一张图片
通过一次加载该图片,然后设置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来解决。
** 如果喜欢,点个赞吧 **