【转】iOS25彩票 幸运转盘

原文 ： http://www.it165.net/pro/html/201409/21216.html

最终效果图:

各个view的关系图:

背景圆盘(需穴ky"http://www.it165.net/qq/" target="_blank"
class="keylink">qq/2828tKbA7SlMdWNreUJhc2VCYWNrZ3JvdW5kLnBuZzwvc3Ryb25nPjwvcD4KPHA+PGltZyBzcmM9"http://www.it165.net/uploadfile/files/2014/0901/20140901192959329.png"
alt="\">

盖在背景圆盘上面的转盘 LuckyRotateWheel.png

代表一个星座或生肖的按钮背景图片

穴ky"http://www.it165.net/qq/" target="_blank"
class="keylink">qq0tL2oMTK49iyyotLU1+7Pwre91tC1486qw6q147340NDQ/deqPC9zdHJvbmc+PC9wPgo8cD48c3Ryb25nPjxpbWcgc3JjPQ=="http://www.it165.net/uploadfile/files/2014/0901/20140901193000331.png"
alt="\">

对背景圆盘进行扣图,并在其上面盖上转盘图片的核心代码

在自定义的背景view中,画好了背景圆盘和背景转盘之后,

一次性添加12个代表星座或生肖的按钮,并设置旋转角度

一张集合了所有的代表星座的按钮的背景图片的大图片

一张集合了所有的代表星座的按钮的背景图片的大图片

需要根据不同的按钮的i值,

利用CGImageCreateWithImageInRect方法

从大图片中裁剪出一张小图片作为按钮的背景图片

供控制器调用,让圆转盘(circleBgView)慢悠悠地转

当用户点击圆转盘中心的【开始选号】按钮时，

让circleBgView所在图层,利用核心动画CA,

进行假的疯狂地快速旋转,并且动画完成时,

才让cirleBgView的transform真正地旋转负的一定角度,

让被点击的按钮指向正上方

控制器

01.<strong>//

02.//  LuckyNumController.h

03.//  25_彩票

04.//

05.//  Created by beyond on 14-8-27.

06.//  Copyright (c) 2014年 com.beyond. All rights reserved.

07.//

08. 

09.#import <UIKit/UIKit.h>

10. 

11.@interface LuckyNumController : UIViewController

12. 

13.@end

14.</strong>

01.//

02.//  LuckyNumController.m

03.//  25_彩票

04.//

05.//  Created by beyond on 14-8-27.

06.//  Copyright (c) 2014年 com.beyond. All rights reserved.

07.//

08. 

09.#import "LuckyNumController.h"

10.// 两个封装的view

11.// 顶部的三个按钮作为一整体添加到控制器的view

12.#import "TopThreeBtnsAsOne.h"

13.// 中间的所有东东,作为一个整体添加到控制器的view

14.#import "CircleView.h"

15.#import "CircleViewDelegate.h"

16. 

17.@interface LuckyNumController ()<CircleViewDelegate>

18.{

19.TopThreeBtnsAsOne *_threeButton;

20.CircleView *_circle;

21.}

22.@end

23. 

24.@implementation LuckyNumController

25.#pragma mark - 生命周期方法

26.// 控制器的view消失的时候,可以暂停转盘

27.- (void)viewDidDisappear:(BOOL)animated

28.{

29.[super viewDidDisappear:animated];

30. 

31.[_circle pauseRotate];

32.}

33.// 控制器的view出现的时候,才需慢慢转动转盘

34.- (void)viewWillAppear:(BOOL)animated

35.{

36.[super viewWillAppear:animated];

37. 

38.[_circle startSlowlyRotate];

39.}

40. 

41.- (void)viewDidLoad

42.{

43.[super viewDidLoad];

44. 

45.// 1.根据4inch或3.5   添加一个全屏的背景

46.[self setupFullScreenBg];

47. 

48.// 2.添加顶部3个选择按钮作为一个整体

49.[self setupTopThreeBtnsAsOne];

50. 

51.// 3.添加圆转盘整体

52.[self setupCircleView];

53.}

54.// 1.根据4inch或3.5   添加一个全屏的背景

55.- (void)setupFullScreenBg

56.{

57.UIImageView *bg = [[UIImageView alloc] initWithFrame:self.view.bounds];

58.bg.image = [UIImage imageNamed:is4inch?@"LuckyBackground-568h@2x.jpg":@"LuckyBackground@2x.jpg"];

59.bg.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

60.[self.view addSubview:bg];

61.}

62.// 2.添加顶部3个选择按钮作为一个整体

63.- (void)setupTopThreeBtnsAsOne

64.{

65.TopThreeBtnsAsOne *tb = [TopThreeBtnsAsOne threeBtnsAsOne];

66.CGFloat cx = self.view.frame.size.width * 0.5;

67.CGFloat cy = tb.frame.size.height * 0.5 + 20;

68.tb.center = CGPointMake(cx, cy);

69.[self.view addSubview:tb];

70._threeButton = tb;

71.}

72.// 3.添加圆转盘整体

73.- (void)setupCircleView

74.{

75.CircleView *circle = [CircleView circleView];

76.// 设置代理,监听其内部的 12星座或生肖按钮的点击状态

77.circle.delegate = self;

78.// 设置转盘为星座类型 或生肖类型

79.circle.circleType = CircleViewTypeAstrology;

80.circle.circleType = CircleViewTypeAnimal;

81.// 置于顶部的三个按钮的下方

82.CGFloat cx = _threeButton.center.x;

83.CGFloat cy = CGRectGetMaxY(_threeButton.frame) + circle.frame.size.height * 0.5;

84.// 对3.5inch作一个调整

85.if (!is4inch) {

86.// 3.5inch屏幕，往上移动20个点

87.cy -= 20;

88.}

89.circle.center = CGPointMake(cx, cy);

90.[self.view addSubview:circle];

91._circle = circle;

92.}

93. 

94.#pragma mark - 转盘的代理方法 略

95.@end

幸运选号顶部的三个按钮,可作为一整体添加到LuckyNumController控制器中

01.//

02.//  TopThreeBtnsAsOne.h

03.//  25_彩票

04.//

05.//  Created by beyond on 14-8-30.

06.//  Copyright (c) 2014年 com.beyond. All rights reserved.

07.//  幸运选号顶部的 三个按钮,可作为一整体添加到LuckyNumController控制器中

08. 

09.#import <UIKit/UIKit.h>

10. 

11.@interface TopThreeBtnsAsOne : UIView

12. 

13.//  类方法返回 从xib创建的对象

14.+ (instancetype)threeBtnsAsOne;

15.@end

01.//

02.//  TopThreeBtnsAsOne.m

03.//  25_彩票

04.//

05.//  Created by beyond on 14-8-30.

06.//  Copyright (c) 2014年 com.beyond. All rights reserved.

07.//  幸运选号顶部的 三个按钮,可作为一整体添加到LuckyNumController控制器中

08. 

09.#import "TopThreeBtnsAsOne.h"

10. 

11.@interface TopThreeBtnsAsOne()

12. 

13.@end

14. 

15.@implementation TopThreeBtnsAsOne

16. 

17.//  类方法返回 从xib创建的对象

18.+ (instancetype)threeBtnsAsOne

19.{

20.return [[NSBundle mainBundle] loadNibNamed:@"TopThreeBtnsAsOne" owner:nil options:nil][0];

21.}

22. 

23.@end

幸运转盘CircleView,是中部最大的view,

它包括由两个部组成,

分别是一个开始按钮、一个背景层CircleBgView,

其中背景层CircleBgView又包括三层,

分别是图片1圆盘(要扣图),图片2转盘,12个按钮

01.//

02.//  CircleView.h

03.//  25_彩票

04.//

05.//  Created by beyond on 14-8-30.

06.//  Copyright (c) 2014年 com.beyond. All rights reserved.

07.//  幸运转盘CircleView,是中部最大的view,它包括由两个部组成,分别是一个开始按钮、一个背景层CircleBgView,其中背景层CircleBgView 又包括三层,分别是图片1圆盘(要扣图),图片2转盘,12个按钮

08. 

09.#import <UIKit/UIKit.h>

10.@protocol CircleViewDelegate;

11. 

12.// 让控制器可以选择幸运转盘的类型,选择星座 还是生肖,从而其内部会从不同的图片中裁剪一个个小按钮的背景图

13.typedef enum {

14.CircleViewTypeAstrology, // 星座

15.CircleViewTypeAnimal // 生肖

16.} CircleViewType;

17. 

18.@interface CircleView : UIView

19. 

20.// 类方法,返回实例对象

21.+ (instancetype)circleView;

22.// 让控制器可以选择幸运转盘的类型,选择星座 还是生肖,从而其内部会从不同的图片中裁剪一个个小按钮的背景图

23.@property (nonatomic, assign) CircleViewType circleType;

24.// 成员:代理,告诉控制器,内部点击的按钮的切换

25.@property (nonatomic, weak) id<CircleViewDelegate> delegate;

26. 

27.// 开始慢悠悠地转动圆盘

28.- (void)startSlowlyRotate;

29.// 暂停计时器

30.- (void)pauseRotate;

31.// 停止圆盘的转动,并且清空计时器

32.- (void)stopRotate;

33.@end

001.//

002.//  CircleView.m

003.//  25_彩票

004.//

005.//  Created by beyond on 14-8-30.

006.//  Copyright (c) 2014年 com.beyond. All rights reserved.

007.//  幸运转盘CircleView,是中部最大的view,它包括由两个部组成,分别是一个开始按钮、一个背景层CircleBgView,其中背景层CircleBgView 又包括三层,分别是图片1圆盘(要扣图),图片2转盘,12个按钮

008. 

009.#import "CircleView.h"

010.// 背景层CircleBgView 又包括三层,分别是图片1圆盘(要扣图),图片2转盘,12个按钮

011.#import "CircleBgView.h"

012.// 代表一个个星座按钮

013.#import "CircleItem.h"

014.#import "CircleViewDelegate.h"

015. 

016.// 速度 : 1秒种转多少度

017.#define ILCircleRotateSpeedPerSecond (M_PI_4/2)

018.// 从transform用公式 算出角度

019.#define ILTransform2Angle(transform) atan2(transform.b, transform.a)

020. 

021. 

022.@interface CircleView ()

023.{

024.// 背景层CircleBgView,其中背景层CircleBgView 又包括三层,分别是图片1圆盘(要扣图),图片2转盘,12个按钮

025.CircleBgView *_circleBgView;

026.CADisplayLink *_timer;

027.}

028.@end

029. 

030.@implementation CircleView

031.#pragma mark - 生命周期方法

032.+ (instancetype)circleView

033.{

034.return [[self alloc] init];

035.}

036.// 供外部调用,设置【Circle背景View 】上的12个按钮是星座图，还是生肖

037.- (void)setCircleType:(CircleViewType)circleType

038.{

039._circleType = circleType;

040. 

041.// 更换【Circle背景View 】内部要使用的大图片

042.if (circleType ==CircleViewTypeAstrology) {

043.[_circleBgView set12BtnsBgWithBigImg:@"LuckyAstrology" selected:@"LuckyAstrologyPressed"];

044.} else {

045.[_circleBgView set12BtnsBgWithBigImg:@"LuckyAnimal" selected:@"LuckyAnimalPressed"];

046.}

047.}

048.// 初始化内部的子控件:1.开始按钮,2.Circle背景View (圆盘,转盘,12个星座或生肖按钮)

049.- (id)initWithFrame:(CGRect)frame

050.{

051.self = [super initWithFrame:frame];

052.if (self) {

053.//        self.backgroundColor = [UIColor yellowColor];

054.// 1.添加背景层CircleBgView,其中背景层CircleBgView 又包括三层,分别是图片1圆盘(要扣图),图片2转盘,12个按钮

055.[self setupCircleBgView];

056. 

057.// 2.添加浮在圆转盘上面的 开始按钮

058.[self setupStartBtn];

059.}

060.return self;

061.}

062.// 1.添加背景层CircleBgView,其中背景层CircleBgView 又包括三层,分别是图片1圆盘(要扣图),图片2转盘,12个按钮

063.- (void)setupCircleBgView

064.{

065.// 内部固定了宽高

066.CircleBgView *bgView = [CircleBgView circleBgView];

067.[self addSubview:bgView];

068._circleBgView = bgView;

069.}

070.// 2.添加浮在圆转盘上面的 开始按钮

071.- (void)setupStartBtn

072.{

073.UIButton *startBtn = [UIButton buttonWithType:UIButtonTypeCustom];

074.// 开始按钮,位于圆转盘的中心

075.startBtn.bounds = CGRectMake(0, 0, 81, 81);

076.startBtn.center = CGPointMake(self.frame.size.width * 0.5, self.frame.size.height * 0.5);

077.// 设置按钮图片

078.[startBtn setBtnBgImgForNormal:@"LuckyCenterButton" highlightedName:@"LuckyCenterButtonPressed"];

079.// 添加监听事件,开始转动转盘

080.[startBtn addTarget:self action:@selector(startBtnClicked) forControlEvents:UIControlEventTouchUpInside];

081. 

082.[self addSubview:startBtn];

083.}

084. 

085. 

086.#pragma mark - 父类方法

087.// setFrame:和setBounds:能保证尺寸永远是286x286

088.- (void)setFrame:(CGRect)frame

089.{

090.frame.size = CGSizeMake(ILCircleWH, ILCircleWH);

091.[super setFrame:frame];

092.}

093. 

094.- (void)setBounds:(CGRect)bounds

095.{

096.bounds.size = CGSizeMake(ILCircleWH, ILCircleWH);

097.[super setBounds:bounds];

098.}

099. 

100.#pragma mark - 私有方法

101.// 监听【开始按钮】的点击事件,利用CA核心动画,进行假的快速旋转

102.- (void)startBtnClicked

103.{

104.// 0.先清空计时器

105.[self stopRotate];

106. 

107.// 1.停止交互

108.self.userInteractionEnabled = NO;

109. 

110.// 2.利用CA核心动画,进行假的 快速狂转

111.[self crazyRotate];

112. 

113.// 通知代理

114.if ([_delegate respondsToSelector:@selector(circleView:willRoateToIndex:)]) {

115.[_delegate circleView:self willRoateToIndex:_circleBgView.selectedBtn.tag];

116.}

117.}

118.// 2.利用CA核心动画进行假的 狂转

119.- (void)crazyRotate

120.{

121.// 固定写法

122.CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];

123.// 从transform用公式 算出角度

124.// #define ILTransform2Angle(transform) atan2(transform.b, transform.a)

125.// 算出被点击的按钮的初始角度

126.CGFloat btnInitialAngle = ILTransform2Angle(_circleBgView.selectedBtn.transform);

127.// 动画持续 时间为2秒

128.anim.duration = 2.0;

129.// 旋转的目标值是  转10圈 - btnInitialAngle

130.anim.toValue = @(M_PI * 20 - btnInitialAngle);

131.// 动画效果  淡进 淡出

132.anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

133.// 代理,动画完成后,会通知代理

134.anim.delegate = self;

135.// 让其所在的图层开始假的 快速旋转动画

136.[_circleBgView.layer addAnimation:anim forKey:nil];

137.}

