自從人生第一篇博客《iOS中的預(yù)編譯指令的初步探究》問世以來 瀏覽量竟然達(dá)到了360多，（路過的大神勿笑?。┻@些瀏覽量使我興奮異常但又令我黯然神傷，為何我會(huì)眼里常含淚水？因?yàn)閲松焓贮h達(dá)90%！??！區(qū)區(qū)只有可憐的三個(gè)評(píng)論，可憐的三個(gè)評(píng)論~ 沒有鼓勵(lì)~ 沒有鮮花~ 也沒有謾罵~ 但是我不哭 因?yàn)橘v人會(huì)笑！我深信：
一日伸手黨，bug終身隨！
好久沒打籃球了，“教練，我想打籃球”。
這次的東西標(biāo)題為《無比迅速敏捷地開發(fā)iOS超精美控件》！就問你怕不怕?。”救松類和唇^標(biāo)題黨丫的，所以今天我就絕對(duì)會(huì)展示一些奇淫巧技！帥氣并且超快的擼出一個(gè)iOS精美控件！別說我坑你？
上圖1
這個(gè)我叫它DDClock，所有view都使用Quartz 2D繪制，創(chuàng)建后自動(dòng)與當(dāng)前系統(tǒng)對(duì)時(shí)同步，漂亮、精致、優(yōu)雅…… （如果你看到這里，你說不漂亮、不精致、不優(yōu)雅，那么請(qǐng)你出去，我擔(dān)心我會(huì)下手過重，呵呵），想知道怎么弄得？別急！讓博主帶你手拿菜刀砍電線，一路火光加閃電?。?！
在工程界有一個(gè)說法：
設(shè)計(jì)的優(yōu)秀與否，是導(dǎo)致這個(gè)產(chǎn)品成敗的關(guān)鍵。
好吧設(shè)計(jì)先行！想好了再動(dòng)手！想好了再動(dòng)手在生活中是很重要，比如小學(xué)生和初中生是怎么區(qū)分的？區(qū)別就是在LOL中他們對(duì)技能的施放是否進(jìn)行周密的思考，所以一些選手一個(gè)人直接沖進(jìn)人堆里，技能啪啪一甩，然后就掛了——小學(xué)生！所以嘛，做事情前養(yǎng)成思考的習(xí)慣，是脫離小學(xué)生群體的重要手段哦~
前面說到一點(diǎn)，DDClock創(chuàng)建后需要自動(dòng)與當(dāng)前系統(tǒng)對(duì)時(shí)同步；所以
1、我們不妨讓DDClock繼承UIView，然后重載
-(void)drawRect:(CGRect)rect
方法，在這個(gè)方法中帥氣的畫出那個(gè)時(shí)鐘所有細(xì)節(jié)！我們的決心是堅(jiān)決不使用人民的一張圖片??；
2、然后分析整個(gè)DDClock只有指針（時(shí)分秒針）和指示上下午的AM、PM會(huì)動(dòng)！所以我們要把這些個(gè)東西射成變量！關(guān)于指針的運(yùn)動(dòng)，我們可以使用定時(shí)器，每秒都和系統(tǒng)對(duì)時(shí)；
3、我們還要支持主題的切換，那就給DDClock定義一個(gè)枚舉咯；
4、然后就這樣
5、然后就這樣這樣
……
哈~ 在我們精細(xì)的設(shè)計(jì)中，這個(gè)DDClock的產(chǎn)品形態(tài)竟然出乎的飽滿，俗話說的好，打鐵要趁熱，豆腐趁熱吃。我們馬上祭出殺器XCode！！我知道你現(xiàn)在已經(jīng)興奮了
我們就新建一個(gè)項(xiàng)目 叫做DDClockDemo吧，用來測(cè)試待會(huì)我們?cè)O(shè)計(jì)的DDClock。
然后我們就在項(xiàng)目中新建一個(gè)Group（文件夾）吧 ，就命名成DDClock嘛~
再然后嘛，我們就在DDClock的文件夾下新建一個(gè)OC對(duì)象吧（Cocoa Touch Class）取名字DDClock，讓它繼承UIView
Nice?。砜纯次覀兊墓こ棠夸浗Y(jié)構(gòu) 圖2
好！我們要開始寫代碼咯
DDClock.h
//// DDClock.h// Created by David on 15/1/26.// 博客：http://m.survivalescaperooms.com/daiweilai/// github：https://github.com/daiweilai/// Copyright (c) 2015年 DavidDay. All rights reserved.// #import <UIKit/UIKit.h>#define DDClockSize 200 //默認(rèn)時(shí)鐘的長寬都為200#if ! __has_feature(objc_arc)#error "需要開啟ARC"#endif@PRotocol DDLockDelegate @optional-(UIColor*)rimColor;-(UIColor*)markColor;-(UIColor*)faceColor;-(UIColor*)fontColor;-(UIColor*)secondHandColor;-(UIColor*)hourAndMinuteHandColor;@end@interface DDClock : UIView@property (weak, nonatomic) id delegate;typedef NS_ENUM(NSUInteger, DDClockTheme) { //弄一個(gè)枚舉類型用來更改主題 DDClockThemeDefault = 0, DDClockThemeDark, DDClockThemeModerm};//DDClock的構(gòu)造方法 delegate:代理-(instancetype)initWithDelegate:(id)delegate frame:(CGRect)frame;///DDClock的構(gòu)造方法 theme:主題 -(instancetype)initWithTheme:(DDClockTheme)theme frame:(CGRect)frame;@endDDClock.m
//// DDClock.h// Created by David on 15/1/26.// 博客：http://m.survivalescaperooms.com/daiweilai/// github：https://github.com/daiweilai/// Copyright (c) 2015年 DavidDay. All rights reserved.//#import "DDClock.h"@interface DDClock(){ //// 聲明顏色 UIColor* rimColor; UIColor* faceColor; UIColor* markColor; UIColor* secondHandColor; UIColor* fontColor; UIColor* hourAndMinuteHandColor; DDClockTheme _theme; float _scale; CGPoint _centerPoint;}@end@implementation DDClock-(instancetype)initWithDelegate:(id)delegate frame:(CGRect)frame{ //防止用戶在構(gòu)建的時(shí)候傳入的height和widt不一樣 因?yàn)闀r(shí)鐘是圓的所以強(qiáng)制把他們變成長寬一樣 CGFloat size = frame.size.height>frame.size.width?frame.size.height:frame.size.width; CGRect realRect = CGRectMake(frame.origin.x, frame.origin.y, size, size); self = [self initWithFrame:realRect]; if (self) { _scale = realRect.size.height / DDClockSize; //放大縮小的比例系數(shù) _centerPoint = CGPointMake(size/2, size/2); //中心點(diǎn) //先使用默認(rèn)的顏色初始化 防止用戶沒有調(diào)用delegate方法 rimColor = [UIColor colorWithRed: 0 green: 0 blue: 0 alpha: 1]; faceColor = [UIColor colorWithRed: 1 green: 1 blue: 1 alpha: 1]; markColor = [UIColor colorWithRed: 160.0/255.0 green: 160.0/255.0 blue: 160.0/255.0 alpha: 1]; secondHandColor = [UIColor colorWithRed: 86.0/255.0 green: 232.0/255.0 blue: 157.0/255.0 alpha: 1]; fontColor = [UIColor colorWithRed: 0 green: 0 blue: 0 alpha: 1]; hourAndMinuteHandColor = [UIColor colorWithRed: 0 green: 0 blue: 0 alpha: 1]; //判斷用戶是否使用了delegate的方法 if ([delegate respondsToSelector:NSSelectorFromString(@"rimColor")]) { rimColor = [delegate rimColor]; } if ([delegate respondsToSelector:NSSelectorFromString(@"faceColor")]) { faceColor = [delegate faceColor]; } if ([delegate respondsToSelector:NSSelectorFromString(@"markColor")]) { markColor = [delegate markColor]; } if ([delegate respondsToSelector:NSSelectorFromString(@"fontColor")]) { fontColor = [delegate fontColor]; } if ([delegate respondsToSelector:NSSelectorFromString(@"hourAndMinuteHandColor")]) { hourAndMinuteHandColor = [delegate hourAndMinuteHandColor]; } if ([delegate respondsToSelector:NSSelectorFromString(@"secondHandColor")]) { secondHandColor = [delegate secondHandColor]; } //秒針使用圖片畫出來 UIImage *img = [self drawSecondHandWithColor:secondHandColor scale:_scale frameSize:CGSizeMake(size, size) currentAngle:[self secondAngleFromDate:[NSDate new]]]; UIImageView *imgV = [[UIImageView alloc] initWithImage:img]; imgV.frame = CGRectMake(0 , 0, size, size); [self addSubview:imgV]; //1.創(chuàng)建動(dòng)畫并指定動(dòng)畫屬性 CABasicAnimation *basicAnimation=[CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; //2.設(shè)置動(dòng)畫屬性初始值、結(jié)束值 // basicAnimation.fromValue=[NSNumber numberWithInt:M_PI_2];// basicAnimation.toValue=[NSNumber numberWithFloat:2*M_PI]; //設(shè)置其他動(dòng)畫屬性 basicAnimation.duration=60.0;//60秒轉(zhuǎn)一圈 basicAnimation.autoreverses=false;//旋轉(zhuǎn)后再旋轉(zhuǎn)到原來的位置 basicAnimation.repeatCount = CGFLOAT_MAX;//無限循環(huán)的執(zhí)行動(dòng)畫 imgV.layer.anchorPoint = CGPointMake(0.5, 0.5);//設(shè)置秒針的旋轉(zhuǎn)中心 就是這個(gè)view的中心！ //4.添加動(dòng)畫到圖層，注意key相當(dāng)于給動(dòng)畫進(jìn)行命名，以后獲得該動(dòng)畫時(shí)可以使用此名稱獲取 [imgV.layer addAnimation:basicAnimation forKey:@"Rotation"]; //當(dāng)這個(gè)DDClock被創(chuàng)建出來的時(shí)候，就新建一個(gè)定時(shí)器，1分鐘執(zhí)行一次“onTimer”方法 其實(shí)這里做是不夠好的 因?yàn)檫@樣不能確保秒針走到12的時(shí)候更新 時(shí)針和分針 要想解決也很容易 最近生病 難受 不想解決了~~ [NSTimer scheduledTimerWithTimeInterval:60.0 target:self selector:@selector(onTimer) userInfo:nil repeats:YES]; } self.backgroundColor = [UIColor clearColor]; return self;}///構(gòu)造方法 使用默認(rèn)主題-(instancetype)initWithTheme:(DDClockTheme)theme frame:(CGRect)frame{ //防止用戶在構(gòu)建的時(shí)候傳入的height和widt不一樣 因?yàn)闀r(shí)鐘是圓的所以強(qiáng)制把他們變成一樣 CGFloat size = frame.size.height>frame.size.width?frame.size.height:frame.size.width; CGRect realRect = CGRectMake(frame.origin.x, frame.origin.y, size, size); self = [self initWithFrame:realRect]; if (self) { _theme = theme; _scale = realRect.size.height / DDClockSize; _centerPoint = CGPointMake(size/2, size/2); switch (theme) { //根據(jù)主題繪制不同的顏色 case DDClockThemeDefault: rimColor = [UIColor colorWithRed: 0 green: 0 blue: 0 alpha: 1]; faceColor = [UIColor colorWithRed: 1 green: 1 blue: 1 alpha: 1]; markColor = [UIColor colorWithRed: 160.0/255.0 green: 160.0/255.0 blue: 160.0/255.0 alpha: 1]; secondHandColor = [UIColor colorWithRed: 86.0/255.0 green: 232.0/255.0 blue: 157.0/255.0 alpha: 1]; fontColor = [UIColor colorWithRed: 0 green: 0 blue: 0 alpha: 1]; hourAndMinuteHandColor = [UIColor colorWithRed: 0 green: 0 blue: 0 alpha: 1]; break; case DDClockThemeDark: rimColor = [UIColor colorWithRed: 66.0/255 green: 66.0/255 blue: 66.0/255 alpha: 1]; faceColor = [UIColor colorWithRed: 66.0/255 green: 66.0/255 blue: 66.0/255 alpha: 1]; markColor = [UIColor colorWithRed: 1 green: 1 blue: 1 alpha: 1]; secondHandColor = [UIColor colorWithRed: 32.0/255.0 green: 250.0/255.0 blue: 200.0/255.0 alpha: 1]; fontColor = [UIColor colorWithRed: 1 green: 1 blue: 1 alpha: 1]; hourAndMinuteHandColor = [UIColor colorWithRed: 1 green: 1 blue: 1 alpha: 1]; break; case DDClockThemeModerm: rimColor = [UIColor colorWithRed: 60.0/255 green: 90.0/255 blue: 110.0/255 alpha: 1]; faceColor = [UIColor colorWithRed: 1 green: 1 blue: 1 alpha: 1]; markColor = [UIColor colorWithRed: 160.0/255.0 green: 160.0/255.0 blue: 160.0/255.0 alpha: 1]; secondHandColor = [UIColor colorWithRed: 210.0/255.0 green: 0 blue: 10.0/255.0 alpha: 1]; fontColor = [UIColor colorWithRed: 210.0/255.0 green: 0 blue: 10.0/255.0 alpha: 1]; hourAndMinuteHandColor = [UIColor colorWithRed: 60.0/255 green: 90.0/255 blue: 110.0/255 alpha: 1]; break; default: rimColor = [UIColor colorWithRed: 0 green: 0 blue: 0 alpha: 1]; faceColor = [UIColor colorWithRed: 1 green: 1 blue: 1 alpha: 1]; markColor = [UIColor colorWithRed: 160.0/255.0 green: 160.0/255.0 blue: 160.0/255.0 alpha: 1]; secondHandColor = [UIColor colorWithRed: 86.0/255.0 green: 232.0/255.0 blue: 157.0/255.0 alpha: 1]; fontColor = [UIColor colorWithRed: 0 green: 0 blue: 0 alpha: 1]; hourAndMinuteHandColor = [UIColor colorWithRed: 0 green: 0 blue: 0 alpha: 1]; break; } if ([_delegate rimColor]) { rimColor = [_delegate rimColor]; } if ([_delegate faceColor]) { faceColor = [_delegate faceColor]; } if ([_delegate markColor]) { markColor = [_delegate markColor]; } if ([_delegate fontColor]) { fontColor = [_delegate fontColor]; } if ([_delegate faceColor]) { faceColor = [_delegate faceColor]; } if ([_delegate hourAndMinuteHandColor]) { hourAndMinuteHandColor = [_delegate hourAndMinuteHandColor]; } if ([_delegate secondHandColor]) { secondHandColor = [_delegate secondHandColor]; } UIImage *img = [self drawSecondHandWithColor:secondHandColor scale:_scale frameSize:CGSizeMake(size, size) currentAngle:[self secondAngleFromDate:[NSDate new]]]; UIImageView *imgV = [[UIImageView alloc] initWithImage:img]; imgV.frame = CGRectMake(0 , 0, size, size); [self addSubview:imgV]; //1.創(chuàng)建動(dòng)畫并指定動(dòng)畫屬性 CABasicAnimation *basicAnimation=[CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; //2.設(shè)置動(dòng)畫屬性初始值、結(jié)束值 // basicAnimation.fromValue=[NSNumber numberWithInt:M_PI_2]; basicAnimation.toValue=[NSNumber numberWithFloat:2*M_PI]; //設(shè)置其他動(dòng)畫屬性 basicAnimation.duration=60.0; basicAnimation.autoreverses=false;//旋轉(zhuǎn)后再旋轉(zhuǎn)到原來的位置 basicAnimation.repeatCount = CGFLOAT_MAX; imgV.layer.anchorPoint = CGPointMake(0.5, 0.5); //4.添加動(dòng)畫到圖層，注意key相當(dāng)于給動(dòng)畫進(jìn)行命名，以后獲得該動(dòng)畫時(shí)可以使用此名稱獲取 [imgV.layer addAnimation:basicAnimation forKey:@"Rotation"]; //當(dāng)這個(gè)View被創(chuàng)建出來的時(shí)候，就新建一個(gè)定時(shí)器，1分鐘執(zhí)行一次“onTimer”方法 [NSTimer scheduledTimerWithTimeInterval:60.0 target:self selector:@selector(onTimer) userInfo:nil repeats:YES]; } self.backgroundColor = [UIColor clearColor]; return self;}//每秒鐘刷新視圖一次-(void)onTimer{ dispatch_async(dispatch_get_main_queue(), ^{ [self setNeedsDisplay];//這個(gè)方法調(diào)用后就會(huì)刷新這個(gè)View });}//View刷新這個(gè)方法就被調(diào)用，就會(huì)重新畫出這個(gè)View-(void)drawRect:(CGRect)rect{ [super drawRect:rect]; //獲取當(dāng)前的時(shí)間進(jìn)行View的繪制 [self drawDDClockWithScale:_scale centerPoint:_centerPoint currentDate:[NSDate new]];}////畫出秒針-(UIImage*)drawSecondHandWithColor:(UIColor*)color scale:(CGFloat)scale frameSize:(CGSize)size currentAngle:(float)currentAngle{ UIGraphicsBeginImageContext(size); CGContextRef context = UIGraphicsGetCurrentContext(); //// secondHand Drawing CGContextSaveGState(context); CGContextTranslateCTM(context, size.height/2, size.height/2); CGContextRotateCTM(context, (currentAngle - 90) * M_PI / 180); CGContextScaleCTM(context, scale, scale); UIBezierPath* secondHandPath = UIBezierPath.bezierPath; [secondHandPath moveToPoint: CGPointMake(4.96, -4.87)]; [secondHandPath addCurveToPoint: CGPointMake(6.93, -0.92) controlPoint1: CGPointMake(6.07, -3.76) controlPoint2: CGPointMake(6.73, -2.37)]; [secondHandPath addLineToPoint: CGPointMake(66.01, -0.92)]; [secondHandPath addLineToPoint: CGPointMake(66.01, 0.08)]; [secondHandPath addLineToPoint: CGPointMake(7.01, 0.08)]; [secondHandPath addCurveToPoint: CGPointMake(4.96, 5.03) controlPoint1: CGPointMake(7.01, 1.87) controlPoint2: CGPointMake(6.32, 3.66)]; [secondHandPath addCurveToPoint: CGPointMake(-4.94, 5.03) controlPoint1: CGPointMake(2.22, 7.76) controlPoint2: CGPointMake(-2.21, 7.76)]; [secondHandPath addCurveToPoint: CGPointMake(-4.94, -4.87) controlPoint1: CGPointMake(-7.68, 2.29) controlPoint2: CGPointMake(-7.68, -2.14)]; [secondHandPath addCurveToPoint: CGPointMake(4.96, -4.87) controlPoint1: CGPointMake(-2.21, -7.61) controlPoint2: CGPointMake(2.22, -7.61)]; [secondHandPath closePath]; [color setFill]; [secondHandPath fill]; CGContextRestoreGState(context); UIImage *img = [UIImage new]; img = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return img;}///把當(dāng)前的時(shí)間轉(zhuǎn)換為時(shí)針、分針、角度-(NSArray*)HourAndMinuteAngleFromDate:(NSDate*)date{ NSDateFormatter *formatter = [[NSDateFormatter alloc] init]; [formatter setDateFormat:@"HH"];//強(qiáng)制24小時(shí)格式 float hourf = [[formatter stringFromDate:date] floatValue]; [formatter setDateFormat:@"mm"]; float minutef = [[formatter stringFromDate:date] floatValue]; if (hourf > 12) {//大于24小時(shí)我們就減去12小時(shí)嘛 比較好算角度呀 hourf = (hourf - 12)*30 + 30*(minutef/60); //一小時(shí)30° }else{ hourf = hourf*30 + 30*(minutef/60); } minutef = minutef*6;//一分鐘6° NSNumber *hour = [[NSNumber alloc] initWithInt:hourf]; NSNumber *minute = [[NSNumber alloc] initWithInt:minutef]; NSArray *arr = [[NSArray alloc] initWithObjects:hour,minute, nil]; return arr;}//因?yàn)槊脶樀膶?shí)時(shí)性 所以單獨(dú)算出當(dāng)前秒針的角度-(float)secondAngleFromDate:(NSDate*)date{ NSDateFormatter *formatter = [[NSDateFormatter alloc] init]; [formatter setDateFormat:@"ss"]; float secondf = [[formatter stringFromDate:date] floatValue]; secondf = secondf*6;//一分鐘6° return secondf;}//繪制圖形的主要方法- (void)drawDDClockWithScale: (CGFloat)scale centerPoint:(CGPoint)centerPoint currentDate:(NSDate*)currentDate;{ NSArray *arr = [self HourAndMinuteAngleFromDate:currentDate]; NSNumber *hourAngle = (NSNumber*)[arr objectAtIndex:0]; NSNumber *minuteAngle = (NSNumber*)[arr objectAtIndex:1]; //獲取繪圖上下文 CGContextRef context = UIGraphicsGetCurrentContext(); //// 畫出邊框 CGContextSaveGState(context); CGContextTranslateCTM(context, centerPoint.x, centerPoint.y); CGContextScaleCTM(context, scale, scale); UIBezierPath* rimPath = [UIBezierPath bezierPathWithOvalInRect: CGRectMake(-100, -100, 200, 200)]; [rimColor setFill]; [rimPath fill]; CGContextRestoreGState(context); //// 畫出鐘表盤 CGContextSaveGState(context); CGContextTranslateCTM(context, centerPoint.x, centerPoint.y); CGContextScaleCTM(context, scale, scale); UIBezierPath* facePath = [UIBezierPath bezierPathWithOvalInRect: CGRectMake(-92.99, -92.92, 186, 186)]; [faceColor setFill]; [facePath fill]; CGContextRestoreGState(context); //// 上午下午時(shí)間的判斷 CGContextSaveGState(context); CGContextTranslateCTM(context, centerPoint.x, centerPoint.y); CGContextScaleCTM(context, scale, scale); CGRect aMPMRect = CGRectMake(-15.99, -42.92, 32, 18); NSMutableParagraphStyle* aMPMStyle = NSMutableParagraphStyle.defaultParagraphStyle.mutableCopy; aMPMStyle.alignment = NSTextAlignmentCenter; NSDictionary* aMPMFontAttributes = @{NSFontAttributeName: [UIFont fontWithName: @"Helvetica-Bold" size: 15], NSForegroundColorAttributeName: fontColor, NSParagraphStyleAttributeName: aMPMStyle}; NSDateFormatter *formatter = [[NSDateFormatter alloc] init]; [formatter setDateFormat:@"HH"];//強(qiáng)制24小時(shí)格式 float hourf = [[formatter stringFromDate:currentDate] floatValue];//為了節(jié)省系統(tǒng)資源 延遲一分鐘才會(huì)更新 因?yàn)檫@個(gè)方法是一分鐘 調(diào)用一次的 NSString *str = hourf<12?@"AM":@"PM"; [str drawInRect: aMPMRect withAttributes: aMPMFontAttributes]; CGContextRestoreGState(context); //// 畫出時(shí)針 CGContextSaveGState(context); CGContextTranslateCTM(context, centerPoint.x, centerPoint.y); CGContextRotateCTM(context, [hourAngle floatValue] * M_PI / 180); CGContextScaleCTM(context, scale, scale); UIBezierPath* hourHandPath = [UIBezierPath bezierPathWithRect: CGRectMake(-4.99, -52.46, 10, 43.54)]; [hourAndMinuteHandColor setFill]; [hourHandPath fill]; CGContextRestoreGState(context); //// 畫出分針 CGContextSaveGState(context); CGContextTranslateCTM(context, centerPoint.x, centerPoint.y); CGContextRotateCTM(context, ([minuteAngle floatValue]) * M_PI / 180); CGContextScaleCTM(context, scale, scale); UIBezierPath* minuteHandPath = [UIBezierPath bezierPathWithRect: CGRectMake(-2.99, -64.92, 6, 55.92)]; [hourAndMinuteHandColor setFill]; [minuteHandPath fill]; CGContextRestoreGState(context); //// 畫出中間的圓圈 CGContextSaveGState(context); CGContextTranslateCTM(context, centerPoint.x, centerPoint.y); CGContextScaleCTM(context, scale, scale); UIBezierPath* centreEmptyOvalPath = UIBezierPath.bezierPath; [centreEmptyOvalPath moveToPoint: CGPointMake(-4.42, -4.35)]; [centreEmptyOvalPath addCurveToPoint: CGPointMake(-4.42, 4.33) controlPoint1: CGPointMake(-6.82, -1.95) controlPoint2: CGPointMake(-6.82, 1.93)]; [centreEmptyOvalPath addCurveToPoint: CGPointMake(4.26, 4.33) controlPoint1: CGPointMake(-2.02, 6.73) controlPoint2: CGPointMake(1.86, 6.73)]; [centreEmptyOvalPath addCurveToPoint: CGPointMake(4.26, -4.35) controlPoint1: CGPointMake(6.66, 1.93) controlPoint2: CGPointMake(6.66, -1.95)]; [centreEmptyOvalPath addCurveToPoint: CGPointMake(-4.42, -4.35) controlPoint1: CGPointMake(1.86, -6.75) controlPoint2: CGPointMake(-2.02, -6.75)]; [centreEmptyOvalPath closePath]; [centreEmptyOvalPath moveToPoint: CGPointMake(7.78, -7.7)]; [centreEmptyOvalPath addCurveToPoint: CGPointMake(7.78, 7.85) controlPoint1: CGPointMake(12.08, -3.41) controlPoint2: CGPointMake(12.08, 3.56)]; [centreEmptyOvalPath addCurveToPoint: CGPointMake(-7.77, 7.85) controlPoint1: CGPointMake(3.49, 12.15) controlPoint2: CGPointMake(-3.48, 12.15)]; [centreEmptyOvalPath addCurveToPoint: CGPointMake(-7.77, -7.7) controlPoint1: CGPointMake(-12.07, 3.56) controlPoint2: CGPointMake(-12.07, -3.41)]; [centreEmptyOvalPath addCurveToPoint: CGPointMake(7.78, -7.7) controlPoint1: CGPointMake(-3.48, -12) controlPoint2: CGPointMake(3.49, -12)]; [centreEmptyOvalPath closePath]; [hourAndMinuteHandColor setFill]; [centreEmptyOvalPath fill]; CGContextRestoreGState(context); //// 畫出“12” CGContextSaveGState(context); CGContextTranslateCTM(context, centerPoint.x, centerPoint.y); CGContextScaleCTM(context, scale, scale); CGRect text12Rect = CGRectMake(-10, -82, 21, 17); { NSString* textContent = @"12"; NSMutableParagraphStyle* text12Style = NSMutableParagraphStyle.defaultParagraphStyle.mutableCopy; text12Style.alignment = NSTextAlignmentCenter; NSDictionary* text12FontAttributes = @{NSFontAttributeName: [UIFont fontWithName: @"Helvetica-Bold" size: 18], NSForegroundColorAttributeName: fontColor, NSParagraphStyleAttributeName: text12Style}; [textContent drawInRect: CGRectOffset(text12Rect, 0, (CGRectGetHeight(text12Rect) - [textContent boundingRectWithSize: text12Rect.size options: NSStringDrawingUsesLineFragmentOrigin attributes: text12FontAttributes context: nil].size.height) / 2) withAttributes: text12FontAttributes]; } CGContextRestoreGState(context); //// 畫出“3” CGContextSaveGState(context); CGContextTranslateCTM(context, centerPoint.x, centerPoint.y); CGContextScaleCTM(context, scale, scale); CGRect text3Rect = CGRectMake(72, -9, 12, 17); { NSString* textContent = @"3"; NSMutableParagraphStyle* text3Style = NSMutableParagraphStyle.defaultParagraphStyle.mutableCopy; text3Style.alignment = NSTextAlignmentCenter; NSDictionary* text3FontAttributes = @{NSFontAttributeName: [UIFont fontWithName: @"Helvetica-Bold" size: 18], NSForegroundColorAttributeName: fontColor, NSParagraphStyleAttributeName: text3Style}; [textContent drawInRect: CGRectOffset(text3Rect, 0, (CGRectGetHeight(text3Rect) - [textContent boundingRectWithSize: text3Rect.size options: NSStringDrawingUsesLineFragmentOrigin attributes: text3FontAttributes context: nil].size.height) / 2) withAttributes: text3FontAttributes]; } CGContextRestoreGState(context); //// 畫出“6” CGContextSaveGState(context); CGContextTranslateCTM(context, centerPoint.x, centerPoint.y); CGContextScaleCTM(context, scale, scale); CGRect text6Rect = CGRectMake(-4, 65, 12, 17); { NSString* textContent = @"6"; NSMutableParagraphStyle* text6Style = NSMutableParagraphStyle.defaultParagraphStyle.mutableCopy; text6Style.alignment = NSTextAlignmentCenter; NSDictionary* text6FontAttributes = @{NSFontAttributeName: [UIFont fontWithName: @"Helvetica-Bold" size: 18], NSForegroundColorAttributeName: fontColor, NSParagraphStyleAttributeName: text6Style}; [textContent drawInRect: CGRectOffset(text6Rect, 0, (CGRectGetHeight(text6Rect) - [textContent boundingRectWithSize: text6Rect.size options: NSStringDrawingUsesLineFragmentOrigin attributes: text6FontAttributes context: nil].size.height) / 2) withAttributes: text6FontAttributes]; } CGContextRestoreGState(context); //// 畫出“9” CGContextSaveGState(context); CGContextTranslateCTM(context, centerPoint.x, centerPoint.y); CGContextScaleCTM(context, scale, scale); CGRect text9Rect = CGRectMake(-82, -8, 12, 17); { NSString* textContent = @"9"; NSMutableParagraphStyle* text9Style = NSMutableParagraphStyle.defaultParagraphStyle.mutableCopy; text9Style.alignment = NSTextAlignmentCenter; NSDictionary* text9FontAttributes = @{NSFontAttributeName: [UIFont fontWithName: @"Helvetica-Bold" size: 18], NSForegroundColorAttributeName: fontColor, NSParagraphStyleAttributeName: text9Style}; [textContent drawInRect: CGRectOffset(text9Rect, 0, (CGRectGetHeight(text9Rect) - [textContent boundingRectWithSize: text9Rect.size options: NSStringDrawingUsesLineFragmentOrigin attributes: text9FontAttributes context: nil].size.height) / 2) withAttributes: text9FontAttributes]; } CGContextRestoreGState(context); //// 畫出表盤刻度 CGContextSaveGState(context); CGContextTranslateCTM(context, centerPoint.x, centerPoint.y); CGContextScaleCTM(context, scale, scale); UIBezierPath* markPath = UIBezierPath.bezierPath; [markPath moveToPoint: CGPointMake(-2, -85)]; [markPath addLineToPoint: CGPointMake(2, -85)]; [markPath addLineToPoint: CGPointMake(2, -93)]; [markPath addLineToPoint: CGPointMake(-2, -93)]; [markPath addLineToPoint: CGPointMake(-2, -85)]; [markPath closePath]; [markPath moveToPoint: CGPointMake(-1, 93)]; [markPath addLineToPoint: CGPointMake(3, 93)]; [markPath addLineToPoint: CGPointMake(3, 85)]; [markPath addLineToPoint: CGPointMake(-1, 85)]; [markPath addLineToPoint: CGPointMake(-1, 93)]; [markPath closePath]; [markPath moveToPoint: CGPointMake(-45, -72.15)]; [markPath addLineToPoint: CGPointMake(-41.54, -74.15)]; [markPath addLineToPoint: CGPointMake(-45.54, -81.08)]; [markPath addLineToPoint: CGPointMake(-49, -79.08)]; [markPath addLineToPoint: CGPointMake(-45, -72.15)]; [markPath closePath]; [markPath moveToPoint: CGPointMake(44.87, 81.5)]; [markPath addLineToPoint: CGPointMake(48.33, 79.5)]; [markPath addLineToPoint: CGPointMake(44.33, 72.57)]; [markPath addLineToPoint: CGPointMake(40.87, 74.57)]; [markPath addLineToPoint: CGPointMake(44.87, 81.5)]; [markPath closePath]; [markPath moveToPoint: CGPointMake(-75.07, -40)]; [markPath addLineToPoint: CGPointMake(-73.07, -43.46)]; [markPath addLineToPoint: CGPointMake(-80, -47.46)]; [markPath addLineToPoint: CGPointMake(-82, -44)]; [markPath addLineToPoint: CGPointMake(-75.07, -40)]; [markPath closePath]; [markPath moveToPoint: CGPointMake(79.58, 48.13)]; [markPath addLineToPoint: CGPointMake(81.58, 44.67)]; [markPath addLineToPoint: CGPointMake(74.65, 40.67)]; [markPath addLineToPoint: CGPointMake(72.65, 44.13)]; [markPath addLineToPoint: CGPointMake(79.58, 48.13)]; [markPath closePath]; [markPath moveToPoint: CGPointMake(-85, 2)]; [markPath addLineToPoint: CGPointMake(-85, -2)]; [markPath addLineToPoint: CGPointMake(-93, -2)]; [markPath addLineToPoint: CGPointMake(-93, 2)]; [markPath addLineToPoint: CGPointMake(-85, 2)]; [markPath closePath]; [markPath moveToPoint: CGPointMake(93, 1)]; [markPath addLineToPoint: CGPointMake(93, -3)]; [markPath addLineToPoint: CGPointMake(85, -3)]; [markPath addLineToPoint: CGPointMake(85, 1)]; [markPath addLineToPoint: CGPointMake(93, 1)]; [markPath closePath]; [markPath moveToPoint: CGPointMake(-72.57, 44)]; [markPath addLineToPoint: CGPointMake(-74.57, 40.54)]; [markPath addLineToPoint: CGPointMake(-81.5, 44.54)]; [markPath addLineToPoint: CGPointMake(-79.5, 48)]; [markPath addLineToPoint: CGPointMake(-72.57, 44)]; [markPath closePath]; [markPath moveToPoint: CGPointMake(81.08, -45.87)]; [markPath addLineToPoint: CGPointMake(79.08, -49.33)]; [markPath addLineToPoint: CGPointMake(72.15, -45.33)]; [markPath addLineToPoint: CGPointMake(74.15, -41.87)]; [markPath addLineToPoint: CGPointMake(81.08, -45.87)]; [markPath closePath]; [markPath moveToPoint: CGPointMake(-39.67, 75.07)]; [markPath addLineToPoint: CGPointMake(-43.13, 73.07)]; [markPath addLineToPoint: CGPointMake(-47.13, 80)]; [markPath addLineToPoint: CGPointMake(-43.67, 82)]; [markPath addLineToPoint: CGPointMake(-39.67, 75.07)]; [markPath closePath]; [markPath moveToPoint: CGPointMake(48.46, -79.58)]; [markPath addLineToPoint: CGPointMake(45, -81.58)]; [markPath addLineToPoint: CGPointMake(41, -74.65)]; [markPath addLineToPoint: CGPointMake(44.46, -72.65)]; [markPath addLineToPoint: CGPointMake(48.46, -79.58)]; [markPath closePath]; [markColor setFill]; [markPath fill]; CGContextRestoreGState(context);}@endxcode6.1 SDK8.1測(cè)試沒問題！
代碼中已經(jīng)有無比詳細(xì)的注釋，而且該控件簡(jiǎn)單地令人發(fā)指~ 我相信你看的懂得！
我想肯定有同學(xué)已經(jīng)排著隊(duì)，準(zhǔn)備好了板磚，雞蛋什么的，“博主！你妹！說好的無比迅速敏捷地開發(fā)iOS超精美控件 哪里迅速哪里敏捷？說好的奇淫巧技呢？”
都說心急吃不了熱豆腐，我有說文章結(jié)束了么？文章只是出軌而已了……
代碼是寫出來了， 但是在
-(void)drawRect:(CGRect)rect
方法中一筆一筆的勾畫出來，確實(shí)是累人~
所以我要祭出這次文章的純24K真大殺器——PaintCode
圖3
為何要稱PaintCode為終極大殺器？因?yàn)樗娴暮軆?！如果說我們剛剛的項(xiàng)目需要花2~3個(gè)小時(shí)才能完成 而有了PaintCode之后我們只需要10~20分鐘?。。【蛦柲闩虏慌拢。?！
售價(jià)$99的PaintCode用起來就是爽！
我突然想起自己的一個(gè)故事，有一年上大學(xué)，父親到車站來送我，臨上車前，父親叮囑我等他一會(huì)兒他要過鐵道對(duì)面要給我買點(diǎn)東西，說我一個(gè)人過日子會(huì)很艱難，我看見他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難?？墒撬┻^鐵道，要爬上那邊月臺(tái)，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。這時(shí)我看見他的背影，我的淚很快地流下來了。我趕緊拭干了淚。怕他看見，也怕別人看見。我再向外看時(shí)，他已抱了一個(gè)黑塑料袋子往回走了。過鐵道時(shí)，他先將塑料袋散放在地上，自己慢慢爬下，再抱起塑料袋走。到這邊時(shí)，我趕緊去攙他。他和我走到車上，將塑料袋一股腦兒放在我的皮大衣上：“最新的全是外國的動(dòng)作片、游戲、音樂光盤，好好照顧自己”，想起老父親微薄的退休金，我就有點(diǎn)氣憤：“爸，你怎么……”，父親趕忙湊到我的耳邊：“D版的，八國聯(lián)軍當(dāng)年搶得錢是該要回來的”，我：“……”
好了我的故事講完了 你們應(yīng)該知道怎么找PaintCode了額
我么開始PaintCode之旅吧
打開Paint
圖4
就像PS一樣只要你畫的出，就能生成代碼（支持swift哦）
我們就試試畫出DDClock來吧
選中Oval
圖5
按住shift鍵拖出一個(gè)規(guī)則的圓形 ，填充顏色，這個(gè)就是代碼中的rimPath
圖6
再次選中Oval，同樣的方法在拖一個(gè)圓出來，
圖7
這個(gè)就是代碼中的facePath。
在PaintCode中盡量將所有的圖形、顏色都自己取一個(gè)名字，比如我把第一個(gè)Oval取名字rim，第二個(gè)Oval取名字face
這樣表盤的邊框和中間都出來了額，接下來就是表盤的刻度了
選中rect
圖8
拖出其中的一個(gè)小刻度
圖9
然后選中這個(gè)小刻度復(fù)制出另一個(gè)小刻度，放到第一個(gè)刻度的對(duì)面，就像這樣
圖10
然后按住shift鍵 同時(shí)選中這兩個(gè)小刻度，點(diǎn)擊工具欄的Union
圖11
這樣兩個(gè)小刻度就成為了一個(gè)對(duì)象，這時(shí)點(diǎn)擊右側(cè)的Transforms，就會(huì)出現(xiàn)旋轉(zhuǎn)圖形的操作，把旋轉(zhuǎn)中心（圖12中綠色的瞄準(zhǔn)星）拖到鐘表的中心位置
圖12
這樣設(shè)置Rotation的參數(shù)就可以圍繞整個(gè)鐘表旋轉(zhuǎn)這個(gè)刻度了，所以馬上同時(shí)復(fù)制這個(gè)刻度5份，分別操作旋轉(zhuǎn)，讓它們分別旋轉(zhuǎn)30、60、90、120、150這樣所有的刻度都出來了，然后再一次性的選中所有刻度Union一次，把所有刻度合并成一個(gè)圖形。
圖13
接下來就選中Text工具
圖14
選中恰當(dāng)?shù)?a >字體和大小，畫出刻度值和上下午提示的AM/PM
圖15
最后是時(shí)針、分針和秒針了，做法是雷同的，聰明的你肯定知道該怎么做了，反正就是使用規(guī)則圖形，通過Union、Intersection、Difference的操作產(chǎn)生不規(guī)則的圖形
圖16
圖17
圖18
最后看我的項(xiàng)目大體情況；
到了這一步其實(shí)就可以直接復(fù)制代碼走人就OK拉
然后稍微謝謝項(xiàng)目的邏輯代碼，測(cè)試，OK啦，是不是把2、3個(gè)小時(shí)的事情10分鐘完成了？哈哈哈
其實(shí)PaintCode的強(qiáng)大遠(yuǎn)不止于此，里面的Variables的功能，可以將圖形中的某個(gè)值設(shè)置成變量，比如代碼中的hourAngle、 minuteAngle 、 secondAngle 等，DDClock目前的大小的是固定的200x200，其實(shí)使用Variables添加scale的變量，還可以動(dòng)態(tài)的修改所有圖形的大??！當(dāng)然還有Frame的使用啦……
對(duì)于PaintCode博主也只是淺嘗而止，更多強(qiáng)大的功能，同學(xué)們還是自己挖掘吧。
這里附上官網(wǎng)的地址，PaintCode 里面有視頻教程，文檔等（視頻是油管網(wǎng)的，所以需要FQ，呵呵，你懂的）
這里也附上我寫的項(xiàng)目源代碼 DDClock（尼瑪！github使用代理比直接訪問更快，你能忍？）
這個(gè)禮拜，完成了畢設(shè)的主題和一些細(xì)節(jié)，大概是設(shè)計(jì)一套移動(dòng)客戶端和后臺(tái)服務(wù)器安全交互的方案，涉及到各種安全通信，可靠性傳輸，內(nèi)容加解密等內(nèi)容，我會(huì)把這個(gè)設(shè)想寫到博客上的；
女朋友回老家了，剩下自己一個(gè)人擼啊擼T_T;
天殺的12306買了兩天都沒買到回家的票，明明買不到票，卻還要寫著有余票，哎，最后我決定坐頭等艙回家了~
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
