iOS菜鸟的小转盘
2014-07-10 16:47
148 查看
有个一年左右开发经验的小菜鸟，自定义了一个转盘，作用是按下按钮，转盘自动旋转，再次按下按钮，转盘停止。并且转盘用手拖动也能够转动。
因为没有合适的图片就用底层的绘图效果。
@interface CircularView :
UIView
{
UIImageView *_pointerImgView;
UIView *_centerView;
float _angle;
BOOL _isDrag;
float _rotateAngle;
UIButton *_rotateButton;
BOOL _isRotate;
UILabel *_decideLabel;
int _num;
}
@property(nonatomic,assign,readwrite)float radius;
@end
@implementation CircularView
- (void)drawRect:(CGRect)rect{
NSAssert(rect.size.width >
_radius *
2.0 && rect.size.height >
_radius *
2.0,
@"the
radius
is
too
long");
CGRect ellipseRect =
CGRectMake((rect.size.width -
_radius *
2.0)/2.0,
(rect.size.height -
_radius *
2.0)/2.0
- 60,
_radius *
2.0,
_radius *
2.0);
//绘制三种圆形转盘
CGMutablePathRef path =
CGPathCreateMutable();
CGPathAddEllipseInRect(path,
NULL,ellipseRect);
CGPathAddEllipseInRect(path,
NULL,CGRectMake((rect.size.width -
_radius * 2.0
+ 80)/2.0,
(rect.size.height -
_radius * <
4000
/span>2.0
+ 80)/2.0
- 60,
_radius * 2.0
- 80,
_radius * 2.0
- 80));
CGPathAddEllipseInRect(path,
NULL,CGRectMake((rect.size.width -
_radius * 2.0
+ 160)/2.0,
(rect.size.height -
_radius * 2.0
+ 160)/2.0
- 60,
_radius * 2.0
- 160,
_radius * 2.0
- 160));
CGContextRef currentContext =
UIGraphicsGetCurrentContext();
CGContextAddPath(currentContext, path);
CGContextSetLineWidth(currentContext,
10.0f);
[[UIColor
magentaColor] setStroke];
CGContextDrawPath(currentContext,
kCGPathStroke);
CGPathRelease(path);
//绘制线条
CGContextRef context =
UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context,
2.0);
CGContextSetStrokeColorWithColor(context, [UIColor
redColor].CGColor);
for (int i =
0; i <
12; i++) {
CGContextMoveToPoint(context,
self.center.x +
_radius * cosf(i * (M_PI /
6) +
M_PI /
12), self.center.y -
60 +
_radius * sinf(i * (M_PI /
6) +
M_PI /
12));
CGContextAddLineToPoint(context,
self.center.x,
self.center.y -
60);
}
CGContextStrokePath(context);
CGContextSetLineWidth(context,
2.5);
CGContextSetStrokeColorWithColor(context, [UIColor
whiteColor].CGColor);
for (int i =
0; i <
12; i++) {
CGContextMoveToPoint(context,
self.center.x + (_radius -
85) *
cosf(i * (M_PI /
6) +
M_PI /
12), self.center.y -
60 + (_radius -
85) *
sinf(i * (M_PI /
6) +
M_PI /
12));
CGContextAddLineToPoint(context,
self.center.x,
self.center.y -
60);
}
CGContextStrokePath(context);
//转盘按钮
_rotateButton = [UIButton
buttonWithType:UIButtonTypeCustom];
[_rotateButton
setFrame:CGRectMake((self.bounds.size.width
- 40) /
2.0,
10,
40,
40)];
[_rotateButton
setTitle:@"转"
forState:UIControlStateNormal];
[_rotateButton
setTitleColor:[UIColor
blackColor] forState:UIControlStateNormal];
[_rotateButton
addTarget:self
action:@selector(buttonClick)
forControlEvents:UIControlEventTouchUpInside];
[self
addSubview:_rotateButton];
_isDrag = NO;
_isRotate =
NO;
//转盘标签
int num =
0;
int numSmall =
0;
NSArray *bigArr = [NSArray
arrayWithObjects:@"子",@"丑",@"寅",@"卯",@"辰",@"巳",@"午",@"未",@"申",@"酉",@"戌",@"亥",nil];
for (int i =
0; i <
12; i++) {
UILabel *label = [[UILabel
alloc]initWithFrame:CGRectMake(0,
0,
40,
40)];
label.textAlignment =
NSTextAlignmentCenter;
label.center =
CGPointMake(self.center.x + (_radius -
20) *
cosf(i * (M_PI /
6)),
self.center.y -
60 + (_radius -
20) *
sinf(i * (M_PI /
6)));
num = i +
2;
if (num >
11) {
num -=
12;
}
label.text = [bigArr
objectAtIndex:num];
[self
addSubview:label];
for (int j =
0; j <
2; j++) {
numSmall = i *
2 + j +
5;
if (numSmall >
23) {
numSmall -=
24;
}
UILabel *label = [[UILabel
alloc]initWithFrame:CGRectMake(0,
0,
20,
20)];
label.textAlignment =
NSTextAlignmentCenter;
label.center =
CGPointMake(self.center.x + (_radius -
60) *
cosf(M_PI /
24 + (i *
2 + j) * (M_PI /
12)),
self.center.y -
60 + (_radius -
60) *
sinf(M_PI /
24 + (i *
2 + j) * (M_PI /
12)));
if (numSmall %
2 ==
0) {
label.text =
@"大";
}
else label.text =
@"小";
[self
addSubview:label];
}
}
//转盘上的指针
_pointerImgView = [[UIImageView
alloc]initWithFrame:CGRectMake((rect.size.width -
_radius * 2.0)/2.0
+ _radius * 7.0
/ 8.0,
(rect.size.height -
_radius * 2.0)/2.0
- 60,
_radius / 4.0,
_radius)];
_pointerImgView.backgroundColor = [UIColor
blueColor];
_centerView = [[UIView
alloc]initWithFrame:CGRectMake(_pointerImgView.frame.size.width
/ 2.0
- 0.5,
_pointerImgView.frame.size.height -
1,
1,
1)];
[_pointerImgView
addSubview:_centerView];
[self
addSubview:_pointerImgView];
//转动后label发生变化
UIView *view = [[UIView
alloc]initWithFrame:CGRectMake((self.bounds.size.width
- (_rotateButton.frame.origin.x +
_rotateButton.frame.size.width +
80)) /
2.0,
_rotateButton.frame.origin.y +
10,
80,
50)];
view.backgroundColor = [UIColor
blackColor];
view.layer.borderColor = [UIColor
brownColor].CGColor;
view.layer.borderWidth =
2;
view.layer.masksToBounds =
YES;
view.layer.cornerRadius =
10;
[self
addSubview:view];
_decideLabel = [[UILabel
alloc]initWithFrame:CGRectMake((self.bounds.size.width
- (_rotateButton.frame.origin.x +
_rotateButton.frame.size.width +
80)) /
2.0,
_rotateButton.frame.origin.y,
80,
40)];
_decideLabel.backgroundColor = [UIColor
whiteColor];
_decideLabel.textAlignment =
NSTextAlignmentCenter;
_decideLabel.textColor = [UIColor
redColor];
_decideLabel.font = [UIFont
systemFontOfSize:12];
_decideLabel.layer.borderColor = [UIColor
redColor].CGColor;
_decideLabel.layer.borderWidth =
2;
_decideLabel.layer.masksToBounds =
YES;
_decideLabel.layer.cornerRadius =
10;
_decideLabel.text =
@"快选Speed";
[self
addSubview:_decideLabel];
}
- (void)buttonClick{
if (_isDrag) {
_isDrag = NO;
_rotateButton.hidden =
YES;
}
else{
_isDrag = YES;
if (!_isRotate) {
_isRotate = YES;
[self
startAnimation];
[_rotateButton
setTitle:@"停"
forState:UIControlStateNormal];
}
}
}
//开启动画
-(void) startAnimation{
_pointerImgView.layer.position =
CGPointMake(self.center.x,
self.center.y -
60);
[UIView
beginAnimations:nil
context:nil];
[UIView
setAnimationDuration:0.01];
_pointerImgView.layer.anchorPoint =
CGPointMake(0.5,
1);
[UIView
setAnimationDelegate:self];
//动画结束时候运行结束动画接口
[UIView
setAnimationDidStopSelector:@selector(endAnimation)];
_pointerImgView.transform =
CGAffineTransformMakeRotation(_rotateAngle * (M_PI /
180.0f));
[UIView
commitAnimations];
}
-(void)endAnimation{
if (_isDrag) {
_rotateAngle +=
10;
if (_rotateAngle ==
360)
_rotateAngle = 0;
[self
startAnimation];
}
else{
NSNumberFormatter *numberFormatter = [[NSNumberFormatter
alloc] init];
[numberFormatter
setPositiveFormat:@"0"];
_num = [numberFormatter
stringFromNumber:[NSNumber
numberWithFloat:[NSNumber
numberWithFloat:(_rotateAngle /
30)].floatValue]].intValue;
if (_num ==
12) {
_decideLabel.text =
@"选中第12个";
}
_decideLabel.text = [NSString
stringWithFormat:@"选中第%d个",_num];
_pointerImgView.layer.position =
CGPointMake(self.center.x,
self.center.y -
60);
[UIView
beginAnimations:nil
context:nil];
[UIView
setAnimationDuration:1];
[UIView
setAnimationDelegate:self];
_pointerImgView.layer.anchorPoint =
CGPointMake(0.5,
1);
_pointerImgView.transform =
CGAffineTransformMakeRotation(_num * (M_PI /
6.0f));
[UIView
setAnimationDidStopSelector:@selector(noDrag)];
[UIView
commitAnimations];
}
}
- (void)noDrag{
_isRotate =
NO;
_rotateButton.hidden =
NO;
[_rotateButton
setTitle:@"转"
forState:UIControlStateNormal];
}
//移动指针的时候使指针旋转
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
UITouch *touch = [touches
anyObject];
float angle;
if ([_pointerImgView
pointInside:[touch locationInView:_pointerImgView]
withEvent:nil]) {
angle =
M_PI /
45;
}
else{
angle =
M_PI /
2;
}
_pointerImgView.alpha =
0.5;
CGPoint point = [touch
locationInView:_pointerImgView];
/*设a点的坐标为（x0，y0）
b点为（x，y）
距离为r
弧度为@
那么 y=y0+rsin@
x=x0+rcos@*/
float angleTouch = (point.x -
_centerView.frame.origin.x) /
_radius *
180.0 /
M_PI;
if (angleTouch >
0) {
_angle += angle;
}
else if (angleTouch ==
0) {
}
else{
_angle -= angle;
}
_pointerImgView.layer.position =
CGPointMake(self.center.x,
self.center.y -
60);
[UIView
beginAnimations:nil
context:nil];
[UIView
setAnimationDuration:0.1f];
_pointerImgView.layer.anchorPoint =
CGPointMake(0.5,
1);
_pointerImgView.transform =
CGAffineTransformMakeRotation(_angle);
[UIView
commitAnimations];
[super
touchesMoved:touches
withEvent:event];
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{
_pointerImgView.alpha =
1;
[super
touchesEnded:touches
withEvent:event];
}
最后效果如下：
转到第几个就是第几个，而且如果不在中心点会有个滑动到中心的效果
因为没有合适的图片就用底层的绘图效果。
@interface CircularView :
UIView
{
UIImageView *_pointerImgView;
UIView *_centerView;
float _angle;
BOOL _isDrag;
float _rotateAngle;
UIButton *_rotateButton;
BOOL _isRotate;
UILabel *_decideLabel;
int _num;
}
@property(nonatomic,assign,readwrite)float radius;
@end
@implementation CircularView
- (void)drawRect:(CGRect)rect{
NSAssert(rect.size.width >
_radius *
2.0 && rect.size.height >
_radius *
2.0,
@"the
radius
is
too
long");
CGRect ellipseRect =
CGRectMake((rect.size.width -
_radius *
2.0)/2.0,
(rect.size.height -
_radius *
2.0)/2.0
- 60,
_radius *
2.0,
_radius *
2.0);
//绘制三种圆形转盘
CGMutablePathRef path =
CGPathCreateMutable();
CGPathAddEllipseInRect(path,
NULL,ellipseRect);
CGPathAddEllipseInRect(path,
NULL,CGRectMake((rect.size.width -
_radius * 2.0
+ 80)/2.0,
(rect.size.height -
_radius * <
4000
/span>2.0
+ 80)/2.0
- 60,
_radius * 2.0
- 80,
_radius * 2.0
- 80));
CGPathAddEllipseInRect(path,
NULL,CGRectMake((rect.size.width -
_radius * 2.0
+ 160)/2.0,
(rect.size.height -
_radius * 2.0
+ 160)/2.0
- 60,
_radius * 2.0
- 160,
_radius * 2.0
- 160));
CGContextRef currentContext =
UIGraphicsGetCurrentContext();
CGContextAddPath(currentContext, path);
CGContextSetLineWidth(currentContext,
10.0f);
[[UIColor
magentaColor] setStroke];
CGContextDrawPath(currentContext,
kCGPathStroke);
CGPathRelease(path);
//绘制线条
CGContextRef context =
UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context,
2.0);
CGContextSetStrokeColorWithColor(context, [UIColor
redColor].CGColor);
for (int i =
0; i <
12; i++) {
CGContextMoveToPoint(context,
self.center.x +
_radius * cosf(i * (M_PI /
6) +
M_PI /
12), self.center.y -
60 +
_radius * sinf(i * (M_PI /
6) +
M_PI /
12));
CGContextAddLineToPoint(context,
self.center.x,
self.center.y -
60);
}
CGContextStrokePath(context);
CGContextSetLineWidth(context,
2.5);
CGContextSetStrokeColorWithColor(context, [UIColor
whiteColor].CGColor);
for (int i =
0; i <
12; i++) {
CGContextMoveToPoint(context,
self.center.x + (_radius -
85) *
cosf(i * (M_PI /
6) +
M_PI /
12), self.center.y -
60 + (_radius -
85) *
sinf(i * (M_PI /
6) +
M_PI /
12));
CGContextAddLineToPoint(context,
self.center.x,
self.center.y -
60);
}
CGContextStrokePath(context);
//转盘按钮
_rotateButton = [UIButton
buttonWithType:UIButtonTypeCustom];
[_rotateButton
setFrame:CGRectMake((self.bounds.size.width
- 40) /
2.0,
10,
40,
40)];
[_rotateButton
setTitle:@"转"
forState:UIControlStateNormal];
[_rotateButton
setTitleColor:[UIColor
blackColor] forState:UIControlStateNormal];
[_rotateButton
addTarget:self
action:@selector(buttonClick)
forControlEvents:UIControlEventTouchUpInside];
[self
addSubview:_rotateButton];
_isDrag = NO;
_isRotate =
NO;
//转盘标签
int num =
0;
int numSmall =
0;
NSArray *bigArr = [NSArray
arrayWithObjects:@"子",@"丑",@"寅",@"卯",@"辰",@"巳",@"午",@"未",@"申",@"酉",@"戌",@"亥",nil];
for (int i =
0; i <
12; i++) {
UILabel *label = [[UILabel
alloc]initWithFrame:CGRectMake(0,
0,
40,
40)];
label.textAlignment =
NSTextAlignmentCenter;
label.center =
CGPointMake(self.center.x + (_radius -
20) *
cosf(i * (M_PI /
6)),
self.center.y -
60 + (_radius -
20) *
sinf(i * (M_PI /
6)));
num = i +
2;
if (num >
11) {
num -=
12;
}
label.text = [bigArr
objectAtIndex:num];
[self
addSubview:label];
for (int j =
0; j <
2; j++) {
numSmall = i *
2 + j +
5;
if (numSmall >
23) {
numSmall -=
24;
}
UILabel *label = [[UILabel
alloc]initWithFrame:CGRectMake(0,
0,
20,
20)];
label.textAlignment =
NSTextAlignmentCenter;
label.center =
CGPointMake(self.center.x + (_radius -
60) *
cosf(M_PI /
24 + (i *
2 + j) * (M_PI /
12)),
self.center.y -
60 + (_radius -
60) *
sinf(M_PI /
24 + (i *
2 + j) * (M_PI /
12)));
if (numSmall %
2 ==
0) {
label.text =
@"大";
}
else label.text =
@"小";
[self
addSubview:label];
}
}
//转盘上的指针
_pointerImgView = [[UIImageView
alloc]initWithFrame:CGRectMake((rect.size.width -
_radius * 2.0)/2.0
+ _radius * 7.0
/ 8.0,
(rect.size.height -
_radius * 2.0)/2.0
- 60,
_radius / 4.0,
_radius)];
_pointerImgView.backgroundColor = [UIColor
blueColor];
_centerView = [[UIView
alloc]initWithFrame:CGRectMake(_pointerImgView.frame.size.width
/ 2.0
- 0.5,
_pointerImgView.frame.size.height -
1,
1,
1)];
[_pointerImgView
addSubview:_centerView];
[self
addSubview:_pointerImgView];
//转动后label发生变化
UIView *view = [[UIView
alloc]initWithFrame:CGRectMake((self.bounds.size.width
- (_rotateButton.frame.origin.x +
_rotateButton.frame.size.width +
80)) /
2.0,
_rotateButton.frame.origin.y +
10,
80,
50)];
view.backgroundColor = [UIColor
blackColor];
view.layer.borderColor = [UIColor
brownColor].CGColor;
view.layer.borderWidth =
2;
view.layer.masksToBounds =
YES;
view.layer.cornerRadius =
10;
[self
addSubview:view];
_decideLabel = [[UILabel
alloc]initWithFrame:CGRectMake((self.bounds.size.width
- (_rotateButton.frame.origin.x +
_rotateButton.frame.size.width +
80)) /
2.0,
_rotateButton.frame.origin.y,
80,
40)];
_decideLabel.backgroundColor = [UIColor
whiteColor];
_decideLabel.textAlignment =
NSTextAlignmentCenter;
_decideLabel.textColor = [UIColor
redColor];
_decideLabel.font = [UIFont
systemFontOfSize:12];
_decideLabel.layer.borderColor = [UIColor
redColor].CGColor;
_decideLabel.layer.borderWidth =
2;
_decideLabel.layer.masksToBounds =
YES;
_decideLabel.layer.cornerRadius =
10;
_decideLabel.text =
@"快选Speed";
[self
addSubview:_decideLabel];
}
- (void)buttonClick{
if (_isDrag) {
_isDrag = NO;
_rotateButton.hidden =
YES;
}
else{
_isDrag = YES;
if (!_isRotate) {
_isRotate = YES;
[self
startAnimation];
[_rotateButton
setTitle:@"停"
forState:UIControlStateNormal];
}
}
}
//开启动画
-(void) startAnimation{
_pointerImgView.layer.position =
CGPointMake(self.center.x,
self.center.y -
60);
[UIView
beginAnimations:nil
context:nil];
[UIView
setAnimationDuration:0.01];
_pointerImgView.layer.anchorPoint =
CGPointMake(0.5,
1);
[UIView
setAnimationDelegate:self];
//动画结束时候运行结束动画接口
[UIView
setAnimationDidStopSelector:@selector(endAnimation)];
_pointerImgView.transform =
CGAffineTransformMakeRotation(_rotateAngle * (M_PI /
180.0f));
[UIView
commitAnimations];
}
-(void)endAnimation{
if (_isDrag) {
_rotateAngle +=
10;
if (_rotateAngle ==
360)
_rotateAngle = 0;
[self
startAnimation];
}
else{
NSNumberFormatter *numberFormatter = [[NSNumberFormatter
alloc] init];
[numberFormatter
setPositiveFormat:@"0"];
_num = [numberFormatter
stringFromNumber:[NSNumber
numberWithFloat:[NSNumber
numberWithFloat:(_rotateAngle /
30)].floatValue]].intValue;
if (_num ==
12) {
_decideLabel.text =
@"选中第12个";
}
_decideLabel.text = [NSString
stringWithFormat:@"选中第%d个",_num];
_pointerImgView.layer.position =
CGPointMake(self.center.x,
self.center.y -
60);
[UIView
beginAnimations:nil
context:nil];
[UIView
setAnimationDuration:1];
[UIView
setAnimationDelegate:self];
_pointerImgView.layer.anchorPoint =
CGPointMake(0.5,
1);
_pointerImgView.transform =
CGAffineTransformMakeRotation(_num * (M_PI /
6.0f));
[UIView
setAnimationDidStopSelector:@selector(noDrag)];
[UIView
commitAnimations];
}
}
- (void)noDrag{
_isRotate =
NO;
_rotateButton.hidden =
NO;
[_rotateButton
setTitle:@"转"
forState:UIControlStateNormal];
}
//移动指针的时候使指针旋转
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
UITouch *touch = [touches
anyObject];
float angle;
if ([_pointerImgView
pointInside:[touch locationInView:_pointerImgView]
withEvent:nil]) {
angle =
M_PI /
45;
}
else{
angle =
M_PI /
2;
}
_pointerImgView.alpha =
0.5;
CGPoint point = [touch
locationInView:_pointerImgView];
/*设a点的坐标为（x0，y0）
b点为（x，y）
距离为r
弧度为@
那么 y=y0+rsin@
x=x0+rcos@*/
float angleTouch = (point.x -
_centerView.frame.origin.x) /
_radius *
180.0 /
M_PI;
if (angleTouch >
0) {
_angle += angle;
}
else if (angleTouch ==
0) {
}
else{
_angle -= angle;
}
_pointerImgView.layer.position =
CGPointMake(self.center.x,
self.center.y -
60);
[UIView
beginAnimations:nil
context:nil];
[UIView
setAnimationDuration:0.1f];
_pointerImgView.layer.anchorPoint =
CGPointMake(0.5,
1);
_pointerImgView.transform =
CGAffineTransformMakeRotation(_angle);
[UIView
commitAnimations];
[super
touchesMoved:touches
withEvent:event];
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{
_pointerImgView.alpha =
1;
[super
touchesEnded:touches
withEvent:event];
}
最后效果如下：
转到第几个就是第几个，而且如果不在中心点会有个滑动到中心的效果
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- iOS菜鸟学习—— NSSortDescriptor的使用
- iOS菜鸟学习——如何实现Label文本自适应
- ios菜鸟之路：iphone使用照片管理器，从本地上传或摄像头拍照
- ios菜鸟之路:图片的拉伸的2种方法
- 菜鸟：IOS 学习：磨难记（第一天）
- ios菜鸟之路:UIButton换图片或背景图或修改Select的机制（小贴士）
- iOS菜鸟学习——声音的播放
- ios菜鸟之路：控件的抖动特效，密码错误时的抖动提示
- IOS菜鸟起飞之路
- iOS菜鸟学习——UITextField return键隐藏键盘
- iOS菜鸟学习——图片resize的实现
- ios菜鸟之路：iphone开发中UIAlertView开发，及多按键的实现
- ios菜鸟之路：iphone google map 定位的实现
- 菜鸟妞妞学ios之获取地理位置
- iOS菜鸟学习——UITextView return键隐藏键盘
- iOS菜鸟学习——通过nib文件自定义Cell
- iOS菜鸟学习——NSNotification
- iOS菜鸟学习——UIWebView的使用
- iPad应用开发实践指南：菜鸟如何用ios 5开发ipad上的复杂应用程序
- 菜鸟：IOS 学习：磨难记 （第二天）