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方法，返回要设置的值
1//设置状态栏是否隐藏2-(BOOL)prefersstatusBarHidden {3returnNO;4}56//设置状态栏7-(UIStatusBarStyle)preferredStatusBarStyle {8//设置状态栏字体为白色9returnUIStatusBarStyleLightContent;10}
状态栏是显示黑色字体:
修改之后：
2.APP图标
只要文件名为 “Icon.png”，就会被设置为APP图标
3.启动画面
一个app在启动过程中会全屏显示叫做Default.png的图片
不用规格Default的使用场合
Default.png：非retina-iphone屏幕，320x480 Default@2x.png：retina-iPhone屏幕，640x960 Default-568h@2x.png：4inch的retina-iPhone屏幕，640x1136 Default-Portrait~ipad.png：非retain-iPad竖屏屏幕，768x1024 Default-Portrait~ipad@2x.png：retain-iPad竖屏屏幕，1536x2048 Default-Landscape~ipad.png：非retain-iPad横屏屏幕，1024x768 Default-Landscape~ipad@2x.png：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，放到合适位置，调整尺寸
点击 "下一题” 按钮：
删除旧答案，自己控制自己从父视图删除
1//5.1 删除全部旧答案的button2[self.answerView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
添加新答案
11.加入选项
原理同答案模块，多了在行上面的位置计算
删除旧的所有选项，添加新的选项
1//6.1 删除旧选项2[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:
1//2//ViewController.m3//CrazyGuessGame4//5//Created by hellovoidworld on 14/11/26.6//Copyright (c) 2014年 hellovoidworld. All rights reserved.7//89#import"ViewController.h"10#import"Question.h"1112@interfaceViewController ()1314@property (weak, nonatomic) IBOutlet UILabel *noLabel;//序号15@property (weak, nonatomic) IBOutlet UILabel *titleLabel;//标题16@property (weak, nonatomic) IBOutlet UIButton *icon;17@property (weak, nonatomic) IBOutlet UIButton *nextImageButton;18@property (weak, nonatomic) IBOutlet UIView *answerView;19@property (weak, nonatomic) IBOutlet UIView *optionsView;20@property (weak, nonatomic) IBOutlet UIButton *scoreButton;2122-(IBAction)onTipsButtonClicked;23-(IBAction)onHelpButtonClicked;24-(IBAction)onEnlargeImgButtonClicked;25-(IBAction)onNextImgButtonClicked;26-(IBAction)onImageClicked;2728/** 所有题目*/29@property(nonatomic, strong) NSArray *questions;3031/** 当前题目序号*/32@property(nonatomic, assign)intindex;3334/** 遮盖阴影*/35@property(nonatomic, weak) UIButton *cover;3637/** 原始图片位置、尺寸*/38@property(nonatomic, assign) CGRect imageOriginalFrame;3940/** 答案是否已经填满标识*/41@property(nonatomic, assign) BOOL isAnswerCompleted;4243/** 得分*/44@property(nonatomic, assign)intscore;4546@end4748@implementationViewController4950- (void)viewDidLoad {51[super viewDidLoad];52//Do any additional setup after loading the view, typically from a nib.5354//存储原始图片的位置、尺寸信息55self.imageOriginalFrame =self.icon.frame;5657self.index = -1;58[self onNextImgButtonClicked];//初次加载，index是059}6061- (void)didReceiveMemoryWarning {62[super didReceiveMemoryWarning];63//Dispose of any resources that can be recreated.64}6566//改写getter, 延迟加载，此处不要使用self.questions来取得questions，否则陷入死循环67- (NSArray *)questions {68if(nil ==_questions) {69//1.加载plist数据70NSArray *questionDictArray = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"questions"ofType:@"plist"]];7172NSMutableArray *questionsArray =[NSMutableArray array];73for(NSDictionary *questionDictinquestionDictArray) {74//2.将数据封装到Model "Question"75Question *question =[Question initWithDictionary:questionDict];76[questionsArray addObject:question];77}7879//3.赋值80_questions =questionsArray;81}8283return_questions;84}8586//设置状态栏是否隐藏87-(BOOL)prefersStatusBarHidden {88returnNO;89}909192//设置状态栏93-(UIStatusBarStyle)preferredStatusBarStyle {94//设置状态栏字体为白色95returnUIStatusBarStyleLightContent;96}979899//点击“提示”按钮100-(IBAction)onTipsButtonClicked {101//1.清除现有的答案102for(UIButton *currentAnswerButtoninself.answerView.subviews) {103[self onAnswerClicked:currentAnswerButton];104}105106//2.取出正确答案片段107Question *question =self.questions[self.index];108NSString *partOfCorrectAnswer = [question.answer substringToIndex:1];109110//3.填充到答案区111for(UIButton *optionButtoninself.optionsView.subviews) {112if([partOfCorrectAnswer isEqualToString:optionButton.currentTitle]) {113[self onOptionClicked:optionButton];114}115}116117//5.扣取相应分数118[self calScore:-500];119}120121//点击“帮助”按钮122-(IBAction)onHelpButtonClicked {123}124125//点击“大图”按钮126-(IBAction)onEnlargeImgButtonClicked {127//1.1添加阴影128UIButton *cover =[[UIButton alloc] init];129cover.frame =self.view.bounds;130cover.backgroundColor =[UIColor blackColor];131cover.alpha =0;132133//1.2给阴影添加变回小图的触发事件134[cover addTarget:self action:@selector(smallImg) forControlEvents:UIControlEventTouchUpInside];135136self.cover =cover;137[self.view addSubview:cover];138139//2.更换阴影和图片的位置140[self.view bringSubviewToFront:self.icon];141142//3.更改图像大小，显示阴影143[UIView animateWithDuration:1animations:^{144cover.alpha =0.7;145146CGFloat iconWidth =self.view.frame.size.width;147CGFloat iconHeight =iconWidth;148CGFloat iconX =0;149CGFloat iconY = (self.view.frame.size.height /2) - (iconHeight /2);150self.icon.frame =CGRectMake(iconX, iconY, iconWidth, iconHeight);151}];152}153154/** 缩小图片*/155- (void) smallImg {156[UIView animateWithDuration:1animations:^{157//1.删除阴影158self.cover.alpha =0;159160//2.恢复图片161self.icon.frame =self.imageOriginalFrame;162163} completion:^(BOOL finished) {164//动画执行完成后165166[self.cover removeFromSuperview];167self.cover =nil;168}];169170}171172//点击“下一题”按钮173-(IBAction)onNextImgButtonClicked {174self.index++;175176//1.取出相应地Model数据177Question *question =self.questions[self.index];178179//2.设置控件180[self setControls:question];181182//3.设置答案183[self addAnswer:question];184185//4.设置选项186[self addOptions:question];187188189}190191/** 设置控件*/192- (void) setControls:(Question *) question {193//1.答案是否已经填满194self.isAnswerCompleted =NO;195196//2.得分197[self.scoreButton setTitle:[NSString stringWithFormat:@"%d", self.score] forState:UIControlStateNormal];198199//2.设置序号200self.noLabel.text = [NSString stringWithFormat:@"%d/%d", self.index +1, self.questions.count];201202//3.设置标题203self.titleLabel.text =question.title;204205//4.设置图片206[self.icon setImage:[UIImage imageNamed:question.icon] forState:UIControlStateNormal];207208//5.设置“下一题”按钮209self.nextImageButton.enabled = (self.index +1) !=self.questions.count;210}211212/** 加入答案区*/213- (void) addAnswer:(Question *) question {214//5.1 删除全部旧答案的button215[self.answerView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];216217//5.1 加入新答案218intanswerCount = question.answer.length;//答案字数219220//初始化尺寸信息221CGFloat answerWidth =35;222CGFloat answerHeight =self.answerView.frame.size.height;223CGFloat answerMargin =10;224CGFloat answerMarginLeft = (self.answerView.frame.size.width - answerWidth * answerCount - answerMargin * (answerCount -1) ) /2;225226for(inti=0; i<question.answer.length; i++) {227//计算位置228CGFloat answerX = answerMarginLeft + i * (answerWidth +answerMargin);229CGFloat answerY =0;230231UIButton *answerButton =[[UIButton alloc] initWithFrame:CGRectMake(answerX, answerY, answerWidth, answerHeight)];232233//设置背景234[answerButton setBackgroundImage:[UIImage imageNamed:@"btn_answer"] forState: UIControlStateNormal];235[answerButton setBackgroundImage:[UIImage imageNamed:@"btn_answer_highlighted"] forState: UIControlStateHighlighted];236237//设置按钮点击事件，让按钮文字消失，相应的选项恢复238[answerButton addTarget:self action:@selector(onAnswerClicked:) forControlEvents:UIControlEventTouchUpInside];239240[self.answerView addSubview:answerButton];241}242243[self.view addSubview:self.answerView];244}245246/**247设置按钮点击事件，让按钮文字消失，相应的选项恢复248*/249- (void) onAnswerClicked:(UIButton *) answerButton {250//1.设置答案标识251self.isAnswerCompleted =NO;252253//2.恢复相应的选项254NSString *answerTitle =[answerButton titleForState:UIControlStateNormal];255for(UIButton *optionButtoninself.optionsView.subviews) {256if([answerTitle isEqualToString:[optionButton titleForState:UIControlStateNormal]]257&&optionButton.isHidden) {258optionButton.hidden =NO;259
break;260}261}262263//3.清除按钮上的文字264[answerButton setTitle:nil forState:UIControlStateNormal];265266//4.恢复答案文字颜色267for(UIButton *answerButtoninself.answerView.subviews) {268[answerButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];269}270}271272/** 加入选项区*/273- (void) addOptions:(Question *) question {274//6.1 删除旧选项275[self.optionsView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];276277//6.2 加入新选项278intoptionsCount =question.options.count;279CGFloat optionWidth =35;280CGFloat optionHeight =35;281intcolumnCount =7;282CGFloat optionMargin =10;283CGFloat optionMarginLeft = (self.optionsView.frame.size.width - optionWidth * columnCount - optionMargin * (columnCount -1)) /2;284285for(inti=0; i<optionsCount; i++) {286introwNo = i / columnCount;//当前行号，从0开始287intcolumnNo = i % columnCount;//当前列号，从0开始288CGFloat optionX = optionMarginLeft + columnNo * (optionWidth +optionMargin);289CGFloat optionY = rowNo * (optionHeight +optionMargin);290291UIButton *optionButton =[[UIButton alloc] initWithFrame:CGRectMake(optionX, optionY, optionWidth, optionHeight)];292293[optionButton setBackgroundImage:[UIImage imageNamed:@"btn_option"] forState:UIControlStateNormal];294[optionButton setBackgroundImage:[UIImage imageNamed:@"btn_option_highlighted"] forState:UIControlStateHighlighted];295296[optionButton setTitle:question.options[i] forState:UIControlStateNormal];297298[optionButton addTarget:self action:@selector(onOptionClicked:) forControlEvents:UIControlEventTouchUpInside];299300[self.optionsView addSubview:optionButton];301}302303[self.view addSubview:self.optionsView];304}305306//使点击到的选项消失307- (void) onOptionClicked:(UIButton *) optionButton {308//1.如果答案尚未填满，使选中的选项消失309if(self.isAnswerCompleted) {310return;311}312313optionButton.hidden =YES;314315//2.使消失的文字出现在答案区上，判断是否已经完成316NSString *optionTitle =[optionButton titleForState:UIControlStateNormal];317318//遍历答案按钮319for(inti=0; i<self.answerView.subviews.count; i++) {320//已经遍历到了最后一个答案按钮，证明已经完成了所有答案321if(i == self.answerView.subviews.count -1) {322self.isAnswerCompleted =YES;323}324325UIButton *answerButton =self.answerView.subviews[i];326NSString *answerTitle =[answerButton titleForState:UIControlStateNormal];327328//如果该答案按钮上没有文字，则是空，填入文字329if(answerTitle.length ==0) {330//按钮默认的字体颜色是白色， 手动设为黑色331[answerButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];332[answerButton setTitle:optionTitle forState:UIControlStateNormal];333334
break;335}336}337338[self dealWithAnswer];339}340341/** 处理答案*/342- (void) dealWithAnswer {343if(self.isAnswerCompleted) {344Question *question =self.questions[self.index];345NSMutableString *answerStr = [NSMutableStringstring];346347//拼接已经完成的答案348for(UIButton *completedAnswerButtoninself.answerView.subviews) {349[answerStr appendString:[completedAnswerButton titleForState:UIControlStateNormal]];350}351352//如果答对了353if([answerStr isEqualToString:question.answer]) {354//答案字体转换称为蓝色355for(UIButton *correctAnswerButtoninself.answerView.subviews) {356[correctAnswerButton setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];357}358359//延迟指定时间后跳入下一题360[self performSelector:@selector(onNextImgButtonClicked) withObject:nil afterDelay:0.5];361362//加分363[self calScore:1000];364}365else{366for(UIButton *correctAnswerButtoninself.answerView.subviews) {367//答案字体转换称为红色368[correctAnswerButton setTitleColor:[UIColor redColor] forState:UIControlStateNormal];369}370}371}372}373374/** 原图状态点击放大，大图状态点击恢复原状*/375-(IBAction)onImageClicked {376//使用遮盖是否存在判断图片状态377378//1.遮盖不存在，放大图片379if(nil ==self.cover) {380[self onEnlargeImgButtonClicked];381}382else{383//2.遮盖存在，恢复图片384[self smallImg];385}386}387388/** 计算分数*/389- (void) calScore:(int) score {390self.score +=score;391[self.scoreButton setTitle:[NSString stringWithFormat:@"%d", self.score] forState:UIControlStateNormal];392}393394@end
Question.h:
1//2//Question.h3//CrazyGuessGame4//5//Created by hellovoidworld on 14/11/26.6//Copyright (c) 2014年 hellovoidworld. All rights reserved.7//89#import<Foundation/Foundation.h>1011@interfaceQuestion : NSObject1213@property(nonatomic, copy) NSString *answer;14@property(nonatomic, copy) NSString *title;15@property(nonatomic, copy) NSString *icon;16@property(nonatomic, strong) NSArray *options;1718- (instancetype) initWithDictionary:(NSDictionary *) dictionary;19+ (instancetype) initWithDictionary:(NSDictionary *) dictionary;2021@end
Question.m
1//2//Question.m3//CrazyGuessGame4//5//Created by hellovoidworld on 14/11/26.6//Copyright (c) 2014年 hellovoidworld. All rights reserved.7//89#import"Question.h"1011@implementationQuestion1213- (instancetype) initWithDictionary:(NSDictionary *) dictionary {14if(self =[super init]) {15self.title = dictionary[@"title"];16self.icon = dictionary[@"icon"];17self.answer = dictionary[@"answer"];18self.options = dictionary[@"options"];19}2021returnself;22}2324+ (instancetype) initWithDictionary:(NSDictionary *) dictionary {25return[[self alloc] initWithDictionary:dictionary];26}2728@end