网易彩票，转盘实现

今天要做的是：
网易彩票，转盘实现:

创建自定义的View以及xib,倒入素材（素材想要，可以联系我）这些都没什么好说的：

再去WheelView.xib中搭建界面

接着就是代码实现:

在WheelView.h中

#import <UIKit/UIKit.h>

@interface WheelView : UIView

//给外面创建可以快速创建xib的类方法

+ (instancetype)wheelsView;

@end

在WheeView.m中

#import "WheelView.h"

@implementation WheelView

//给外面创建可以快速创建xib的类方法

+ (instancetype)wheelsView

{

    //使用load方法，返回xib

    return [[[NSBundle mainBundle]loadNibNamed:@"WheelView" owner:nil options:nil]lastObject];

}

//重写init方法，有的人可能会用

- (instancetype)initWithFrame:(CGRect)frame

{

    if (self = [super initWithFrame:frame]) {

        self = [[[NSBundle mainBundle]loadNibNamed:@"WheelView" owner:nil options:nil]lastObject];

    }

    return self;

}

@end

在ViewController.m中创建WheelView

- (void)viewDidLoad {

    [super viewDidLoad];

    // Do any additional setup after loading the view, typically from a nib.

    

    //在view显示的时候，直接创建Xib

    WheelView *whView = [WheelView wheelsView];

    //使xib的center和view的center一样

    whView.center = self.view.center;

    //将view添加到view中

    [self.view addSubview:whView];

}

运行

接下来完成内部btn的搭建,代码如下

#import "WheelView.h"

@interface WheelView()

@property (weak, nonatomic) IBOutlet UIImageView *contentV;

@property (weak, nonatomic) UIButton *selBtn;

@end

@implementation WheelView

- (void)awakeFromNib

{

    //调用setUP方法，创建按钮

    [self setUP];

}

//给外面创建可以快速创建xib的类方法

+ (instancetype)wheelsView

{

    //使用load方法，返回xib

    return [[[NSBundle mainBundle]loadNibNamed:@"WheelView" owner:nil options:nil]lastObject];

    

}

//重写init方法，有的人可能会用

- (instancetype)initWithFrame:(CGRect)frame

{

    if (self = [super initWithFrame:frame]) {

        self = [[[NSBundle mainBundle]loadNibNamed:@"WheelView" owner:nil options:nil]lastObject];

        [self setUP];

    }

    return self;

}

//创建按钮方法

- (void)setUP

{

    self.contentV.userInteractionEnabled = YES;

    //设置按钮的尺寸,宽

    CGFloat btnW = 68;

    //设置按钮的尺寸,高

    CGFloat btnH = 148;

    //设置按钮的旋转角度

    CGFloat angle = 0;

    

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

        //创建自定义按钮

        UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];

        //设置按钮尺寸

        btn.bounds = CGRectMake(0, 0, btnW, btnH);

        //设置按钮的定位点

        btn.layer.position = CGPointMake(self.bounds.size.width * 0.5, self.bounds.size.height * 0.5)

        ;

        //设置按钮的锚点

        btn.layer.anchorPoint = CGPointMake(0.5, 1);

        //给按钮添加监听事件

        [btn addTarget:self action:@selector(selcetBtn:) forControlEvents:UIControlEventTouchUpInside];

        //将按钮添加到视图中

        [self.contentV addSubview:btn];

        //设置按钮选中的时候显示的图片

        [btn setBackgroundImage:[UIImage imageNamed:@"LuckyRototeSelected"] forState:UIControlStateSelected];

        //设置按钮的旋转角度

        btn.transform = CGAffineTransformMakeRotation(angle/180 * M_PI);

        angle +=30;

    }

}

//设置按钮的选中状态，当点击下一个按钮，下一个按钮选中，此按钮不被选中

- (void)selcetBtn:(UIButton *)btn

{

    self.selBtn.selected = NO;

    btn.selected = YES;

    self.selBtn = btn;

}

上面的contentV是拖线，设置的属性





效果如下:

下面就是要把按钮上面的那些图片放上去了，但是美工为了省事给了这个素材，那么就要自己切割了

素材



代码实现如下：

/创建按钮方法

- (void)setUP