138.#pragma mark - 动画代理方法,动画执行完毕后自动调用

139.- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag

140.{

141.// 1.允许交互了

142.self.userInteractionEnabled = YES;

143.// 从transform用公式 算出角度

144.// #define ILTransform2Angle(transform) atan2(transform.b, transform.a)

145.// 2. 算出被点击的按钮的初始角度

146.CGFloat btnInitialAngle = ILTransform2Angle(_circleBgView.selectedBtn.transform);

147.// 3. 让被点击的按钮 指向正上方,即让图层 真正地转 负btnInitialAngle度

148._circleBgView.transform = CGAffineTransformMakeRotation(-btnInitialAngle);

149. 

150.// 通知代理(控制器) 被点击的按钮的tag

151.if ([_delegate respondsToSelector:@selector(circleView:didRoateToIndex:)]) {

152.[_delegate circleView:self didRoateToIndex:_circleBgView.selectedBtn.tag];

153.}

154.// 4.继续慢悠悠地转

155.[self performSelector:@selector(startSlowlyRotate) withObject:nil afterDelay:1];

156.}

157. 

158.#pragma mark 供控制器调用,让圆转盘,开始慢悠悠地转

159.- (void)startSlowlyRotate

160.{

161.// NSTimer        只适合做频率比较低的事情

162.// CADisplayLink  适合做频率比较高的事情

163.if (_timer.isPaused) {

164.// 如果CADisplayLink仅仅是暂停状态,那么取消暂停

165._timer.paused = NO;

166.} else {

167.// 先停止旧的 CADisplayLink

168.[_timer invalidate];

169.// 再创建新的 CADisplayLink,每1/60秒,调用一次self的rotating:方法

170._timer = [CADisplayLink displayLinkWithTarget:self selector:@selector(slowlyRotating:)];

171.[_timer addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];

172.}

173.}

