[iOS基础控件 - 4.5] 猜图游戏

A.需要掌握的

1.添加图片资源（暂时认为@2x跟非@2x代表同一张图片）

2.搭建UI界面
* 文本标签
* 4个按钮
* 中间的图片

3.设置状态栏样式

4.监听下一题按钮的点击

5.延迟加载数据
* 加载plist
* 字典转模型
* KVC的引入

6.切换下一题的序号、图片、标题,下一题按钮的可用性

7.默认显示第1条题目

8.显示大图
* 监听中间图片点击
* 添加遮盖
* 移动图片(注意头像图片的层级顺序)
* 监听“大图按钮”

9.展示答案的个数

10.展示待选答案

11.答案处理

12.提示功能

13.Icon和Launch、@2x

 

B.实现思路

1.构建基本UI：

（1）背景

（2）按钮

（3）图片

（4）选项

 

2.数据存储与加载

（1）标题数据

（2）图片数据

（3）可选项数据

（4）答案数据

（5）得分数据

 

3.大图功能 (点击图片或者按钮)

（1）放大并调整图片位置

（2）虚化背景，使用半透明全覆盖的button

（3）点击背景或者图片，删除半透明背景、恢复图片

     a.动画效果, 使用带block参数方法

     b.播放完动画再移除阴影元素

 

4.下一题功能

其调用的功能是整个APP的核心，包含了初始化控件、加载文件数据、删除旧控件、加入新控件、刷新界面

 

5.提示功能

给出一定的答案

 

6.帮助功能

（在线分享功能，没有实现）

 

C.知识点

1.设置状态栏 (iOS7开始)

（1）设置样式

在Controller中重写preferredStateBarStyle方法，返回要设置的值

 // 设置状态栏是否隐藏
 - (BOOL)prefersStatusBarHidden {
     return NO;
 }

 // 设置状态栏
 - (UIStatusBarStyle)preferredStatusBarStyle {
     // 设置状态栏字体为白色
     return UIStatusBarStyleLightContent;
 }

 

状态栏是显示黑色字体:

 

修改之后：

 

2.APP图标

只要文件名为 “Icon.png”，就会被设置为APP图标

 

3.启动画面

               一个app在启动过程中会全屏显示叫做Default.png的图片

               不用规格Default的使用场合

1. Default.png：非retina-iPhone屏幕，320x480
2. [e-mail]：retina-iPhone屏幕，640x960
3. [e-mail]：4inch的retina-iPhone屏幕，640x1136
4. Default-Portrait~ipad.png：非retain-iPad竖屏屏幕，768x1024
5. Default-Portrait~[e-mail]：retain-iPad竖屏屏幕，1536x2048
6. Default-Landscape~ipad.png：非retain-iPad横屏屏幕，1024x768
7. Default-Landscape~[e-mail]：retain-iPad横屏屏幕，2048x1536

 

 

4.背景图和前景元素之间的层次关系

一般按照storyboard中的顺序排列

使用代码把某个元素提到最前

    // 2.更换阴影和图片的位置

    [self.view bringSubviewToFront:self.icon];

 

 

5.使用Button做出中间的图片

为了做出有白边效果的图片，使用了白色图片作为背景，然后设置图片的边距Inset，露出白色背景图

                  

 

 

6.延迟加载数据

改写controller中的题目数组questions 的get方法，在调用get方法的时候检测questions是否已经存在，否则才开始加载

 

7.“大图”功能

虚化背景：使用一张半透明的图片遮挡

图片放大：使用形变转换

动画效果：使用带block参数的动画方法，设置动画事件、完成动画后消除遮盖回收内存

 

8.恢复图片

点击遮盖 / 点击放大后的图片：消除遮盖，恢复图片

 

9.消除button被点击的时候变灰

取消勾选 “Highlighted Adjusts Image”

 

10.显示答案

使用button, 动态生成相应数量的button

使用UIView作为父控件包含多个答案button

在storyboard中创建一个UIView，放到合适位置，调整尺寸

 

点击 "下一题” 按钮：

删除旧答案，自己控制自己从父视图删除

     // 5.1 删除全部旧答案的button
     [self.answerView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];

 

添加新答案

 

 

11.加入选项