{

    self.contentV.userInteractionEnabled = YES;

    //设置按钮的尺寸,宽

    CGFloat btnW = 68;

    //设置按钮的尺寸,高

    CGFloat btnH = 148;

    //设置按钮的旋转角度

    CGFloat angle = 0;

    

    UIImage *showImage = [UIImage imageNamed:@"LuckyAstrology"];

    UIImage *selImage = [UIImage imageNamed:@"LuckyAstrologyPressed"];

    

    //设置裁剪尺寸

    CGFloat scale = [UIScreen mainScreen].scale;

    CGFloat clipW = showImage.size.width /12 * scale;

    CGFloat clipH = showImage.size.height * scale;

    CGFloat clipX = 0;

    CGFloat clipY = 0;

    

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

        //创建自定义按钮

        WheelButton *btn = [WheelButton buttonWithType:UIButtonTypeCustom];

        //设置按钮尺寸

        btn.bounds = CGRectMake(0, 0, btnW, btnH);

        //设置按钮的定位点

        btn.layer.position = CGPointMake(self.bounds.size.width * 0.5, self.bounds.size.height * 0.5)

        ;

        //设置按钮的锚点

        btn.layer.anchorPoint = CGPointMake(0.5, 1);

        

        //裁剪尺寸

        clipX = i * clipW;

        CGRect rect = CGRectMake(clipX, clipY, clipW, clipH);

        //裁剪图片

        CGImageRef imagshow = CGImageCreateWithImageInRect(showImage.CGImage, rect);

        [btn setImage:[UIImage imageWithCGImage:imagshow] forState:UIControlStateNormal];

        //裁剪图片

        CGImageRef imagCip = CGImageCreateWithImageInRect(selImage.CGImage, rect);

        [btn setImage:[UIImage imageWithCGImage:imagCip] forState:UIControlStateSelected];

        

        

        //给按钮添加监听事件

        [btn addTarget:self action:@selector(selcetBtn:) forControlEvents:UIControlEventTouchUpInside];

        //将按钮添加到视图中

        [self.contentV addSubview:btn];

        //设置按钮选中的时候显示的图片

        [btn setBackgroundImage:[UIImage imageNamed:@"LuckyRototeSelected"] forState:UIControlStateSelected];

        //设置按钮的旋转角度

        btn.transform = CGAffineTransformMakeRotation(angle/180 * M_PI);

        angle +=30;

        

        //如果是第一个按钮选中

        if (i == 0) {

            [self selcetBtn:btn];

        }

    }

}

这里面自定义了UIButton

在WheelButton.h中

#import <UIKit/UIKit.h>

@interface WheelButton : UIButton

- (CGRect)imageRectForContentRect:(CGRect)contentRect;

@end

在WheelButton.m中

#import "WheelButton.h"

@implementation WheelButton

//指定按钮图像边界

- (CGRect)imageRectForContentRect:(CGRect)contentRect

{

    //自定义此方法

    CGFloat w = 40;

    CGFloat h = 50;

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

    CGFloat y = 20;

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

}

@end

效果如下


接下来就是让转盘转起来，代码如下

在WheelView.h中

#import <UIKit/UIKit.h>

@interface WheelView : UIView

//给外面创建可以快速创建xib的类方法<
a769
br />
+ (instancetype)wheelsView;

//开始旋转

- (void)start;

//停止旋转

- (void)stop;

@end

在WheelView.m中

#import "WheelView.h"

#import "WheelButton.h"

@interface WheelView()

@property (weak, nonatomic) IBOutlet UIImageView *contentV;

@property (weak, nonatomic) UIButton *selBtn;

@property (nonatomic,strong) CADisplayLink *link;

@end

@implementation WheelView

- (IBAction)startChange:(id)sender {

    self.link.paused = YES;

    CABasicAnimation *anim = [CABasicAnimation animation];

    anim.keyPath = @"transform.rotation";

    anim.toValue = @(M_PI * 3);

    anim.duration = 1;

    anim.delegate = self;

    [self.contentV.layer addAnimation:anim forKey:nil];

}

//当核心动画停止的时候调用

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

{

    NSLog(@"%s",__func__);

    //拿到选中按钮的角度

    CGAffineTransform transform = self.selBtn.transform;

    CGFloat angle = atan2f(transform.b, transform.a);

    //让contV倒着旋转回去

    self.contentV.transform = CGAffineTransformMakeRotation(-angle);

}

- (CADisplayLink *)link

{

    if (_link  == nil) {

        CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(linkChange)];

        [link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];

        _link = link;

    }

    return _link;

}

- (void)linkChange

{

    self.contentV.transform = CGAffineTransformRotate(self.contentV.transform, M_PI/200.0);

}

- (void)start

{

    self.link.paused = NO;

}

- (void)stop

{

    self.link.paused = YES;

}

ViewController.m

#import "ViewController.h"

#import "WheelView.h"

@interface ViewController ()

@property (weak, nonatomic) WheelView *whV;

@end

@implementation ViewController

- (IBAction)stopBtn:(id)sender {

    [self.whV stop];

}

- (IBAction)startBtn:(id)sender {

    [self.whV start];

}

- (void)viewDidLoad {

    [super viewDidLoad];

    // Do any additional setup after loading the view, typically from a nib.

    

    //在view显示的时候，直接创建Xib

    WheelView *whView = [WheelView wheelsView];

    _whV = whView;

    //使xib的center和view的center一样

    whView.center = self.view.center;

    //将view添加到view中

    [self.view addSubview:whView];

}

效果图


第一次写，写的不好，多多包涵。