174.// 重点~~~ 慢悠悠地旋转

175.// 1秒调用60次，1/60.0秒调用一次

176.- (void)slowlyRotating:(CADisplayLink *)timer

177.{

178.// 速度 : 1秒种转多少度

179.// #define ILCircleRotateSpeedPerSecond (M_PI_4/2)

180. 

181.// 时间 * 速度 == 角度

182.CGFloat angle = timer.duration * ILCircleRotateSpeedPerSecond;

183. 

184.// 旋转一定的角度

185._circleBgView.transform = CGAffineTransformRotate(_circleBgView.transform, angle);

186. 

187.}

188.// 计时器暂停,便可以暂停圆盘的旋转

189.- (void)pauseRotate

190.{

191.// 暂停计时器 CADisplayLink

192._timer.paused = YES;

193.}

194.// 停止圆盘的转动,并且清空计时器

195.- (void)stopRotate

196.{

197.[_timer invalidate];

198._timer = nil;

199.}

200. 

201. 

202.@end

01.//

02.//  CircleViewDelegate.h

03.//  25_彩票

04.//

05.//  Created by beyond on 14-8-31.

06.//  Copyright (c) 2014年 com.beyond. All rights reserved.

07.//  CircleView

08. 

09.#import <Foundation/Foundation.h>

