BEMAnalogClock 简化了在 iOS 上创建和定制时钟的过程。
详细了解 BEMAnalogClock 项目的需求、许可和贡献。
请参阅 许可。您可以在个人或商业项目中自由修改并使用此代码。无需归属,但会表示感谢。一点谢意!(或类似的话语)将会受到欢迎。如果您的应用中使用了 BEMAnalogClock,请告诉我们。
欢迎任何形式的贡献!您可以通过在 GitHub 上提交拉取请求和问题来贡献。
该项目附带的一个 iOS 示例应用演示了如何正确设置和运行 BEMAnalogClock。您可以参考示例应用来了解如何使用和设置 BEMAnalogClock。
如果您需要任何帮助或想讨论这个项目,请加入我们 Gitter。
BEMAnalogClock 类中所有可用的方法、属性、类型和委托方法均有文档记载。如果您在使用 Xcode 5 与 BEMAnalogClock 结合时,文档可在 Xcode 中直接查看(只需按 Option 键并点击任何方法以获取快速帮助)。
安装BEMAnalogClock最简单的方式是使用CocoaPods。要做到这一点,只需在您的Podfile
中添加以下行即可。
pod 'BEMAnalogClock'
安装BEMAnalogClock的另一种方式是将Classes文件夹拖放到您的Xcode项目中。这样操作时,请勾选 "复制项目中的组文件夹" 复选框。
在项目中设置BEMAnalogClock很简单。按照以下步骤操作,即可让一切运行起来。
将"BEMAnalogClockView.h"
导入到视图控制器的头文件中
#import "BEMAnalogClockView.h"
将BEMAnalogClockDelegate
应用到同一个视图控制器
@interface YourViewController : UIViewController <BEMAnalogClockDelegate>
BEMAnalogClockView可以通过两种方式初始化。您可以直接将其添加到界面(Storyboard文件)中,或者通过编码实现。两种方式都提供相同的初始化方法,只是实现的方式不同。根据您的应用或项目使用合适的方法。
界面初始化
1 - 在您的UIViewController中添加一个UIView
2 - 将UIView的类型更改为BEMAnalogClockView
3 - 使用IBOutlet
将视图链接到您的代码。您可以将属性设置为weak
和nonatomic
。
4 - 在界面上连接BEMAnalogClockView
。将代理属性连接到您的ViewController。
代码初始化
只需将以下代码添加到实现(通常是viewDidLoad
方法)中。
BEMAnalogClockView *myClock = [[BEMAnalogClockView alloc] initWithFrame:CGRectMake(105, 100, 100, 100)];
myGraph.delegate = self;
[self.view addSubview:myClock];
默认情况下,时钟将显示10:10。有两种方式可以初始化时钟,显示自定义时间。
直接分配值给时间属性
最简单的方式是更改NSInteger
属性hours
、minutes
和seconds
的值。例如在viewDidLoad
中,时钟上的时间可以这样设置
self.myClock.hours = 7;
self.myClock.minutes = 37;
self.myClock.seconds = 10;
遵从BEMAnalogClockDelegate
协议
设置时钟上的时间的另一种方式是使用代理方法timeForClock:
和dateFormatterForClock:
。`timeForClock:`应该返回一个包含您希望时钟设置时间的字符串。`dateFormatterForClock:`应该返回用于字符串时间的日期格式(字符串)。以下是一个在ViewController中使用这些方法的示例。
- (NSString *)timeForClock:(BEMAnalogClockView *)clock {
return @"11, 03 1982 07:37:10"; // The string containing the time
}
- (NSString *)dateFormatterForClock:(BEMAnalogClockView *)clock {
return @"MM, dd yyyy HH:mm:ss"; // The date format used by the string in “timeForClock”.
}
BEMAnalogClock有一个reloadClock
方法。调用它将完全重新加载/初始化时钟。layoutSubviews
将再次被调用,以及所有属性。时钟将被完全重新绘制。
- (void)anyMethodInYourOwnController {
// Change clock properties
[self.myClock reloadClock]; // Reload the clock
}
updateTimeAnimated:
方法可以在初始化后更改时钟上的时间。参数animated
决定了时钟的长针是否应以动画方式移到新位置,或者直接“跳到”新位置。以下是如何使用它的示例。
-(void)anyMethodInYourOwnController {
// Update the time on the clock
self.myClock.hours = arc4random() % 12 // Random value between 1 and 12
self.myClock.minutes = arc4random() % 60 // Random value between 1 and 60
self.myClock.seconds = arc4random() % 60 // Random value between 1 and 60
[self.myClock updateTimeAnimated:YES] // Update the time on the clock
}
BEMAnalogClock可以将时钟上的时间设置为用户设备的当前时间。有两种方法可做到这一点。初始化时钟时,可以将currentTime
属性设置为YES(默认值为NO)。
myClock.currentTime = YES;
或者您可以调用方法setClockToCurrentTimeAnimated:
。参数animated
与updateTimeAnimated
中的参数类似。它控制时钟的长指针是否以动画方式移动到新位置。
- (void)anyMethodInYourOwnController {
[self.myClock setClockToCurrentTimeAnimated:YES]; // Set the time on the clock to the one on the user's device
}
时钟支持实时更新。这意味着秒针每秒移动一次,分针每分钟移动一次,时针每小时移动一次。为此,您可以在初始化图表时,将属性realTime
设置为YES(默认值为NO)。
myClock.realTime = YES;
或者,您可以使用方法startRealTime
和stopRealTime
来开启/关闭实时功能
[self.myGraph startRealTime]; // The clock will start being updated in real time.
[self.myGraph stopRealTime]; // The clock will stop being updated in real time.
只读属性realTimeIsActivated
报告时钟是否正在使用实时功能。
方法currentTimeOnClock:
用于获取当前时钟显示的时间。每次时钟更新时都会调用该方法。参数hours
、minutes
和seconds
是当前显示在时钟上的小时、分钟和秒的字符串。
以下是如何使用此方法的示例
- (void)currentTimeOnClock:(BEMAnalogClockView *)clock Hours:(NSString *)hours Minutes:(NSString *)minutes
NSLog(@"Hours: %@", hours); // The hours currently displayed on the clock by the hour hand.
NSLog(@"Minutes: %@", minutes); // The minutes currently displayed on the clock by the minute hand.
NSLog(@"Seconds: %@", seconds); // The seconds currently displayed on the clock by the second hand.
}
setTimeViaTouch
属性(BOOL类型)设置为YES时,可以通过触摸输入调整时钟时间。分针会跟随用户的指尖绕时钟移动。此属性的默认值是NO。
幸运的是,BEMAnalogClock具有高度的自定义性。
为使用BEMAnalogClock创建的时钟自定义指针,这里有几个不同的属性。
hourHandColor
、minuteHandColor
和secondHandColor
控制指针的颜色。
hourHandAlpha
、minuteHandAlpha
和secondHandAlpha
控制指针的不透明度。
hourHandWidth
、minuteHandWidth
和secondHandWidth
控制指针的宽度。
hourHandLength
、minuteHandLength
和secondHandLength
控制指针的长度。
hourHandOffsideLength
、minuteHandOffsideLength
和secondHandOffsideLength
控制指针背部的长度。
如果enableShadows
设置为YES,指针将投射阴影。
以下是用于自定义时钟面的属性
faceBackgroundColor
定义了时钟的背景颜色。
faceBackgroundAlpha
定义了时钟背景的不透明度。
borderColor
定义了边框的颜色。
borderAlpha
定义了边框的不透明度。
borderWidth
定义了边框的宽度。
五种方法使您能够轻松自定义时钟的刻度。它们都控制特定刻度的一个参数(颜色、不透明度、宽度、长度、偏移量)。每个刻度由一个从0到59的索引定义。
graduationColorForIndex:
控制刻度的颜色。graduationAlphaForIndex:
控制刻度的不透明度。graduationWidthForIndex:
控制刻度的宽度。graduationLengthForIndex:
控制刻度的长度。graduationOffsetForIndex:
控制刻度与边框的距离。以下是如何使用graduationLengthForIndex:
方法的示例
- (CGFloat)analogClock:(BEMAnalogClockView *)clock graduationLengthForIndex:(NSInteger)index {
if (index == 30) {
return 50; // The length of 30th graduation will be 50.
} else if (!(index % 5) == 1){
return 20; // The length of one graduation in every five graduation will be 20.
} else {
return 5; // The length of the rest of the graduations will be 5.
}
}
以下是上述示例的结果。时钟的30次刻度比其他刻度更长。每五个刻度中有一个刻度的长度也优于其余刻度。
您可以使用布尔属性 enableGraduations
来激活或停用时钟的刻度。如果设置为YES,刻度将被显示;如果设置为NO,则不会被显示(默认值为YES)。
BEMAnalogClock 允许在时钟表盘上显示12个数字(见上图)。要实现这一点,只需将布尔属性 enableDigit
设置为YES。
self.myClock.enableDigit = YES;
有三个属性可以自定义此功能:digitColor
、digitFont
和 digitOffset
。
self.myClock.digitColor = [UIColor whiteColor]; // The color of the digits displayed on the clock.
self.myClock.digitFont = [UIFont fontWithName:@"HelveticaNeue-Thin" size:17]; // The font of the digits displayed on the clock.
self.myClock.digitOffset = 10; // The offset for the position of the digits from the center of the clock.
布尔属性 militaryTime
允许使用24小时制的时钟。
self.myClock.militaryTime = YES; //Defaults to NO
当时钟开始或完成加载时,将调用委托方法。当开始重新加载时,将调用 clockDidBeginLoading:
方法。加载完成后,将调用 clockDidFinishLoading:
方法(请注意,目前在此委托方法被调用时动画尚未完成)。