iOS 十二宫格抽奖

本篇文章十二宫格抽奖思路是根据这个demo来的

http://code.cocoachina.com/view/135596

十二宫格界面截图如下： luck.png

1、自定义十二宫格View（TwelveLuck）

• TwelveLuck.h代码如下

#import <UIKit/UIKit.h>

@protocol TwelveLuckDelegate <NSObject>
//代理方法
- (void)twelveLuckViewDidStopWithDict:(NSInteger)index;

@end

@interface TwelveLuck : UIView

@property (assign, nonatomic) id<TwelveLuckDelegate> delegate;
//显示图片数组
@property (strong, nonatomic) NSMutableArray *imageArray;
//循环次数
@property (nonatomic, assign)int circleNum;
//暂停的位置  默认为5可修改
@property (nonatomic, assign)int stopIndex;
//房子没有抽奖结束就退出界面
- (void)removeTimer;

@end

• TwelveLuck.m代码如下

#import "TwelveLuck.h"

//距离父视图边距
#define distance 0
//行数
#define row 4

@interface TwelveLuck () {
    
    NSTimer *startTimer;
    
    int currentTime;
    int stopTime;
    UIButton *btn0;
    UIButton *btn1;
    UIButton *btn2;
    UIButton *btn3;
    UIButton *btn4;
    UIButton *btn5;
    UIButton *btn6;
    UIButton *btn7;
    UIButton *btn8;
    UIButton *btn9;
    UIButton *btn10;
    UIButton *btn11;
}
@property (strong, nonatomic) NSMutableArray * btnArray;
@property (strong, nonatomic) UIButton * startBtn;
@property (assign, nonatomic) CGFloat time; //间隔秒数
@property (assign,nonatomic)UIButton *upBtn; // 循环的上个按钮

@end

@implementation TwelveLuck{
    NSDictionary *_dataDic;
}

- (NSMutableArray *)btnArray {
    if (!_btnArray) {
        _btnArray = [NSMutableArray array];
    }
    return _btnArray;
}

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        self.time = 0.1;
        _dataDic = [NSDictionary new];
    }
    return self;
}

- (void)setImageArray:(NSMutableArray *)imageArray {
    for (UIView *view in self.subviews) {
        [view removeFromSuperview];
    }
    _imageArray = imageArray;
    float width = self.frame.size.width;
    // 后面背景按钮
    for (int i = 0; i < imageArray.count + 1; i++) {
        
        UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
        btn.frame = CGRectMake((i % row) * (width - distance * 2) / row + distance,((i / row) *  (width - distance *  2) / row) + distance, (width - distance * 2) / row, (width - distance * 2) / row);
        btn.backgroundColor = [UIColor clearColor];
        btn.layer.cornerRadius = 5;
        [self addSubview:btn];
        if (i == 5) {
            btn.frame = CGRectMake((i % row) * (width - distance * 2) / row + distance + 10,((i / row) *  (width - distance *  2) / row) + distance + 10, (width - distance * 2) / row * 2 - 20, (width - distance * 2) / row * 2 - 20);
        }
        if (i  > 5) {
            btn.frame = CGRectMake(((i + 1) % row) * (width - distance * 2) / row + distance,(((i + 1) / row) *  (width - distance *  2) / row) + distance, (width - distance * 2) / row, (width - distance * 2) / row);
        }
        if (i  > 7) {
            btn.frame = CGRectMake(((i + 3) % row) * (width - distance * 2) / row + distance,(((i + 3) / row) *  (width - distance *  2) / row) + distance, (width - distance * 2) / row, (width - distance * 2) / row);
        }
        
        // 背景图片
        UIImageView *bgimage = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, (width - distance * 2) / row, (width - distance * 2) / row)];
        bgimage.clipsToBounds = YES;
        bgimage.backgroundColor = [UIColor yellowColor];
        bgimage.contentMode = UIViewContentModeScaleAspectFill;
        bgimage.image = [UIImage imageNamed:[_imageArray objectAtIndex:i > 5 ? i - 1: i]];
        
        
        if (i == 5) {
            btn.layer.cornerRadius = 10;
            [btn setBackgroundImage:[UIImage imageNamed:@"luck_lotto"] forState:UIControlStateNormal];
            [btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
            self.startBtn = btn;
            continue;
            
        }
        if (i != 5) {
            btn.layer.borderColor = [UIColor clearColor].CGColor;
            btn.layer.borderWidth = 3;
            [btn addSubview: bgimage];
        }
        
        btn.backgroundColor = [UIColor clearColor];
        switch (i) {
            case 0:
                btn0 = btn;
                break;
            case 1:
                btn1 = btn;
                break;
            case 2:
                btn2 = btn;
                break;
            case 3:
                btn3 = btn;
                break;
            case 4:
                btn4 = btn;
                break;
            case 6:
                btn5 = btn;
                break;
            case 7:
                btn6= btn;
                break;
            case 8:
                btn7 = btn;
                break;
            case 9:
                btn8 = btn;
                break;
            case 10:
                btn9 = btn;
                break;
            case 11:
                btn10= btn;
                break;
            case 12:
                btn11 = btn;
                break;
                
            default:
                
                break;
        }
        
        [self.btnArray addObject:btn];
    }
    // 交换按钮位置
    [self TradePlacesWithBtn1:btn4 btn2:btn5];
    [self TradePlacesWithBtn1:btn5 btn2:btn7];
    [self TradePlacesWithBtn1:btn6 btn2:btn11];
    [self TradePlacesWithBtn1:btn7 btn2:btn10];
    [self TradePlacesWithBtn1:btn8 btn2:btn9];
    [self TradePlacesWithBtn1:btn10 btn2:btn11];
    
}