10.@class CircleView;

11.@protocol CircleViewDelegate <NSObject>

12. 

13. 

14. 

15.@optional

16.- (void)circleView:(CircleView *)circleView willRoateToIndex:(NSUInteger)index;

17.- (void)circleView:(CircleView *)circleView didRoateToIndex:(NSUInteger)index;

18. 

19.@end

幸运转盘CircleView的背景层是:CircleBgView,

其中背景层CircleBgView又包括三层,

分别是图片1(背景圆盘, 要扣图),图片2(带棱角的转盘),12个星座按钮(CircleItem)

01.//

02.//  CircleBgView.h

03.//  25_彩票

04.//

05.//  Created by beyond on 14-8-30.

06.//  Copyright (c) 2014年 com.beyond. All rights reserved.

07.//  幸运转盘CircleView的背景层是:CircleBgView,其中背景层CircleBgView 又包括三层,分别是图片1(背景圆盘, 要扣图),图片2(带棱角的转盘),12个星座按钮(CircleItem)

08.//  背景层(3层：最底部圆盘图片、中间转盘图片、顶部的星座小图片)

09. 

10.#import <UIKit/UIKit.h>

11. 

12.@class CircleItem;

13. 

14.// 在.h文件中声明 变量的存在

15.extern const int ILCircleWH;

