天天看點

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來解決。

** 如果喜歡,點個贊吧 **