- (void)TradePlacesWithBtn1:(UIButton *)firstBtn btn2:(UIButton *)secondBtn {
    CGRect frame = firstBtn.frame;
    firstBtn.frame = secondBtn.frame;
    secondBtn.frame = frame;
}

- (void)btnClick:(UIButton *)btn {
    [self.startBtn setEnabled:NO];
    currentTime = 0;
    self.time = 0.1;
    stopTime = 11+12*self.circleNum + self.stopIndex;
    startTimer = [NSTimer scheduledTimerWithTimeInterval:self.time target:self selector:@selector(start:) userInfo:nil repeats:YES];
}

- (void)setCircleNum:(int)circleNum{
    _circleNum = circleNum;
}

- (void)start:(NSTimer *)timer {
    if (self.upBtn) {
        self.upBtn.layer.borderColor = [UIColor clearColor].CGColor;
    }
    UIButton *oldBtn = [self.btnArray objectAtIndex:currentTime % self.btnArray.count];
    oldBtn.layer.borderColor = [UIColor whiteColor].CGColor;
    self.upBtn = oldBtn;
    currentTime++;
    // 停止循环
    if (currentTime > stopTime) {
        [timer invalidate];
        [self.startBtn setEnabled:YES];
        [self stopWithCount:currentTime%self.btnArray.count];
        return;
    }
    
    // 一直循环
    if (currentTime > stopTime - 6) {
        self.time += 0.1;
        [timer invalidate];
        startTimer = [NSTimer scheduledTimerWithTimeInterval:self.time target:self selector:@selector(start:) userInfo:nil repeats:YES];
    }
}

- (void)removeTimer{
    [startTimer invalidate];
    startTimer = nil;
}

- (void)stopWithCount:(NSInteger)count {
    if (self.delegate && [self.delegate respondsToSelector:@selector(twelveLuckViewDidStopWithDict:)]) {
        [self.delegate twelveLuckViewDidStopWithDict:count];
    }
}

2、Controller中调用

• 传过去的数组里也可以存放模型，在TwelveLuck中设置图片的时候改下就可以了。

TwelveLuck *luckView = [[TwelveLuck alloc] initWithFrame:CGRectMake(15, KScreenH / 2 - (KScreenW - 30) / 2, KScreenW - 30, KScreenW - 30)];
    // 基础循环次数
    luckView.circleNum = 3;
    luckView.delegate = self;
    NSMutableArray *dataArray = [NSMutableArray new];
    for (int i = 0; i < 12; i++) {
        if (i % 2 == 0) {
            [dataArray addObject:@"1"];
        }else
            [dataArray addObject:@"2"];
    }
    luckView.imageArray = dataArray;
    [self.view addSubview:luckView];

备注：

• 大部分抽奖都是要先请求数据得知抽中的物品，请求方法可直接写在立即抽奖按钮的点击事件中。
• 如果有人不理解循环绘制十二宫界面的时候为什么要写三个判断，可以自己在草稿本上画一下，这样的话，为什么最后要交换按钮位置也能体现出来。