16. 

17. 

18. 

19.@interface CircleBgView : UIView

20. 

21.// 类方法,返回一个实例对象

22.+ (instancetype)circleBgView;

23. 

24.// 需要根据不同的按钮的i值,利用CGImageCreateWithImageInRect方法,从大图片中裁剪出一张小图片作为按钮的背景图片

25.- (void)set12BtnsBgWithBigImg:(NSString *)normal selected:(NSString *)selected;

26. 

27.// 供外界访问,其内部的当前被点击中的 星座按钮

28.@property (nonatomic, readonly) CircleItem *selectedBtn;

29. 

30.@end

001.//

002.//  CircleBgView.m

003.//  25_彩票

004.//

005.//  Created by beyond on 14-8-30.

006.//  Copyright (c) 2014年 com.beyond. All rights reserved.

007.//  幸运转盘CircleView的背景层是:CircleBgView,其中背景层CircleBgView 又包括三层,分别是图片1(背景圆盘, 要扣图),图片2(带棱角的转盘),12个星座按钮(CircleItem)

008.//  背景层(3层：最底部圆盘图片、中间转盘图片、顶部的星座小图片)

009. 

010.#import "CircleBgView.h"

011. 

012.// 一个自定义的星座按钮

013.#import "CircleItem.h"

014.// 在.m中定义变量

