iOS学习之路-超级猜图

超级猜图，这个项目的代码敲完的时候，发现已经超过了400行，代码量已经远远超出了之前所学的了 。虽然代码量很多，但是知识点却都是之前学的，纵观整个项目，都没有新的知识点，可以这样说。在这个项目中，比较难理解的，就是添加答案按钮和待选项按钮的计算，以及对应的X轴和Y轴的计算了，也是比较繁琐的，还包括各种按钮的监听事件吧，要使用for循环遍历，使每个按钮都要注册监听器。整体情况完成的差不多，还有点bug吧，就看有没有大牛看到帮我解决了。

一、功能分析

1. 主要功能有提示、大图、下一题，回答问题。当用户点击提示时，会自动扣取相应的分数，并且将答案的第一个字填写到答案按钮中；当用户点击大图按钮或者图片时，将图片放大后放到屏幕的中央，并且屏幕的后面有一层阴影效果，当用户点击图片或者后面的阴影时，图片就会自动缩小会原来的位置，并且阴影消失。当用户点击下一题按钮时，图片会更换自下一题，对应的答案按钮的数量和待选项按钮和文字也会相对应的更改。

2. 当用户点击待选项按钮时，待选项按钮会被隐藏，而对应的文字则会显示在答案按钮中。当用户点击的答案正确时，字会变成蓝色，分数会增加，并且0.5秒后，自动跳到下一题 ；若答案不正确，则字体颜色变成红色。

3. 当进行到最后一道题时，用户再次点击了正确的答案后，答案按钮的字体仍变成蓝色，但是不会跳转道下一题，因为没有了下一题。

二、步骤分析

1. 先用storyboard搭建出基本的界面。显示题号的UILabel，显示题目的UILabel，显示图片的UIImageView，显示金币的UIButton，4个功能按钮UIButton。

2. 用for循环，创建出答案相对应个数的答案按钮以及待选项个数的待选项按钮。

3. 分别监听答案按钮、待选项按钮以及各种UIButton和UILabel等。

4. 完成答题的逻辑处理。

三、用户界面的设置和更改

1. 改变状态栏的样式

-（UIStatusBarStyle）perferredStatusBarStyle{
return UIStatusBarStyleLightContent;
}

如果不添加该段代码的话，状态栏的颜色为黑色。添加这段代码后，状态栏颜色则变为白色。

2. 更还图片的内边距。为了美观，我们在UIImageView的Background设置成一张白色的图片，将Image设置成我们要的图片。然后在UIImageView的Attributes inspectors一栏中，将inset的四个数值分别设置成自己想要的边距就可以了。



3. 分数按钮的设置。为了让分数按钮失去点击的作用。我们一般将其Attributes inspectors一栏中user Interaction Enabled勾去掉。当然，将Control下的Content的Enabled的勾去掉也行，不过一般以去掉前者为主。





4.为了能让图片的大小可以被我们所更改，我们需要将File inspectors 下的use Auto Layout的选项取消打勾。不然，当我们点击图片和大图按钮的时候，图片的尺寸不会更改。



四、添加答案按钮和待选项按钮的算法分析

（1）每一行的y值相同，行号决定y的值。计算行号：int row = i / totalColumns;

（2）每一行的x值相同，列号觉得x的值。计算列号：int col = i % totalColumns;

（3）待选项按钮和答案按钮距离view的间距以及答案按钮的X值和待选项按钮的X值和Y值的计算，如下图所示。

这是计算答案按钮的leftMargin和X值。其中，answerW的值和margin的值需要我们自己定义。



这是计算待选项按钮的leftMargin和X的值以及Y的值。其中，optionW的值、optionH的值需要我们定义。



4. 相关代码

①添加存放答案的按钮

