DDYRadarView.png
DDYPulseView.png
請關(guān)注，防止你用了洼怔，我改了，有問題連個商量的人都找不到...
雷達(dá)掃描圖
DDYRadarView.h
#import <UIKit/UIKit.h>
@class DDYRadarView;
@class DDYRadarPointView;
//------------------------ 數(shù)據(jù)代理 ------------------------//
@protocol DDYRadarViewDataSource <NSObject>
@optional
/** 點(diǎn)位數(shù)量 最大為8 */
- (NSInteger)numberOfPointInRadarView:(DDYRadarView *)radarView;
/** 點(diǎn)位視圖 */
- (DDYRadarPointView *)radarView:(DDYRadarView *)radarView viewForIndex:(NSInteger)index;
/** 點(diǎn)位圖片 */
- (UIImage *)radarView:(DDYRadarView *)radarView imageForIndex:(NSInteger)index;
@end
//------------------------ 視圖代理 ------------------------//
@protocol DDYRadarViewDelegate <NSObject>
@optional
/** 點(diǎn)擊點(diǎn)位回調(diào) */
- (void)radarView:(DDYRadarView *)radarView didSelectItemAtIndex:(NSInteger)index;
@end
//----------------------- 點(diǎn)位頭像視圖 -----------------------//
@interface DDYRadarPointView : UIView
@property (nonatomic, strong) UIImage *image;
@end
//------------------------ 扇形指示器 ------------------------//
@interface DDYRadarIndicatorView : UIView
@end
//------------------------- 雷達(dá)視圖 -------------------------//
@interface DDYRadarView : UIView
/** 數(shù)據(jù)源代理 */
@property (nonatomic, weak) id <DDYRadarViewDataSource> dataSource;
/** 視圖代理 */
@property (nonatomic, weak) id <DDYRadarViewDelegate> delegate;
/** 同心圓半徑 */
@property (nonatomic, assign) CGFloat radius;
/** 同心圓個數(shù) */
@property (nonatomic, assign) NSInteger circleNumber;
/** 同心圓邊框顏色 */
@property (nonatomic, strong) UIColor *circleColor;
/** 指示器開始顏色 */
@property (nonatomic, strong) UIColor *indicatorStartColor;
/** 指示器結(jié)束顏色 */
@property (nonatomic, strong) UIColor *indicatorEndColor;
/** 是否順時(shí)針方向 */
@property (nonatomic, assign) BOOL indicatorClockwise;
/** 指示器角度大小 */
@property (nonatomic, assign) CGFloat indicatorAngle;
/** 指示器旋轉(zhuǎn)速度 */
@property (nonatomic, assign) CGFloat indicatorSpeed;
/** 視圖背景圖片 */
@property (nonatomic, strong) UIImage *backgroundImage;
/** 顯示虛分割線 */
@property (nonatomic, assign) BOOL showSeparator;
/** 雷達(dá)視圖對象 */
+ (instancetype)radarView;
/** 開始動畫 */
- (void)startScanAnimation;
/** 結(jié)束動畫 */
- (void)stopScanAnimation;
/** 刷新以展示數(shù)據(jù) */
- (void)reloadData;
@end
DDYRadarView.m
#import "DDYRadarView.h"
#import <QuartzCore/QuartzCore.h>
//----------------------- 點(diǎn)位頭像視圖 -----------------------//
@implementation DDYRadarPointView
- (void)drawRect:(CGRect)rect {
[super drawRect:rect];
[_image drawInRect:self.bounds];
}
- (void)setImage:(UIImage *)image {
_image = image;
[self setNeedsDisplay];
}
@end
//------------------------ 扇形指示器 ------------------------//
@interface DDYRadarIndicatorView ()
/** 半徑 */
@property (nonatomic, assign) CGFloat radius;
/** 指示器開始顏色 */
@property (nonatomic, strong) UIColor *startColor;
/** 指示器結(jié)束顏色 */
@property (nonatomic, strong) UIColor *endColor;
/** 指示器角度 */
@property (nonatomic, assign) CGFloat angle;
/** 是否是否順時(shí)針 */
@property (nonatomic, assign) BOOL clockwise;
@end
@implementation DDYRadarIndicatorView
- (void)drawRect:(CGRect)rect {
[super drawRect:rect];
// 畫布
CGContextRef context = UIGraphicsGetCurrentContext();
// 漸變色
const CGFloat *startColorComponents = CGColorGetComponents(_startColor.CGColor);
const CGFloat *endColorComponents = CGColorGetComponents(_endColor.CGColor);
for (int i=0; i<_angle; i++) {
CGFloat ratio = (_clockwise?(_angle-i):i)/_angle;
CGFloat r = startColorComponents[0] - (startColorComponents[0]-endColorComponents[0])*ratio;
CGFloat g = startColorComponents[1] - (startColorComponents[1]-endColorComponents[1])*ratio;
CGFloat b = startColorComponents[2] - (startColorComponents[2]-endColorComponents[2])*ratio;
CGFloat a = startColorComponents[3] - (startColorComponents[3]-endColorComponents[3])*ratio;
// 畫扇形
CGContextSetFillColorWithColor(context, DDYColor(r, g, b, a).CGColor);
CGContextSetLineWidth(context, 0);
CGContextMoveToPoint(context, self.center.x, self.center.y);
CGContextAddArc(context, self.center.x, self.center.y, _radius, i*M_PI/180, (i + (_clockwise?-1:1))*M_PI/180, _clockwise);
CGContextDrawPath(context, kCGPathFillStroke);
}
}
@end
//------------------------- 雷達(dá)視圖 -------------------------//
@interface DDYRadarView ()
@property (nonatomic, strong) DDYRadarIndicatorView *indicatorView;
@property (nonatomic, strong) UIView *pointsView;
@end
@implementation DDYRadarView
+ (instancetype)radarView {
return [[self alloc] initWithFrame:[UIScreen mainScreen].bounds];
}
- (instancetype)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
[self prepare];
[self addSubview:self.indicatorView];
}
return self;
}
- (void)prepare {
_radius = self.ddy_w/2.-20;
_circleNumber = 3;
_circleColor = DDY_White;
_indicatorStartColor = DDY_Blue;
_indicatorEndColor = DDY_ClearColor;
_indicatorClockwise = YES;
_indicatorAngle = 360;
_indicatorSpeed = 90;
_backgroundImage = [UIImage imageWithColor:DDY_Gray size:DDYSCREENSIZE];
_showSeparator = YES;
}
- (DDYRadarIndicatorView *)indicatorView {
if (!_indicatorView) {
_indicatorView = [[DDYRadarIndicatorView alloc] initWithFrame:self.bounds];
_indicatorView.backgroundColor = DDY_ClearColor;
}
return _indicatorView;
}
- (void)resetIndicatorView {
_indicatorView.radius = _radius;
_indicatorView.angle = _indicatorAngle;
_indicatorView.clockwise = _indicatorClockwise;
_indicatorView.startColor = _indicatorStartColor;
_indicatorView.endColor = _indicatorEndColor;
}
- (UIView *)pointsView {
if (!_pointsView) {
_pointsView = [[UIView alloc] initWithFrame:self.bounds].viewBGColor(DDY_ClearColor);
[self insertSubview:_pointsView aboveSubview:self.indicatorView];
}
return _pointsView;
}
- (void)drawCircle {
CGContextRef context = UIGraphicsGetCurrentContext();
for (int i=0; i<_circleNumber; i++) {
CGContextSetStrokeColorWithColor(context, _circleColor.CGColor);
CGContextSetLineWidth(context, 1.);
CGContextAddArc(context, self.center.x, self.center.y, _radius*(i+1)/_circleNumber, 0, 2*M_PI, 0);
CGContextDrawPath(context, kCGPathStroke);
}
}
- (void)drawSeparator {
// 繪制
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetStrokeColorWithColor(context, _circleColor.CGColor);
CGContextSetLineWidth(context, .7);
CGFloat length1[] = {5, 5};
CGContextSetLineDash(context, 0, length1, 2);
for (int i=0; i<4; i++) {
CGContextMoveToPoint(context, self.center.x+sinf(i*M_PI_4)*_radius, self.center.y-cosf(i*M_PI_4)*_radius);
CGContextAddLineToPoint(context, self.center.x+sinf((i+4)*M_PI_4)*_radius, self.center.y-cosf((i+4)*M_PI_4)*_radius);
}
CGContextStrokePath(context);
}
- (void)drawRect:(CGRect)rect {
[super drawRect:rect];
[_backgroundImage drawInRect:self.bounds];
[self resetIndicatorView];
[self drawCircle];
[self drawSeparator];
}
- (void)startScanAnimation {
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
animation.toValue = [NSNumber numberWithFloat:(_indicatorClockwise?1:-1) * M_PI * 2.];
animation.duration = 360.f/_indicatorSpeed;
animation.cumulative = YES;
animation.repeatCount = INT_MAX;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
[self.indicatorView.layer addAnimation:animation forKey:@"rotationAnimation"];
}
- (void)stopScanAnimation {
[self.indicatorView.layer removeAnimationForKey:@"rotationAnimation"];
}
#pragma mark 刷新以展示數(shù)據(jù)
- (void)reloadData
{
[self.pointsView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
if ([self.dataSource respondsToSelector:@selector(numberOfPointInRadarView:)])
{
for (int index=0; index<MIN([self.dataSource numberOfPointInRadarView:self], 8); index++)
{
DDYRadarPointView *pointView;
if ([self.dataSource respondsToSelector:@selector(radarView:viewForIndex:)])
{
pointView = [self.dataSource radarView:self viewForIndex:index];
}
else if ([self.dataSource respondsToSelector:@selector(radarView:imageForIndex:)])
{
if ([self.dataSource radarView:self imageForIndex:index]) {
pointView = [[DDYRadarPointView alloc] init];
pointView.image = [self.dataSource radarView:self imageForIndex:index];
}
}
if (pointView) {
pointView.ddy_size = CGSizeMake(40, 40);
pointView.center = [self pointWithIndex:index];
pointView.tag = 100+index;
[pointView addTapTarget:self action:@selector(handleTopPointView:)];
[self.pointsView addSubview:pointView];
DDYBorderRadius(pointView, pointView.ddy_w/2., .7, DDY_White);
}
}
}
}
#pragma mark 點(diǎn)位數(shù)組
- (CGPoint)pointWithIndex:(NSInteger)index {
CGPoint points[8];
CGFloat radiusBig = _radius;
CGFloat radiusMid = ((_circleNumber-1)*_radius/_circleNumber);
points[0] = CGPointMake(self.center.x+sinf(0*M_PI_4)*radiusBig, self.center.y-cosf(0*M_PI_4)*radiusBig);
points[1] = CGPointMake(self.center.x+sinf(4*M_PI_4)*radiusBig, self.center.y-cosf(4*M_PI_4)*radiusBig);
points[2] = CGPointMake(self.center.x+sinf(6*M_PI_4)*radiusBig, self.center.y-cosf(6*M_PI_4)*radiusBig);
points[3] = CGPointMake(self.center.x+sinf(2*M_PI_4)*radiusBig, self.center.y-cosf(2*M_PI_4)*radiusBig);
points[4] = CGPointMake(self.center.x+sinf(1*M_PI_4)*radiusMid, self.center.y-cosf(1*M_PI_4)*radiusMid);
points[5] = CGPointMake(self.center.x+sinf(3*M_PI_4)*radiusMid, self.center.y-cosf(3*M_PI_4)*radiusMid);
points[6] = CGPointMake(self.center.x+sinf(7*M_PI_4)*radiusMid, self.center.y-cosf(7*M_PI_4)*radiusMid);
points[7] = CGPointMake(self.center.x+sinf(5*M_PI_4)*radiusMid, self.center.y-cosf(5*M_PI_4)*radiusMid);
return points[index];
}
- (void)handleTopPointView:(UITapGestureRecognizer *)gesture {
if ([self.delegate respondsToSelector:@selector(radarView:didSelectItemAtIndex:)]) {
[self.delegate radarView:self didSelectItemAtIndex:gesture.view.tag-100];
}
}
#pragma mark - setter
#pragma mark 同心圓半徑
- (void)setRadius:(CGFloat)radius {
_radius = radius;
[self setNeedsDisplay];
}
#pragma mark 同心圓個數(shù)
- (void)setCircleNumber:(NSInteger)circleNumber {
_circleNumber = circleNumber;
[self setNeedsDisplay];
}
#pragma mark 同心圓邊框顏色
- (void)setCircleColor:(UIColor *)circleColor {
_circleColor = circleColor;
[self setNeedsDisplay];
}
#pragma mark 指示器開始顏色
- (void)setIndicatorStartColor:(UIColor *)indicatorStartColor {
_indicatorStartColor = indicatorStartColor;
[self setNeedsDisplay];
}
#pragma mark 指示器結(jié)束顏色
- (void)setIndicatorEndColor:(UIColor *)indicatorEndColor {
_indicatorEndColor = indicatorEndColor;
[self setNeedsDisplay];
}
#pragma mark 是否順時(shí)針方向
- (void)setIndicatorClockwise:(BOOL)indicatorClockwise {
_indicatorClockwise = indicatorClockwise;
[self setNeedsDisplay];
}
#pragma mark 指示器角度大小
- (void)setIndicatorAngle:(CGFloat)indicatorAngle {
_indicatorAngle = indicatorAngle;
[self setNeedsDisplay];
}
#pragma mark 指示器旋轉(zhuǎn)速度
- (void)setIndicatorSpeed:(CGFloat)indicatorSpeed {
_indicatorSpeed = indicatorSpeed;
[self setNeedsDisplay];
}
#pragma mark 視圖背景圖片
- (void)setBackgroundImage:(UIImage *)backgroundImage {
_backgroundImage = backgroundImage;
[self setNeedsDisplay];
}
#pragma mark 顯示虛分割線
- (void)setShowSeparator:(BOOL)showSeparator {
_showSeparator = showSeparator;
[self setNeedsDisplay];
}
@end
應(yīng)用DDYRadarVC.m
#import "DDYRadarVC.h"
@interface DDYRadarVC ()<DDYRadarViewDataSource, DDYRadarViewDelegate>
@property (nonatomic, strong) DDYRadarView *radarView;
@end
@implementation DDYRadarVC
- (void)viewDidLoad {
[super viewDidLoad];
[self.radarView startScanAnimation];
[self.radarView reloadData];
[self addObserverActive];
}
- (DDYRadarView *)radarView {
if (!_radarView) {
_radarView = [DDYRadarView radarView];
_radarView.dataSource = self;
_radarView.delegate = self;
[self.view addSubview:self.radarView];
}
return _radarView;
}
- (NSInteger)numberOfPointInRadarView:(DDYRadarView *)radarView {
return 8;
}
- (UIImage *)radarView:(DDYRadarView *)radarView imageForIndex:(NSInteger)index {
return [UIImage imageWithColor:DDYRandomColor size:CGSizeMake(40, 40)];
}
- (void)radarView:(DDYRadarView *)radarView didSelectItemAtIndex:(NSInteger)index {
DDYLog(@"click index:%ld",index);
}
#pragma mark 監(jiān)聽掛起和重新進(jìn)入程序
#pragma mark 添加監(jiān)聽
- (void)addObserverActive
{
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(applicationWillResignActive:)
name:UIApplicationWillResignActiveNotification object:nil]; //監(jiān)聽home鍵掛起.
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(applicationDidBecomeActive:)
name:UIApplicationDidBecomeActiveNotification object:nil]; //監(jiān)聽重新進(jìn)入程序.
}
#pragma mark 進(jìn)入前臺
- (void)applicationDidBecomeActive:(UIApplication *)application
{
[self.radarView startScanAnimation];
}
#pragma mark 掛起程序
- (void)applicationWillResignActive:(UIApplication *)application
{
[self.radarView stopScanAnimation];
}
@end
脈沖掃描圖
DDYPulseView.h
#import <UIKit/UIKit.h>
//------------------------ 圓形視圖 ------------------------//
@interface DDYPulseCircleView : UIView
@end
//------------------------ 脈沖視圖 ------------------------//
@interface DDYPulseView : UIView
/** 填充顏色 */
@property (nonatomic, strong) UIColor *fillColor;
/** 線條顏色 */
@property (nonatomic, strong) UIColor *strokeColor;
/** 最小圓半徑 */
@property (nonatomic, assign) CGFloat minRadius;
/** 創(chuàng)建對象 */
+ (instancetype)pulseView;
/** 開始動畫 */
- (void)startAnimation;
/** 結(jié)束動畫 */
- (void)stopAnimation;
@end
DDYPulseView.m
#import "DDYPulseView.h"
//------------------------ 圓形視圖 ------------------------//
@interface DDYPulseCircleView ()
/** 填充顏色 */
@property (nonatomic, strong) UIColor *fillColor;
/** 線條顏色 */
@property (nonatomic, strong) UIColor *strokeColor;
/** 初始最小半徑 */
@property (nonatomic, assign) CGFloat minRadius;
@end
@implementation DDYPulseCircleView
- (void)drawRect:(CGRect)rect {
[super drawRect:rect];
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetStrokeColorWithColor(context, _strokeColor.CGColor);
CGContextSetFillColorWithColor(context, _fillColor.CGColor);
CGContextAddArc(context, self.center.x, self.center.y, _minRadius, 0, 2*M_PI, 0);
CGContextFillPath(context);
CGContextDrawPath(context, kCGPathStroke);
}
@end
//------------------------ 脈沖視圖 ------------------------//
@interface DDYPulseView ()
@property (strong, nonatomic) NSTimer *timer;
@end
@implementation DDYPulseView
+ (instancetype)pulseView {
return [[self alloc] initWithFrame:[UIScreen mainScreen].bounds];
}
- (instancetype)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
[self prepare];
}
return self;
}
- (void)prepare {
_fillColor = [UIColor colorWithRed:23/255.0 green:1.0 blue:1.0 alpha:1.0];
_strokeColor = [UIColor colorWithRed:23/255.0 green:1.0 blue:1.0 alpha:1.0];
_minRadius = 30;
}
#pragma mark 開啟定時(shí)器 開始動畫
- (void)startAnimation {
[self stopAnimation];
self.timer = [NSTimer scheduledTimerWithTimeInterval:0.6 target:self selector:@selector(radarAnimation) userInfo:nil repeats:YES];
[[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}
#pragma mark 結(jié)束動畫
- (void)stopAnimation {
if (self.timer) {
[self.timer invalidate];
self.timer = nil;
}
}
#pragma mark 掃描動畫
- (void)radarAnimation
{
DDYPulseCircleView *circleView = [[DDYPulseCircleView alloc] initWithFrame:self.bounds];
circleView.backgroundColor = DDY_ClearColor;
circleView.fillColor = _fillColor;
circleView.strokeColor = _strokeColor;
circleView.minRadius = _minRadius;
[self addSubview:circleView];
[UIView animateWithDuration:3 animations:^{
circleView.transform = CGAffineTransformScale(circleView.transform, DDYSCREENW/2/30, DDYSCREENW/2/30);
circleView.alpha = 0;
} completion:^(BOOL finished) {
[circleView removeFromSuperview];
}];
}
#pragma mark - setter
#pragma mark 填充色
- (void)setFillColor:(UIColor *)fillColor {
_fillColor = fillColor;
[self startAnimation];
}
#pragma mark 同心圓線條顏色
- (void)setStrokeColor:(UIColor *)strokeColor {
_strokeColor = strokeColor;
[self startAnimation];
}
#pragma mark 最小圓半徑
- (void)setMinRadius:(CGFloat)minRadius {
_minRadius = minRadius;
[self startAnimation];
}
- (void)dealloc {
[self stopAnimation];
}
@end
應(yīng)用 DDYPulseVC.m
#import "DDYPulseVC.h"
@interface DDYPulseVC ()
@property (nonatomic, strong) DDYPulseView *pulseView;
@end
@implementation DDYPulseVC
- (void)viewDidLoad {
[super viewDidLoad];
[self.pulseView startAnimation];
self.pulseView.fillColor = APP_MAIN_COLOR;
self.pulseView.strokeColor = APP_MAIN_COLOR;
self.pulseView.minRadius = 30;
}
- (DDYPulseView *)pulseView {
if (!_pulseView) {
_pulseView = [DDYPulseView pulseView];
[self.view addSubview:_pulseView];
}
return _pulseView;
}
@end
碼農(nóng)不易點(diǎn)星星 scan DDYRadarView code
碼農(nóng)不易點(diǎn)星星 scan DDYPulseView code