原理同答案模块，多了在行上面的位置计算

 

删除旧的所有选项，添加新的选项

     // 6.1 删除旧选项
     [self.optionsView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];

 

12.点击选项

（1）被点击的选项按钮消失（hidden = YES）

（2）将选中选项的文字放到答案区的按钮上

（3）把文字放到第一个没有文字的答案按钮上

（4）点击有文字的答案按钮，文字恢复到选项

（5）答案填满后，阻止事件触发

 

13.点击有文字的答案按钮

（1）被点击的答案按钮文字消失

（2）让答案文字对应的选项重新出现

遍历所有选项，找到对应的选项进行设置

 

14.判断答案正确

（1）遍历答案区，判断每个答案按钮是否有文字，如果都有文字，证明已经完成，检查答案

（2）答错答案文字变红，退选答案恢复文字颜色为黑色

（3）答对了给出提示，延迟1秒后跳入下一题

 

17.分数计算

答对加分

 

18.提示功能

取消现有的所有答案，给出正确答案的第一个字，扣一定分数

 

 

19.更改图标

图标有命名规范，最好使用 “icon.png"

把所有图标文件拖放到 “Images.xcassets” 的”AppIcon” 里面

 

 

20.修改启动画面

 

注意:

在现时最新版Xcode6.1中，默认使用 LaunchScreen.xib 作为启动画面

现在有两种方式设置启动图片

• 使用 xib (LaunchScreen)
• 使用 LaunchImage

 

启动页面配置:

项目 ==> general ==> App Icons and Launch Images

（1）使用 xib

a.默认状态就是使用 xib

 

b.如果现状态是使用LaunchImage, 设置 “Launch Images Source” 为 “Don’t use asset catalogs”

 

c.设置 xib 的文件名

 

d.在 xib 中设计

 

e.效果

 

 

（2）使用 LaunchImage

a.更改配置

项目 ==> general ==> App Icons and Launch Images ==> Launch Images Source 中选择 images，再把Launch Screen File 选项设置为空

 

 

b.会发现Images.xcassets 下自动生成了一个 LaunchImage 的Imageset

 

c.拖入画面

 

d.效果

 

 

主要代码:

