本篇文章十二宫格抽奖思路是根据这个demo来的
http://code.cocoachina.com/view/135596
十二宫格界面截图如下：
luck.png
1、自定义十二宫格View（TwelveLuck）
- TwelveLuck.h代码如下
#import
@protocol TwelveLuckDelegate
//代理方法
- (void)twelveLuckViewDidStopWithDict:(NSInteger)index;
@end
@interface TwelveLuck : UIView
@property (assign, nonatomic) id 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];
备注：
- 大部分抽奖都是要先请求数据得知抽中的物品，请求方法可直接写在立即抽奖按钮的点击事件中。
- 如果有人不理解循环绘制十二宫界面的时候为什么要写三个判断，可以自己在草稿本上画一下，这样的话，为什么最后要交换按钮位置也能体现出来。