015.const int ILCircleWH = 286;

016. 

017. 

018.@implementation CircleBgView

019. 

020. 

021.#pragma mark - 生命周期方法

022.// 类方法,返回一个实例对象

023.+ (instancetype)circleBgView

024.{

025.return [[self alloc] init];

026.}

027. 

028.- (id)initWithFrame:(CGRect)frame

029.{

030.self = [super initWithFrame:frame];

031.if (self) {

032.self.backgroundColor = [UIColor clearColor];

033.// 1.添加12个的代表星座或生肖的按钮

034.[self add12Btns];

035.}

036.return self;

037.}

038.// 1.添加12个的代表星座或生肖的按钮

039.- (void)add12Btns

040.{

041.for (int i = 0; i < 12; i++) {

042.// 按钮内部会 设置自己的锚点 btn.layer.anchorPoint = CGPointMake(0.5, 1);

043.// 设置按钮所在图层的锚点(底部中点),坐标系以左上角为 0 0,x向右为正,y向下为正

044.// 目的是让所有的按钮在添加的时候,可以围绕锚点,即大圆图片的中心点进行rotate

045. 

046.CircleItem *btn = [CircleItem buttonWithType:UIButtonTypeCustom];

047.// 绑定tag,目的是要告诉代理,点击了哪一个按钮

048.btn.tag = i;

049. 

050.// 设置每个代表生肖的按钮的位置和角度

051.// 锚点的x在圆盘的中心,锚点的y也在圆盘的中心,仅仅变化的是代表星座的按钮的角度

052.CGFloat posX = ILCircleWH * 0.5;

053.CGFloat posY = posX;

054.btn.layer.position = CGPointMake(posX, posY);

055.// 仅仅根据i,设置每一个代表星座的按钮的旋转角度

056.btn.transform = CGAffineTransformMakeRotation(M_PI / 6 * i);

057.// 监听按钮点击

058.[btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchDown];

059.[self addSubview:btn];

060.// 第0个默认选中

061.if (i == 0) {

062.[self btnClick:btn];

063.}

064.}

065.}

066.// 需要根据不同的按钮的i值,利用CGImageCreateWithImageInRect方法,从大图片中裁剪出一张小图片作为按钮的背景图片

067.- (void)set12BtnsBgWithBigImg:(NSString *)normal selected:(NSString *)selected