ViewController.m:

 //
 //  ViewController.m
 //  CrazyGuessGame
 //
 //  Created by hellovoidworld on 14/11/26.
 //  Copyright (c) 2014年 hellovoidworld. All rights reserved.
 //

 #import "ViewController.h"
 #import "Question.h"

 @interface ViewController ()

 @property (weak, nonatomic) IBOutlet UILabel *noLabel; // 序号
 @property (weak, nonatomic) IBOutlet UILabel *titleLabel; // 标题
 @property (weak, nonatomic) IBOutlet UIButton *icon;
 @property (weak, nonatomic) IBOutlet UIButton *nextImageButton;
 @property (weak, nonatomic) IBOutlet UIView *answerView;
 @property (weak, nonatomic) IBOutlet UIView *optionsView;
 @property (weak, nonatomic) IBOutlet UIButton *scoreButton;

 - (IBAction)onTipsButtonClicked;
 - (IBAction)onHelpButtonClicked;
 - (IBAction)onEnlargeImgButtonClicked;
 - (IBAction)onNextImgButtonClicked;
 - (IBAction)onImageClicked;

 /** 所有题目 */
 @property(nonatomic, strong) NSArray *questions;

 /** 当前题目序号 */
 @property(nonatomic, assign) int index;

 /** 遮盖阴影 */
 @property(nonatomic, weak) UIButton *cover;

 /** 原始图片位置、尺寸 */
 @property(nonatomic, assign) CGRect imageOriginalFrame;

 /** 答案是否已经填满标识 */
 @property(nonatomic, assign) BOOL isAnswerCompleted;

 /** 得分 */
 @property(nonatomic, assign) int score;

 @end

 @implementation ViewController

 - (void)viewDidLoad {
     [super viewDidLoad];
     // Do any additional setup after loading the view, typically from a nib.

     //存储原始图片的位置、尺寸信息
     self.imageOriginalFrame = self.icon.frame;

     self.index = -;
     [self onNextImgButtonClicked]; // 初次加载，index是0
 }

 - (void)didReceiveMemoryWarning {
     [super didReceiveMemoryWarning];
     // Dispose of any resources that can be recreated.
 }

 // 改写getter, 延迟加载，此处不要使用self.questions来取得questions，否则陷入死循环
 - (NSArray *)questions {
     if (nil == _questions) {
         // 1.加载plist数据
         NSArray *questionDictArray = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"questions" ofType:@"plist"]];

         NSMutableArray *questionsArray = [NSMutableArray array];
         for (NSDictionary *questionDict in questionDictArray) {
             // 2.将数据封装到Model "Question"
             Question *question = [Question initWithDictionary:questionDict];
             [questionsArray addObject:question];
         }

         // 3.赋值
         _questions = questionsArray;
     }

     return _questions;
 }

 // 设置状态栏是否隐藏
 - (BOOL)prefersStatusBarHidden {
     return NO;
 }

 // 设置状态栏
 - (UIStatusBarStyle)preferredStatusBarStyle {
     // 设置状态栏字体为白色
     return UIStatusBarStyleLightContent;
 }

 // 点击“提示”按钮
 - (IBAction)onTipsButtonClicked {
     // 1.清除现有的答案
     for (UIButton *currentAnswerButton in self.answerView.subviews) {
         [self onAnswerClicked:currentAnswerButton];
     }

     // 2.取出正确答案片段
     Question *question = self.questions[self.index];
     NSString *partOfCorrectAnswer = [question.answer substringToIndex:];

     // 3.填充到答案区
     for (UIButton *optionButton in self.optionsView.subviews) {
         if ([partOfCorrectAnswer isEqualToString:optionButton.currentTitle]) {
             [self onOptionClicked:optionButton];
         }
     }

     // 5.扣取相应分数
     [self calScore:-];
 }

 // 点击“帮助”按钮
 - (IBAction)onHelpButtonClicked {
 }

 // 点击“大图”按钮
 - (IBAction)onEnlargeImgButtonClicked {
     // 1.1添加阴影
     UIButton *cover = [[UIButton alloc] init];
     cover.frame = self.view.bounds;
     cover.backgroundColor = [UIColor blackColor];
     cover.alpha = ;

     // 1.2给阴影添加变回小图的触发事件
     [cover addTarget:self action:@selector(smallImg) forControlEvents:UIControlEventTouchUpInside];

     self.cover = cover;
     [self.view addSubview:cover];

     // 2.更换阴影和图片的位置
     [self.view bringSubviewToFront:self.icon];

     // 3.更改图像大小，显示阴影
     [UIView animateWithDuration: animations:^{
         cover.alpha = 0.7;

         CGFloat iconWidth = self.view.frame.size.width;
         CGFloat iconHeight = iconWidth;
         CGFloat iconX = ;
         CGFloat iconY = (self.view.frame.size.height / ) - (iconHeight / );
         self.icon.frame = CGRectMake(iconX, iconY, iconWidth, iconHeight);
     }];
 }

 /** 缩小图片 */
 - (void) smallImg {
     [UIView animateWithDuration: animations:^{
         // 1.删除阴影
         self.cover.alpha = ;

         // 2.恢复图片
         self.icon.frame = self.imageOriginalFrame;

     } completion:^(BOOL finished) {
         // 动画执行完成后

         [self.cover removeFromSuperview];
         self.cover = nil;
     }];

 }

 // 点击“下一题”按钮
 - (IBAction)onNextImgButtonClicked {
     self.index++;

     // 1.取出相应地Model数据
     Question *question = self.questions[self.index];

     // 2.设置控件
     [self setControls:question];

     // 3.设置答案
     [self addAnswer:question];

     // 4.设置选项
     [self addOptions:question];

 }

 /** 设置控件 */
 - (void) setControls:(Question *) question {
     // 1.答案是否已经填满
     self.isAnswerCompleted = NO;

     // 2.得分
     [self.scoreButton setTitle:[NSString stringWithFormat:@"%d", self.score] forState:UIControlStateNormal];

     // 2.设置序号
     self.noLabel.text = [NSString stringWithFormat:@"%d/%d", self.index + , self.questions.count];

     // 3.设置标题
     self.titleLabel.text = question.title;

     // 4.设置图片
     [self.icon setImage:[UIImage imageNamed:question.icon] forState:UIControlStateNormal];

     // 5.设置“下一题”按钮
     self.nextImageButton.enabled = (self.index + ) != self.questions.count;
 }

 /** 加入答案区 */
 - (void) addAnswer:(Question *) question {
     // 5.1 删除全部旧答案的button
     [self.answerView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];

     // 5.1 加入新答案
     int answerCount = question.answer.length; // 答案字数

     // 初始化尺寸信息
     CGFloat answerWidth = ;
     CGFloat answerHeight = self.answerView.frame.size.height;
     CGFloat answerMargin = ;
     CGFloat answerMarginLeft = (self.answerView.frame.size.width - answerWidth * answerCount - answerMargin * (answerCount - ) ) / ;

     for (int i=; i<question.answer.length; i++) {
         // 计算位置
         CGFloat answerX = answerMarginLeft + i * (answerWidth + answerMargin);
         CGFloat answerY = ;

         UIButton *answerButton = [[UIButton alloc] initWithFrame:CGRectMake(answerX, answerY, answerWidth, answerHeight)];

         // 设置背景
         [answerButton setBackgroundImage:[UIImage imageNamed:@"btn_answer"] forState: UIControlStateNormal];
         [answerButton setBackgroundImage:[UIImage imageNamed:@"btn_answer_highlighted"] forState: UIControlStateHighlighted];

         // 设置按钮点击事件，让按钮文字消失，相应的选项恢复
         [answerButton addTarget:self action:@selector(onAnswerClicked:) forControlEvents:UIControlEventTouchUpInside];

         [self.answerView addSubview:answerButton];
     }

     [self.view addSubview:self.answerView];
 }

 /**
     设置按钮点击事件，让按钮文字消失，相应的选项恢复
 */
 - (void) onAnswerClicked:(UIButton *) answerButton {
     // 1.设置答案标识
     self.isAnswerCompleted = NO;

     // 2.恢复相应的选项
     NSString *answerTitle = [answerButton titleForState:UIControlStateNormal];
     for (UIButton *optionButton in self.optionsView.subviews) {
         if ([answerTitle isEqualToString:[optionButton titleForState:UIControlStateNormal]]
             && optionButton.isHidden) {
             optionButton.hidden = NO;
             break;
         }
     }

     // 3.清除按钮上的文字
     [answerButton setTitle:nil forState:UIControlStateNormal];

     // 4.恢复答案文字颜色
     for (UIButton *answerButton in self.answerView.subviews) {
         [answerButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
     }
 }

 /** 加入选项区 */
 - (void) addOptions:(Question *) question {
     // 6.1 删除旧选项
     [self.optionsView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];

     // 6.2 加入新选项
     int optionsCount = question.options.count;
     CGFloat optionWidth = ;
     CGFloat optionHeight = ;
     int columnCount = ;
     CGFloat optionMargin = ;
     CGFloat optionMarginLeft = (self.optionsView.frame.size.width - optionWidth * columnCount - optionMargin * (columnCount - )) / ;

     for (int i=; i<optionsCount; i++) {
         int rowNo = i / columnCount; // 当前行号，从0开始
         int columnNo = i % columnCount; // 当前列号，从0开始
         CGFloat optionX = optionMarginLeft + columnNo * (optionWidth + optionMargin);
         CGFloat optionY = rowNo * (optionHeight + optionMargin);

         UIButton *optionButton = [[UIButton alloc] initWithFrame:CGRectMake(optionX, optionY, optionWidth, optionHeight)];

         [optionButton setBackgroundImage:[UIImage imageNamed:@"btn_option"] forState:UIControlStateNormal];
         [optionButton setBackgroundImage:[UIImage imageNamed:@"btn_option_highlighted"] forState:UIControlStateHighlighted];

         [optionButton setTitle:question.options[i] forState:UIControlStateNormal];

         [optionButton addTarget:self action:@selector(onOptionClicked:) forControlEvents:UIControlEventTouchUpInside];

         [self.optionsView addSubview:optionButton];
     }

     [self.view addSubview:self.optionsView];
 }

 // 使点击到的选项消失
 - (void) onOptionClicked:(UIButton *) optionButton {
     // 1.如果答案尚未填满，使选中的选项消失
     if (self.isAnswerCompleted) {
         return;
     }

     optionButton.hidden = YES;

     // 2.使消失的文字出现在答案区上，判断是否已经完成
     NSString *optionTitle = [optionButton titleForState:UIControlStateNormal];

     // 遍历答案按钮
     for (int i=; i<self.answerView.subviews.count; i++) {
         // 已经遍历到了最后一个答案按钮，证明已经完成了所有答案
         if (i == self.answerView.subviews.count - ) {
             self.isAnswerCompleted = YES;
         }

         UIButton *answerButton = self.answerView.subviews[i];
         NSString *answerTitle = [answerButton titleForState:UIControlStateNormal];

         // 如果该答案按钮上没有文字，则是空，填入文字
         if (answerTitle.length == ) {
             // 按钮默认的字体颜色是白色， 手动设为黑色
             [answerButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
             [answerButton setTitle:optionTitle forState:UIControlStateNormal];

             break;
         }
     }

     [self dealWithAnswer];
 }

 /** 处理答案 */
 - (void) dealWithAnswer {
     if (self.isAnswerCompleted) {
         Question *question = self.questions[self.index];
         NSMutableString *answerStr = [NSMutableString string];

         // 拼接已经完成的答案
         for (UIButton *completedAnswerButton in self.answerView.subviews) {
             [answerStr appendString:[completedAnswerButton titleForState:UIControlStateNormal]];
         }

         // 如果答对了
         if ([answerStr isEqualToString:question.answer]) {
             // 答案字体转换称为蓝色
             for (UIButton *correctAnswerButton in self.answerView.subviews) {
                 [correctAnswerButton setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
             }

             // 延迟指定时间后跳入下一题
             [self performSelector:@selector(onNextImgButtonClicked) withObject:nil afterDelay:0.5];

             // 加分
             [self calScore:];
         }
         else {
             for (UIButton *correctAnswerButton in self.answerView.subviews) {
                 // 答案字体转换称为红色
                 [correctAnswerButton setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
             }
         }
     }
 }

 /** 原图状态点击放大，大图状态点击恢复原状 */
 - (IBAction)onImageClicked {
     // 使用遮盖是否存在判断图片状态

     // 1.遮盖不存在，放大图片
     if (nil == self.cover) {
         [self onEnlargeImgButtonClicked];
     }
     else {
     // 2.遮盖存在，恢复图片
         [self smallImg];
     }
 }

 /** 计算分数 */
 - (void) calScore:(int) score {
     self.score += score;
     [self.scoreButton setTitle:[NSString stringWithFormat:@"%d", self.score] forState:UIControlStateNormal];
 }

 @end

 

Question.h:

 //
 //  Question.h
 //  CrazyGuessGame
 //
 //  Created by hellovoidworld on 14/11/26.
 //  Copyright (c) 2014年 hellovoidworld. All rights reserved.
 //

 #import <Foundation/Foundation.h>

 @interface Question : NSObject

 @property(nonatomic, copy) NSString *answer;
 @property(nonatomic, copy) NSString *title;
 @property(nonatomic, copy) NSString *icon;
 @property(nonatomic, strong) NSArray *options;

 - (instancetype) initWithDictionary:(NSDictionary *) dictionary;
 + (instancetype) initWithDictionary:(NSDictionary *) dictionary;

 @end

 

Question.m

 //
 //  Question.m
 //  CrazyGuessGame
 //
 //  Created by hellovoidworld on 14/11/26.
 //  Copyright (c) 2014年 hellovoidworld. All rights reserved.
 //

 #import "Question.h"

 @implementation Question

 - (instancetype) initWithDictionary:(NSDictionary *) dictionary {
     if (self = [super init]) {
         self.title = dictionary[@"title"];
         self.icon = dictionary[@"icon"];
         self.answer = dictionary[@"answer"];
         self.options = dictionary[@"options"];
     }

     return self;
 }

 + (instancetype) initWithDictionary:(NSDictionary *) dictionary {
     return [[self alloc] initWithDictionary:dictionary];
 }

 @end