ios学习之个人笔记(超级猜图)

最终效果：

步骤：
拖拽上半部控件
大小图切换
点击“图片”或“大图”放大图片并生成遮罩，图片置于最上层，点击遮罩阴影消失图片缩小
2）下一题
判断是否是最后一题，如果是则禁用“下一题”按钮
3）提示
点击“提示”按钮，积分-1000，清空答案按钮文字，并把本题答案的第一个字显示到第一个答案按钮上

生成答案按钮和待选按钮
拖两个view分别放置答案按钮和待选按钮
答案按钮生成
根据题目的正确答案个数动态生成答案按钮
答案按钮的点击事件，被点击的答案按钮文字清空，并把对应的待选按钮显示
待选按钮生成
根据题目的待选按钮个数动态生成
待选按钮点击事件，首先判断答案按钮是否已满，不满则被点击按钮隐藏并把文字显示到第一个为空的答案按钮上，如果已满则禁止待选按钮与用户交互。
判断答案是否正确，首先判断答案按钮是否已满，已满则取出答案按钮的文字与当前题目的答案作对比。如果答案正确，则设置答案按钮文字为蓝色，延迟5秒跳转到下一题，积分+100,否则答案按钮文字变红。

//这是model类
#import "YZQuestions.h"

@implementation YZQuestions


-(instancetype) initWithDict:(NSDictionary *)dict{
    if (self == [super init]) {
        self.answer = dict[@"answer"];
        self.icon = dict[@"icon"];
        self.title = dict[@"title"];
        self.options = dict[@"options"];
    }
    return self;
}
+(instancetype) questionWithDict:(NSDictionary *)dict{
    return [[self alloc] initWithDict:dict];
}

+(NSArray *)questions{
    NSString *path = [[NSBundle mainBundle] pathForResource:@"questions.plist" ofType:nil];
    NSArray *arrDict = [NSArray arrayWithContentsOfFile:path];

    NSMutableArray *arr = [NSMutableArray array];
    for (NSDictionary *dict in arrDict) {
        [arr addObject:[self questionWithDict:dict]];
    }
    return arr;
}
@end

viewController类

#import "ViewController.h"
#import "YZQuestions.h"
@interface ViewController () <UIAlertViewDelegate>
@property (nonatomic,copy) NSArray *questions;
@property (weak, nonatomic) IBOutlet UILabel *lblIndex;
@property (weak, nonatomic) IBOutlet UIButton *btnScore;
@property (weak, nonatomic) IBOutlet UILabel *lblTitle;
@property (weak, nonatomic) IBOutlet UIButton *btnIcon;
@property (weak, nonatomic) IBOutlet UIButton *btnNext;

//记录图片原始大小
@property (nonatomic,assign) CGRect iconFrame;
//引用遮罩
@property(weak,nonatomic)UIButton *cover;
//图片索引
@property (nonatomic,assign) int index;
@property (weak, nonatomic) IBOutlet UIView *btnAnswers;
@property (weak, nonatomic) IBOutlet UIView *btnOptions;

- (IBAction)btnTipClick;
- (IBAction)btnIconClick:(id)sender;
- (IBAction)btnBigImgClick:(id)sender;

- (IBAction)btnNextClick;

@end

@implementation ViewController