068.{

069.// 遍历12个按钮,根据其i值,裁剪不同的位置的小图片,作为其背景图片

070.for (int i = 0; i<12; i++) {

071.CircleItem *btn = self.subviews[i];

072.// 加载大图片

073.UIImage *normalBig = [UIImage imageNamed:normal];

074.// 裁剪小图片 (像素坐标转成点坐标,在retina坐标下,比例因子为2,一个点代表2个像素)

075.CGFloat miniW = normalBig.size.width / 12 * [UIScreen mainScreen].scale;

076.CGFloat miniH = normalBig.size.height * [UIScreen mainScreen].scale;

077.// 根据i值不同,裁剪不同的rect

078.CGRect miniRect = CGRectMake(i * miniW, 0, miniW, miniH);

079.// 创建出小图片

080.CGImageRef miniNormalCG = CGImageCreateWithImageInRect(normalBig.CGImage, miniRect);

081.// 设置裁剪出来的小图片为按钮的背景

082.[btn setImage:[UIImage imageWithCGImage:miniNormalCG] forState:UIControlStateNormal];

083. 

084.// 选中时的背景图片,也是一样的裁剪后,设置到按钮的选中状态下背景图片

085.UIImage *selectedBig = [UIImage imageNamed:selected];

086.CGImageRef miniSelectedCG = CGImageCreateWithImageInRect(selectedBig.CGImage, miniRect);

087.[btn setImage:[UIImage imageWithCGImage:miniSelectedCG] forState:UIControlStateSelected];

088.}

089.}

090.// 三步曲,控制按钮点击时的切换

091.- (void)btnClick:(CircleItem *)btn

092.{

093._selectedBtn.selected = NO;

094.btn.selected = YES;

095._selectedBtn = btn;

096.}

097. 

098.#pragma mark - 父类的方法

099.// setFrame:和setBounds:能保证尺寸永远是286x286

100.- (void)setFrame:(CGRect)frame

101.{

102.frame.size = CGSizeMake(ILCircleWH, ILCircleWH);

103.[super setFrame:frame];

104.}

105. 

106.- (void)setBounds:(CGRect)bounds

107.{

108.bounds.size = CGSizeMake(ILCircleWH, ILCircleWH);

109.[super setBounds:bounds];

110.}

111. 

112.#pragma mark - 重点,绘图

113.// 背景圆盘(需要扣图处理)LuckyBaseBackground.png

114.- (void)drawRect:(CGRect)rect

115.{

116.// 1.画最底部的背景圆盘

117.// 取得当前view的上下文,不须再重新创建上下文对象

118.CGContextRef ctx = UIGraphicsGetCurrentContext();

119.// copy一个ctx对象到栈中,保存现场,并且会复制出一个新的上下文.

120.// 在还原现场之前的所有操作,都将在这个新的上下文中执行

121.CGContextSaveGState(ctx);

122. 

123.// 2.在上下文中画一个小点的圆,并裁剪掉上下文,最后将背景圆盘绘制到稍小的圆形上下文中

124.// 2.1.画一个稍小些的圆

125.CGFloat innerCircleXY = 9;

126.CGFloat innerCircleWH = ILCircleWH - innerCircleXY * 2;

127.CGRect innerCircleRect = CGRectMake(innerCircleXY, innerCircleXY, innerCircleWH, innerCircleWH);

128.// 在上下文中的指定坐标处画一个指定大小的圆

129.CGContextAddEllipseInRect(ctx, innerCircleRect);

130. 

131.// 2.2.裁剪（CGContextClip会把之前所画的剪下来）

132.// 意思是 将上下文中 不属于刚才 画的圆的东东,全部清空(清空小圆以外的东东)

133.// 上下文中现在只剩下一个稍小的圆形了

134.CGContextClip(ctx);

135.// 2.3.将稍大的背景圆盘图片 画到刚才裁剪后的上下文中,即为小圆形的上下文中

136.// (因为小圆形以外的上下文区域 已经被清空了)

137.[[UIImage imageNamed:@"LuckyBaseBackground"] drawInRect:rect];

138. 

139.// 3.为了画下一张转盘图,因为不须要裁剪,所以恢复现场,还原为以前的正常的rect的上下文(没被裁剪的rect)

140.CGContextRestoreGState(ctx);

141. 

142.// 4.画中间的完整的转盘图 到上下文中

143.[[UIImage imageNamed:@"LuckyRotateWheel"] drawInRect:rect];

144.}

