一 概述
本文繼續介紹超級猜圖的以下功能：
-
點擊備選按鈕，備選按鈕處文字替換答案區文字，並且備選按鈕按鈕隱藏
-
答案正確時，文字顯示藍色，自動進入下一題
-
答案錯誤時，文字顯示紅色
<!--more-->
二 效果圖
三 代碼(ViewController.m)
#import "ViewController.h"
#import "Question.h"
#define kButtonWidth 35
#define kButtonHeight 35
#define kButtonMargin 10
#define kTotalCol 7
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIButton *iconButton;
@property (weak, nonatomic) IBOutlet UILabel *noLabel;
@property (weak, nonatomic) IBOutlet UIButton *nextQuestButton;
@property (weak, nonatomic) IBOutlet UILabel *titleLabel;
@property (nonatomic,strong) UIButton *cover;
@property (nonatomic,strong) NSArray *questions;
@property (weak, nonatomic) IBOutlet UIView *answerView;
@property (weak, nonatomic) IBOutlet UIView *optionsView;
@property (nonatomic,assign) int index;//題目索引
@end
@implementation ViewController
- (NSArray *)questions
{
if (_questions==nil) {
_questions=[Question questions];
}
return _questions;
}
- (UIButton *)cover
{
if (_cover==nil) {
_cover=[[UIButton alloc]initWithFrame:self.view.bounds];
_cover.backgroundColor=[UIColor colorWithWhite:0.0 alpha:0.5];
[self.view addSubview:_cover];
_cover.alpha=0.0;
[_cover addTarget:self action:@selector(bigImage:) forControlEvents:UIControlEventTouchUpInside];
}
return _cover;
}
- (void)viewDidLoad {
[super viewDidLoad];
self.index=-1;
[self nextQuestion:self.nextQuestButton];
}
//大圖小圖切換
- (IBAction)bigImage:(UIButton *)sender
{
//如果沒有放大，就放大圖片，否則就縮小
//通過蒙版的alpha來判斷按鈕是否已被放大
if (self.cover.alpha==0.0)
{
//2.將圖像按鈕放到最前面
[self.view bringSubviewToFront:self.iconButton];
//3.動畫放大圖像按鈕
CGFloat w=self.view.bounds.size.width;
CGFloat h=w;
CGFloat y=(self.view.bounds.size.height-h)*0.5;
[UIView animateWithDuration:1.0f animations:^{
self.iconButton.frame=CGRectMake(0,y, w, h);
self.cover.alpha=1.0;
}];
}else
{
[UIView animateWithDuration:1.0 animations:^{
self.iconButton.frame=CGRectMake(112, 160, 150, 150);
self.cover.alpha=0.0;
}];
}
}
#pragma mark 下一題
- (IBAction)nextQuestion:(UIButton *)sender
{
//1.當前答題的索引，索引遞增
self.index++;
//如果index已經到了最後一題，提示用戶，播放動畫
if (self.index==self.questions.count) {
return;
}
//2.從數組中按照索引取出題目模型數據
Question *question=self.questions[self.index];
//3.設置基本信息
[self setupBasicInfo:question];
//4.設置答案按鈕
[self createAnswerButtons:question];
//5.設置備選按鈕
[self createOptionButtons:question];
}
//設置基本信息
-(void)setupBasicInfo:(Question *)question
{
self.noLabel.text=[NSString stringWithFormat:@"%d/%lu",self.index+1,(unsigned long)self.questions.count];
self.titleLabel.text=question.title;
[self.iconButton setImage:[UIImage imageNamed:question.icon] forState:UIControlStateNormal];
//如果達到最後一題，禁用下一題按鈕
self.nextQuestButton.enabled=(self.index<self.questions.count-1);
}
//設置答案按鈕
-(void)createAnswerButtons:(Question *)question
{
//首先清除掉答題區內的所有按鈕
for (UIView *btn in self.answerView.subviews) {
[btn removeFromSuperview];
}
CGFloat answerW=self.answerView.bounds.size.width;
NSUInteger length=question.answer.length;
CGFloat answerX=(answerW-kButtonWidth*length-kButtonMargin*(length-1))*0.5;
//創建所有答案的按鈕
for (int i=0; i<length; i++) {
CGFloat x=answerX+i*(kButtonMargin+kButtonWidth);
UIButton *btn=[[UIButton alloc]initWithFrame:CGRectMake(x, 0, kButtonWidth, kButtonHeight)];
[btn setBackgroundImage:[UIImage imageNamed:@"btn_answer"] forState:UIControlStateNormal];
[btn setBackgroundImage:[UIImage imageNamed:@"btn_answer_heighted"] forState:UIControlStateHighlighted];
[btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[self.answerView addSubview:btn];
}
}
//設置備選按鈕
-(void)createOptionButtons:(Question *)question
{
//問題：每次調用下一題方法時，都會重新創建21個按鈕
//解決：如果按鈕已經存在，並且是21個，只需要更改按鈕標題即可
if (self.optionsView.subviews.count!=question.options.count) {
//清除按鈕
for(UIView *view in self.optionsView.subviews)
{
[view removeFromSuperview];
}
CGFloat optionW=self.optionsView.bounds.size.width;
CGFloat optionX=(optionW-kTotalCol*kButtonWidth-(kTotalCol-1)*kButtonMargin)*0.5;
for (int i=0; i<question.options.count; i++) {
int row=i/kTotalCol;
int col=i%kTotalCol;
CGFloat x=optionX+col*(kButtonMargin+kButtonWidth);
CGFloat y=row*(kButtonMargin+kButtonHeight);
UIButton *btn=[[UIButton alloc]initWithFrame:CGRectMake(x, y, kButtonWidth,kButtonHeight)];
[btn setBackgroundImage:[UIImage imageNamed:@"btn_option"] forState:UIControlStateNormal];
[btn setBackgroundImage:[UIImage imageNamed:@"btn_option_heighted"] forState:UIControlStateHighlighted];
//設置備選區答案
[btn setTitle:question.options[i] forState:UIControlStateNormal];
[self.optionsView addSubview:btn];
[btn addTarget:self action:@selector(optionClick:) forControlEvents:UIControlEventTouchUpInside];
[btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
}
}
//如果按鈕已經存在，在點擊下一題的時候，只需要設置標題即可
int i=0;
for (UIButton *btn in self.optionsView.subviews) {
//設置備選答案
btn.hidden=NO;
[btn setTitle:question.options[i++] forState:UIControlStateNormal];
}
}
#pragma mark 候選按鈕點擊
-(void)optionClick:(UIButton *)button
{
//1.在答案區找到第一個文字爲空的按鈕
UIButton *btn=[self firstAnswerButton];
if (btn==nil) {
return;
}
//2.將button的標題設置給答案區的按鈕
[btn setTitle:button.currentTitle forState:UIControlStateNormal];
//3.將button隱藏
button.hidden=YES;
//4.判斷結果
[self judge];
}
//判斷結果
-(void)judge
{
BOOL isFull=YES;
NSMutableString *strM=[NSMutableString string];
for (UIButton *btn in self.answerView.subviews) {
if (btn.currentTitle.length==0) {
isFull=NO;
break;
}else
{
[strM appendString:btn.currentTitle];
}
}
if (isFull) {
//根據self.index獲取當前的question
Question *question=self.questions[self.index];
//如果一致，進行下一題
if ([strM isEqualToString:question.answer]) {
[self setAnswerButtonsColor:[UIColor blueColor]];
//等待0.5s，進入下一題
[self performSelector:@selector(nextQuestion:) withObject:nil afterDelay:0.5];
}else
{
[self setAnswerButtonsColor:[UIColor redColor]];
}
}
}
//修改答題區按鈕的顏色
-(void)setAnswerButtonsColor:(UIColor *)color
{
for (UIButton *btn in self.answerView.subviews) {
[btn setTitleColor:color forState:UIControlStateNormal];
}
}
//在答案區找到第一個文字爲空的按鈕
-(UIButton *)firstAnswerButton
{
for(UIButton *btn in self.answerView.subviews)
{
if (btn.currentTitle.length==0) {
return btn;
}
}
return nil;
}
@end