//懒加载数据
-(NSArray *)questions{
    if (_questions == nil) {
        _questions = [YZQuestions questions];
    }
    return _questions;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    self.index = -1;
    [self btnNextClick];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
}
#pragma mark 提示按钮事件
- (IBAction)btnTipClick {
    //积分-1000
    [self settingScore:-1000];
    //清空答案按钮文字
    for (UIButton *btn in self.btnAnswers.subviews) {
        [self btnAnsClick:btn];
    }
    YZQuestions *question = self.questions[self.index];
    for (UIButton *btn in self.btnAnswers.subviews) {
        //把正确答案的第一个字显示到第一个答案按钮上
        NSString *firstStr = [question.answer substringToIndex:1];
        [btn setTitle:firstStr forState:UIControlStateNormal];
        break;
    }

}
#pragma mark 图片点击事件
- (IBAction)btnIconClick:(id)sender {
    if (self.cover == nil) {
        [self btnBigImgClick:nil];
    }

}
#pragma mark 大图按钮事件
- (IBAction)btnBigImgClick:(id)sender {
    self.iconFrame = self.btnIcon.frame;
    //生成遮罩
    UIButton *btnCover = [[UIButton alloc] init];
    self.cover = btnCover;
    btnCover.frame = self.view.bounds;
    btnCover.backgroundColor = [UIColor blackColor];
    btnCover.alpha = 0;
    [self.view addSubview:btnCover];
    //设置图片属性
    CGFloat iconW = self.view.frame.size.width;
    CGFloat iconH = iconW;
    CGFloat iconX = 0;
    CGFloat iconY = (self.view.frame.size.height - iconW)/2;
    [UIView animateWithDuration:0.7 animations:^{
        self.btnIcon.frame = CGRectMake(iconX, iconY, iconW, iconH);
        //阴影在动画中透明度变大
        btnCover.alpha = 0.7;
    }];
    [self.view bringSubviewToFront:self.btnIcon];
    //为遮罩注册单机事件
    [btnCover addTarget:self action:@selector(smallImageClick) forControlEvents:UIControlEventTouchUpInside];
}