- (void)addAnswerBtn: (KIMQuestion *)question{
//5.1 删除之前的答案框
[self.answerView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
//5.2 添加新的答案框
unsigned long length = question.answer.length;
for (int i = 0; i < length; i++) {
UIButton *answerBtn = [[UIButton alloc]init];
[answerBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
// 设置背景
[answerBtn setBackgroundImage:[UIImage imageNamed:@"btn_answer"] forState:UIControlStateNormal];
[answerBtn setBackgroundImage:[UIImage imageNamed:@"btn_answer_highlighted"] forState:UIControlStateHighlighted];
// 设置frame
CGFloat margin = 10;
CGFloat answerW = 35;
CGFloat answerH = 35;
// 存放答案按钮的view的width = 当前view的width
CGFloat viewW = self.view.frame.size.width;
// 第一个按钮距离view的间距 = （viewW - 答案的长度 * 按钮的width - 每个按钮间距 *（个数 -1 ） ）*0.5
CGFloat leftMargin = (viewW - length * answerW - margin * (length - 1) )* 0.5;
CGFloat answerX = leftMargin + i * (answerW + margin);
answerBtn.frame = CGRectMake(answerX, 0, answerW, answerH);
// 将answerBtn添加到answerView
[self.answerView addSubview:answerBtn];
// 监听点击
[answerBtn addTarget:self action:@selector(answerClick:) forControlEvents:UIControlEventTouchUpInside];
}

}

②添加待选项的按钮

- (void)addOptionBtn: (KIMQuestion *)question{
//6.1 删除之前的待选项
[self.optionView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
//6.2 添加新的待选按钮
unsigned long count = question.options.count;
for (int i = 0; i < count; i++) {
UIButton *optionBtn = [[UIButton alloc]init];
// 设置背景
[optionBtn setBackgroundImage:[UIImage imageNamed:@"btn_option"] forState:UIControlStateNormal];
[optionBtn setBackgroundImage:[UIImage imageNamed:@"btn_option_highlighted"] forState:UIControlStateHighlighted];
// 设置frame
CGFloat optionW = 35;
CGFloat optionH = 35;
CGFloat margin = 10;
int totalColumns = 8;
CGFloat viewW = self.view.frame.size.width;
CGFloat leftMargin = (viewW - totalColumns * optionW - margin * (totalColumns - 1)) * 0.5;
int col = i % totalColumns;
CGFloat optionX = leftMargin + col * (optionW + margin);
int row = i / totalColumns;
CGFloat optionY = row * (optionH + margin);
optionBtn.frame = CGRectMake(optionX, optionY, optionW, optionH);
// 设置文字
[optionBtn setTitle:question.options[i] forState:UIControlStateNormal];
[optionBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
// 将optionBtn添加到optionView
[self.optionView addSubview:optionBtn];
// 监听点击
[optionBtn addTarget:self action:@selector(optionClick:) forControlEvents:UIControlEventTouchUpInside];
}

}

五、部分代码及说明

（1）监听答案按钮的点击。

①当待选项按钮optionBtn的hidden属性 = NO时，显示之前被隐藏的optionBtn。

② optionBtn.currentTitle 和answerBtn.currentTitle 是获取当前待选项按钮和答案按钮的Title。

③ 想让用户点击的答案按钮的文字消失时，只需要将其Title设置成nil即可。

- (void)answerClick:(UIButton *)answerBtn{
// 1.让答案按钮文字对应的待选按钮显示(hidden = NO)
for (UIButton *optionBtn in self.optionView.subviews) {
if ([optionBtn.currentTitle isEqualToString:answerBtn.currentTitle]) {
optionBtn.hidden = NO;
break;           // 停止遍历
}
}
// 2.让被点击的答案按钮的文字消失
[answerBtn setTitle:nil forState:UIControlStateNormal];
// 3.让所有的答案按钮变为黑色
for (UIButton *answerBtn in self.answerView.subviews) {
[answerBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
}

}

（2）监听待选项按钮的点击

① 当optionBtn的hidden属性 = YES时，对应点击的optionBtn将会暂时被隐藏。

② 调用的titleForState方法。传的参数一般设置为UIControlStateNormal，即普通状态下的文字。

- (void)optionClick:(UIButton *)optionBtn{
// 1.让被点击的待选按钮消失
optionBtn.hidden = YES;
// 2.把文件显示到答案按钮上
for (UIButton *answerBtn in self.answerView.subviews) {
// 判断按钮是否有文字
NSString *answerTitle = [answerBtn titleForState:UIControlStateNormal];
if (answerTitle.length == 0) {      // 没有文字
// 设置答案按钮的文字为被点击待选项按钮的文字
NSString *optionTitle = [optionBtn titleForState:UIControlStateNormal];
[answerBtn setTitle:optionTitle forState:UIControlStateNormal];
break;
}
}
// 3.判断答案的正确性
[self chickAnswer];
}

（3）判断答案的正确性

① 先判断答案按钮是否有文字，当有文字时，调用appendString方法，将其答案按钮的文字进行拼接，并保存到tempAnswerTitle数组中。

② 当答案按钮被填满字时，取出模型类的答案数据，与tempAnswerTitle进行比较。若两者相同，则将答案文字设置为蓝色，分数增加相应分值，并且跳到下一题。

- (void)chickAnswer{
BOOL full = YES;
NSMutableString *tempAnswerTitle = [NSMutableString string];
for (UIButton *answerBtn in self.answerView.subviews) {
if (answerBtn.currentTitle.length == 0) {  //没有文字
full = NO;
}
// 拼接按钮文字
if(answerBtn.currentTitle){
[tempAnswerTitle appendString:answerBtn.currentTitle];
}
}
if(full){
KIMQuestion *question = self.questions[self.index];
if ([tempAnswerTitle isEqualToString:question.answer]) { // 答案正确，将文字的颜色更改为蓝色
for (UIButton *answerBtn in self.answerView.subviews){
[answerBtn setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
}
// 分数增加100
[self addScore:100];
// 0.5秒后跳到下一题
// 必须加一个判断标志，如果没有判断，进行到最后一道题，再答对的话，程序会闪退
if(self.index != self.questions.count - 1){
[self performSelector:@selector(next) withObject:nil afterDelay:0.5];
}
}else{      // 答案错误，将文字的颜色更改为红色
for (UIButton *answerBtn in self.answerView.subviews) {
[answerBtn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
}
}
}
}

（4）监听放大按钮事件

① alloc一个按钮对象，设置frame，背景颜色及透明度alpha = 0.0。

② 为阴影注册缩小图片的监听器。

③ 交换图片和阴影的层顺序

④ 用block动画更改阴影的透明度以图片的大小。

- (IBAction)bigImage {
//1. 添加阴影
UIButton *shadow = [[UIButton alloc]init];
shadow.frame = self.view.bounds;
shadow.backgroundColor = [UIColor blackColor];
shadow.alpha = 0.0;
[shadow addTarget:self action:@selector(smallImag) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:shadow];
self.shadow = shadow;
//2. 调整图片和阴影的先后顺序
[self.view bringSubviewToFront:self.iconBtn];
[UIView animateWithDuration:0.25 animations:^{
shadow.alpha = 0.7;
//3. 更改图片的frame
CGFloat iconW = self.view.frame.size.width;
CGFloat iconH = iconW;
CGFloat iconY = (self.view.frame.size.height - iconH) * 0.5;
self.iconBtn.frame = CGRectMake(0, iconY, iconW, iconH);
}];

}

（5）监听点击提示按钮事件

① 先把用户点击的答案按钮的文字去掉，for循环为answerBtn注册answerClick监听器即可。相当于用户点击了答案按钮。

② 取出模型答案的第一个字，循环遍历待选项按钮的文字，若遍历到待选项按钮的文字与答案的第一个字相符时，停止遍历，并将该待选项按钮的文字添加到第一个答案按钮中，对应的待选项按钮隐藏，即相当于点击了待选项按钮事件。最后，分数减少对应的数值。

- (IBAction)tip {
// 1.把所有答案按钮的文字去掉，并将隐藏的待选项按钮显示
for (UIButton *answerBtn in self.answerView.subviews) {
[self answerClick:answerBtn];
}
// 2.取出模型的答案
KIMQuestion *question =self.questions[self.index];
// 2.1取出答案的第一个字
NSString *firstAnswer = [question.answer substringToIndex:1];
for (UIButton *optionBtn in self.optionView.subviews) {
if ([optionBtn.currentTitle isEqualToString:firstAnswer]) {
[self optionClick:optionBtn];
[self addScore:-200];
break;
}
}
}

六、运行结果

由运行结果可知，当输入的答案不正确时，答案按钮的字体颜色就会变成红色。但输入的答案正确时，答案按钮的颜色就会变成蓝色，但由于是最后一道题，所以不会跳转到下一题此时，下一题按钮也变成了灰色，不可点击的状态。





七、总结

都实现了基本的功能，但还存在着不少问题。首先第一次在真机测试的时，到了最后一道题，在输入正确的答案后，程序闪退了。之后，在模拟器测试也是这样，分析了下，原来是数组越界了。因为到了最后的一道题，当再次调用next下一题方法时，就会导致数组越界的错误。解决方法时，只要加一个判断标志就可以了。其次，当用户输入了不正确的答案时，答案按钮上的字就会变成红色，但此时，当用户继续点击待选项按钮时，待选项按钮还是会消失，但答案按钮因为文字满了，所以不会继续显示。点击答案按钮时，之前点击的文字会重新显示，但后来点击的待选项按钮却不会再次显示出来，这是一个bug吧，想了好久，还是解决不了。尝试过，如果答案按钮文字满后，将待选项按钮设置为不可用，但是一旦设置成不可用后，就不能再设置回可点击状态了。最后，就是求助功能还没有实现，待以后学习到，再回来完善这个项目。

——爱分享，一起学，共成长。