iOS开发 - 第01篇 - UI基础 - 04 - 超级猜图

最新推荐文章于 2022-01-07 15:18:27 发布

NSRyan

最新推荐文章于 2022-01-07 15:18:27 发布

阅读量948

点赞数

分类专栏： iOS开发 iOS开发笔记文章标签： ios开发 ui

本文链接：https://blog.csdn.net/nsryan/article/details/51367195

版权

iOS开发同时被 2 个专栏收录

44 篇文章 0 订阅

订阅专栏

iOS开发笔记

44 篇文章 0 订阅

订阅专栏

超级猜图程序实现要求：

程序源代码下载地址：http://download.csdn.net/detail/nsryan/9517104

1、搭建界面

1> 上半部分，固定的，用Storyboard直接连线

2> 下半部分，根据题目的变化，不断变化和调整，用代码实现会比较合适

* 备选按钮区域

* 答案按钮区域

2、调整状态栏颜色

3、遮罩视图及优化

遮罩视图 --- 建立蒙版，使图片放大后，下面的控件上面盖一层半透明蒙版。

注：上述代码，每次都会alloc一个cover Button遮罩，返回小图再删除，效率较低——优化：将cover作为属性（懒加载），需要的时候显示，设置alpha为1.0；不需要的时候隐藏，设置alpha为0.0，并加上动画，完成之后不需要在removeFromSuperview！

4、大图小图切换整合

5、补充

补充1：对于按钮来说，即可以有图片，又可以有文字。对于点击中间图片可以会有高亮（用户点击中间图片不松开，图片变暗，需要取消高亮——可在storyboard中取消）；但是对于右上角的分数来说（有金币图片和分数，采用按钮来做方便，可以不使用UIImageView和UILabel），但是需要使按钮不使能——可在storyboard中关闭使能。

补充2：打印对象信息

6、块代码实现 --- 遍历 & 排序 & 乱序

6.1 遍历 --- 效率比for in要高！

6.2 排序

6.3 乱序

7、程序崩溃异常捕获

8、主要方法的代码拆分

9、备选按钮创建优化

10、思路总结 --- 重要

10.1 搭建界面

1>上半部分，固定的，用storyboard直接连线；

2>下半部分，根据题目的变化，不断变化和调整，用代码实现比较合适；

· 备选按钮区域

· 答案按钮区域

10.2 编写代码

1> 大图小图切换

大图：

1. 添加蒙版（遮罩）cover；

2. 将图像按钮弄到最前面；

3. 动画放大图像按钮；

小图：

1. 将图像恢复初始位置；

2. 动画完成之后，删除cover；

优化：

1. 添加cover出现和消失的过渡过程，通过控制cover的alpha；

2. cover改成属性，需要的时候显示，不需要的时候隐藏，不需要每次都去生成，并使用懒加载方式加载控件；

3. 通过蒙版的alpha来判断按钮是否已经被放大，如果没有放大就执行放大操作，否则进行缩小操作；

4. 关闭storyboard中的高亮调整图像（否则点住图片的时候变灰），金币按钮不使能。

2> 字典转模型

补：添加快速生成strong属性变量和copy的NSString属性变量的代码块；

1. 模型添加属性（使用KVC赋值）；

2. 添加实例化方法和类方法：字典转模型；

- (instancetype)initWithDict:(NSDictionary *)dict;

+ (instancetype)questionWithDict: (NSDictionary *)dict;

3. 添加加载plist的类方法；

+ (NSArray *)questions;

4. 添加模型对象描述方法：重写description方法，打印对象信息，方便调试；

5. 在ViewController中添加模型数组，并使用懒加载加载plist模型；

3> 下一题

1. 当前答题的索引，索引递增，注意：如果到达最后一题则禁用下一题按钮；

2. 从模型数组中按照索引取出相应的模型数据；

3. 设置基本信息；

4. 设置答案按钮；

注1：在storyboard中添加一个UIView，在该UIView中添加按钮，方便布局。

注2：在添加按钮之前需要先清掉UIView中的之前的按钮；

5. 设置备选按钮；

注1：九宫格布局算法；

注2：设置备选答案及文字颜色；

6. 设置按钮背景图片；

7. 优化：对于备选区按钮，每次调用方法，都会重新创建21个按钮。改：如果按钮已经存在，并且是21个，只需要更改标题文字即可；

4> 备选按钮的点击，让文字进入答案区

1. 在答案区找到第一个文字为空的按钮：遍历答题区所有按钮，取按钮标题，返回第一个为空(btn.currentTitle.length == 0)的标题按钮；

2. 将Button的标题设置给答案区的按钮，注意标题字体颜色；

3. 将Button隐藏：btn.hidden = YES；

注：如果没有找到按钮，则已填满，判断结果；

5> 判断结果

1.如果四个按钮都有文字，才需要判断结果；

2. 已填满，判断是否和答案一致，如果一致，进入下一题，否则，修改文字颜色，提示用户；

注1：可通过添加一个NSMutableString，在第一次遍历答案区按钮文字的时候都拼接到里面，在判断操作中直接比较该字符串；

注2：根据index来取出模型数据中的答案比较；

3. 添加修改答案区按钮文字颜色方法；

4. 答对等待0.5秒，进入下一题，performSelector；

注1：需要将隐藏的按钮打开；

注2：如果index已经到达最后一项，提示用户通关；

6> 答题按钮的点击

1. 如果没有字，直接返回

2. 如果有字，清除文字，备选区按钮文字显示

注1：使用button的title去查找备选区中相对应的按钮，并显示，再清除button的文字；

注2：两个相同的文字处理：查找对应按钮的时候添加按钮是否隐藏判断；

3. 只要点击了按钮上的文字，意味着答案区不完整，修改字体颜色；

7> 提示

1. 把答题区中所有按钮清空：只需要遍历所有按钮，执行点击答题按钮方法即可；

2. 把正确答案的第一个字设置到答题区中；

注1：取出正确答案的第一个字substringToIndex

注2：取出对应的备选区按钮，执行点击备选区按钮操作；

8> 分数处理

1. 取出当前分数；

2. 使用参数score调整分数；

3. 重新设置分数；

9> 答案乱序处理

1. 在模型中添加对options数组的乱序方法；

注1：使用代码块乱序方法，参考上面乱序处理；

注2：若在KVC模型数据赋值的时候乱序处理，则只在加载的时候，做一次乱序处理；若在ViewController创建备选按钮之后进行乱序处理，则每次点击下一题的时候，都会乱序；