145. 

146. 

147.@end

CircleItem继承自按钮,

一个本类实例,就代表着一个可被点击的星座或
生肖

01.//

02.//  CircleItem.h

03.//  25_彩票

04.//

05.//  Created by beyond on 14-8-30.

06.//  Copyright (c) 2014年 com.beyond. All rights reserved.

07.//  CircleItem 继承自按钮,一个本类实例,就代表着一个可被点击的星座 或 生肖

08. 

09.#import <UIKit/UIKit.h>

10. 

11.@interface CircleItem : UIButton

12. 

13.@end

01.//

02.//  CircleItem.m

03.//  25_彩票

04.//

05.//  Created by beyond on 14-8-30.

06.//  Copyright (c) 2014年 com.beyond. All rights reserved.

07.//  继承自按钮,一个本类实例,就代表着一个可被点击的星座 或 生肖

08. 

09.#import "CircleItem.h"

10. 

11.// 生肖 或 星座按钮的宽和高,须与提供的图片一致

12.const int kCircleItemWidth = 68;

13.const int kCircleItemHeight = 143;

14. 

15.@implementation CircleItem

16.#pragma mark - 生命周期方法

17.- (id)initWithFrame:(CGRect)frame

18.{

19.self = [super initWithFrame:frame];

20.if (self) {

21.// 设置按钮选中时的背景

22.[self setBackgroundImage:[UIImage imageNamed:@"LuckyRototeSelected.png"] forState:UIControlStateSelected];

23.// 设置按钮所在图层的锚点(底部中点),坐标系以左上角为 0 0,x向右为正,y向下为正

24.// 目的是让所有的按钮在添加的时候,可以围绕锚点,即大圆图片的中心点进行rotate

25.self.layer.anchorPoint = CGPointMake(0.5, 1);

26.}

27.return self;

28.}

29. 

30.#pragma mark - 父类的方法

31.// 重写setFrame:和setBounds:能保证尺寸永远是68x143

32.- (void)setFrame:(CGRect)frame

33.{

34.frame.size = CGSizeMake(kCircleItemWidth, kCircleItemHeight);

35.[super setFrame:frame];

36.}

37.- (void)setBounds:(CGRect)bounds

38.{

39.bounds.size = CGSizeMake(kCircleItemWidth, kCircleItemHeight);

40.[super setBounds:bounds];

41.}

42.// 中须选中,不要高亮状态

43.- (void)setHighlighted:(BOOL)highlighted {}

44.// 调整按钮的图片的位置

45.- (CGRect)imageRectForContentRect:(CGRect)contentRect

46.{

47.// 获得当前屏幕点的比例,如果是2.0代表retina视网膜屏幕,一个点代表2个像素

48.CGFloat scale = [UIScreen mainScreen].scale;

49.// 获得图片本身的大小,从而进行 缩小 为正常的点坐标

50.CGSize size = [self imageForState:UIControlStateNormal].size;

51. 

52.// 除以比例因子,得到点坐标下的正常的size

53.CGFloat w = size.width/scale;

54.CGFloat h = size.height/scale;

55.// 设置x y坐标

56.CGFloat x = ( contentRect.size.width - w ) * 0.5;

57.CGFloat y = ( contentRect.size.height - h ) * 0.5 - 20;

58.// 返回调整好的图片的frame

59.return  CGRectMake(x, y, w, h);

60.}

61. 

62.#pragma mark - 触摸事件二大方法

63.// 点击按钮的时候必定会调用

64.// 询问鼠标点击的point是否在按钮身上

65.// 如果返回YES，代表point在按钮身上，系统就会让按钮处理点击事件

66.// 如果返回NO，代表point部在按钮身上，系统就不会让按钮处理点击事件

67.- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event

68.{

69.NSLog(@"----%@", NSStringFromCGPoint(point));

70.return [super pointInside:point withEvent:event];

71.}

72.- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event

73.{

74.return [super hitTest:point withEvent:event];

75.}