#pragma mark 图片还原事件
-(void)smallImageClick{
    [UIView animateWithDuration:0.7 animations:^{
        //图片还原
        self.btnIcon.frame = self.iconFrame;
        //遮罩透明度变为0
        self.cover.alpha = 0;
    } completion:^(BOOL finished) {
        //移除遮罩
        [self.cover removeFromSuperview];
    }];
}
#pragma mark 下一题单击事件
- (IBAction)btnNextClick {
    //开启待选按钮与用户交互
    self.btnOptions.userInteractionEnabled = YES;
    //索引++
    self.index++;
    //判断是否是最后一题
    if (self.index == self.questions.count) {
        //弹出对话框
        UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"提示" message:@"恭喜通关!" delegate:self cancelButtonTitle:@"取消" otherButtonTitles:@"确定", nil];
        [alertView show];
        return;
    }

    YZQuestions *model = self.questions[self.index];
    //设置空间属性
    [self settingData:model];
    //设置答案按钮
    [self settingBtnAnswers:model];
    //设置待选按钮
    [self settingBtnOptions:model];

}
#pragma mark 设置控件属性
-(void)settingData:(YZQuestions *)model{
    self.lblIndex.text = [NSString stringWithFormat:@"%d/%ld",self.index+1,self.questions.count];
    self.lblTitle.text = [NSString stringWithFormat:@"%@",model.title];
    [self.btnIcon setImage:[UIImage imageNamed:model.icon] forState:UIControlStateNormal];
    //判断是否是最后一题，然后是否禁用
    self.btnNext.enabled = (self.index != (self.questions.count-1));
}
#pragma mark 设置答案按钮
-(void)settingBtnAnswers:(YZQuestions *)model{
    //清除之前答案按钮
    [self.btnAnswers.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
    //获取本题答案按钮个数
    NSInteger num = model.answer.length;
    //设置按钮属性
    CGFloat btnW = 35;
    CGFloat btnH =btnW;
    CGFloat margin =10;
    CGFloat marginLeft = (self.btnAnswers.frame.size.width - num * btnW - (num-1)*margin)/2;
    CGFloat btnY = 0;
    //创建答案按钮
    for (int i=0; i<num; i++) {
        UIButton *btnAnswer = [[UIButton alloc] init];
        //设置按钮背景图
        [btnAnswer setBackgroundImage:[UIImage imageNamed:@"btn_answer" ]forState:UIControlStateNormal];
        [btnAnswer setBackgroundImage:[UIImage imageNamed:@"btn_answer_highlighted" ] forState:UIControlStateHighlighted];
        //设置答案按钮文字
        [btnAnswer setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        CGFloat btnX = marginLeft + i * (btnW + margin);
        btnAnswer.frame = CGRectMake(btnX, btnY, btnW, btnH);
        [self.btnAnswers addSubview:btnAnswer];
        //设置答案按钮单击事件
        [btnAnswer addTarget:self action:@selector(btnAnsClick:) forControlEvents:UIControlEventTouchUpInside];
    }
}
#pragma mark 答案按钮单击事件
-(void)btnAnsClick:(UIButton *)sender{
    [self setAnswersColor:[UIColor blackColor]];
    //开启待选按钮与用户交互
    self.btnOptions.userInteractionEnabled = YES;
    //被点击按钮文字消失
    [sender setTitle:nil forState:UIControlStateNormal];
    //让对应的待选按钮显示
    for (UIButton *btn in self.btnOptions.subviews) {
        if (btn.tag == sender.tag) {
            btn.hidden = NO;
            break;
        }
    }
}
#pragma mark 设置待选按钮
-(void)settingBtnOptions:(YZQuestions *)model{
    //清除之前待选按钮
    [self.btnOptions.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
    //获取待选按钮个数
    NSArray *opts = model.options;
    //设置待选按钮属性
    int colums = 7;
    CGFloat btnW = 35;
    CGFloat btnH =btnW;
    CGFloat margin =10;
    CGFloat marginLeft = (self.btnOptions.frame.size.width - colums * btnW - (colums-1)*margin)/2;
     for (int i=0; i<opts.count; i++) {
        UIButton *btnOption = [[UIButton alloc] init];
         //设置按钮背景图
         [btnOption setBackgroundImage:[UIImage imageNamed:@"btn_option" ]forState:UIControlStateNormal];
         [btnOption setBackgroundImage:[UIImage imageNamed:@"btn_option_Highlighted" ] forState:UIControlStateHighlighted];
         //设置待选按钮文字
         [btnOption setTitle:opts[i] forState:UIControlStateNormal];
         [btnOption setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
         btnOption.tag = i;
        int colIdx = i%colums;
        int rowIdx = i/colums;
        CGFloat btnX = marginLeft + colIdx*(btnW+margin);
        CGFloat btnY = rowIdx*(btnH + margin);
        btnOption.frame = CGRectMake(btnX, btnY, btnW, btnH);
        [self.btnOptions addSubview:btnOption];
         //给待选按钮添加单击事件
         [btnOption addTarget:self action:@selector(btnOptClick:) forControlEvents:UIControlEventTouchUpInside];
    }
}
#pragma mark 待选按钮单机事件
-(void)btnOptClick:(UIButton *)sender{
    //被点击按钮隐藏
    sender.hidden = YES;
    NSString *text = sender.currentTitle;
    //把字体显示到第一个为空得答案按钮上
    for (UIButton *btn in self.btnAnswers.subviews) {
        if (btn.currentTitle == nil) {
            [btn setTitle:text forState:UIControlStateNormal];
            btn.tag = sender.tag;
            break;
        }
    }
    //判断答案按钮是否已满
    [self judge];
}
#pragma mark 判断答案事件
-(void)judge{
    BOOL isFull = YES;
    //用来存储用户点击的答案
    NSMutableString *userAnswers = [NSMutableString string];
    for (UIButton *btn in self.btnAnswers.subviews) {
        if (btn.currentTitle == nil) {
            isFull = NO;
            break;
        }else{
            [userAnswers appendString:btn.currentTitle];
        }
    }
    if (isFull) {
        //禁止待选按钮与用户交互
        self.btnOptions.userInteractionEnabled = NO;
        //判断答案是否正确
        YZQuestions *question = self.questions[self.index];
        if ([question.answer isEqualToString:userAnswers]) {
            //积分100
            [self settingScore:100];
            //答案字体变蓝
            [self setAnswersColor:[UIColor blueColor]];
            //如果答案正确延迟5秒跳转到下一题
            [self performSelector:@selector(btnNextClick) withObject:nil afterDelay:0.5];
        }else{
            [self setAnswersColor:[UIColor redColor]];
        }
    }
}
#pragma mark 设置答案按钮字体颜色
-(void)setAnswersColor:(UIColor *) color{
    for (UIButton *btnAns in self.btnAnswers.subviews) {
        [btnAns setTitleColor: color forState:UIControlStateNormal];
    }
}
#pragma mark 计算积分
-(void)settingScore:(int)score{
    int currentScore = self.btnScore.currentTitle.intValue + score;

    [self.btnScore setTitle:[NSString stringWithFormat:@"%d",currentScore] forState:UIControlStateNormal];
}
#pragma mark 代理方法
-(void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex{
    //如果通关后点击确定跳转到第一题
    if (buttonIndex == 1) {
        self.index = -1;
        [self btnNextClick];
    }
}
@end

超级猜图素材