028-超级猜图-iOS笔记

学习目标

1.【理解】应用的需求

2.【理解】设置图标和启动图片

3.【理解】创建模型类加载数据

4.【理解】搭建基本界面并初始化

5.【理解】实现图片放大缩小功能

6.【理解】动态创建答案区

7.【理解】动态创建选项区

8.【理解】答案区和选项区的交互

9.【理解】实现提示按钮功能

一、应用的需求

应用需求

选项区:点击选项区中的按钮,可将文字显示到答案区的按钮上。

答案区:点击答案区的按钮,会将对应的文字返回到选项区。

下一题:进入下一题,重新加载各种数据。

正误判断:如果答案错误则文字变红,正确则变绿并进入下一题。

图片缩放:点击图片、大图按钮都能实现图片放大缩小功能。

大图后的阴影:图片放大后会有一层阴影,点击阴影可以缩小图片。

提示:能清空答案区先有文字并取出正确答案的第一个文字显示到第一个按钮中。

帮助:目前没有增加功能,可以随意增加。

积分:答对一题加100分,答错一题扣100分,点击提示扣100分。答题完毕或分数小于0则提示游戏结束,是否重新开始。

图片有点大,点击链接查看动态图:点击这里查看动态图

028-超级猜图-iOS笔记

二、设置图标和启动图片

创建项目,先去掉Ceneral中的Launch Screen File选项,并选择Launch Images SourceImages

028-超级猜图-iOS笔记

将启动界面的所有素材图片拖到Images.xcassets中的LaunchImage目录,Xcode会自动适配各种屏幕和版本。

028-超级猜图-iOS笔记

将app用到的各种图标素材拖到Images.xcassets中的AppIcon目录,这样启动图片和各种图片都设置好了。

028-超级猜图-iOS笔记

将app用到的各种图片、图标素材和plist文件导入,注意有plist文件就先创建Model类加载数据。

028-超级猜图-iOS笔记

三、创建模型类加载数据

创建的Model类命名应该与plist文件名保存一致,并且根据plist文件中的数据类型定义Model类的属性。

028-超级猜图-iOS笔记

Model类一般会提供快速创建模型的对象方法和类方法,还有快速返回一个模型数组的类方法。

JFQuestions.h文件

JFQuestions.m文件

创建好Model类后,先在Contronller中定义一个数组属性用于存储模型对象,并重新这个属性的get方法加载模型数组。

ViewController.m文件

四、搭建基本界面并初始化

背景图:先拖拽一个UIImageView并全屏,用于设置应用的背景图。

积分:最好是Button,因为积分旁边有个小图标,可以通过设置按钮Image来实现。

索引:只显示文字数据,所以用Label。

标题:只显示文字数据,所以用Label。

图片:图片可点击,所以用Button。

其他按钮:用脚趾头都能想到使用按钮,并设置。

028-超级猜图-iOS笔记

设置界面控件的各种属性,我们这里先不考虑答案区、选项区。

028-超级猜图-iOS笔记

然后各种控件拖线,拖线的原则是要调用控件(修改控件属性等)就设置为属性,如果只是点击后触发一个事件就连线方法。

028-超级猜图-iOS笔记

ViewController.m文件

加载界面并初始化索引为0的模型数组的各种数据到控件上显示,并对下一题按钮进行监控。如果到最后一题就禁用下一题按钮,防止下标越界。

实现效果如下图:

028-超级猜图-iOS笔记

五、实现图片放大缩小功能

阴影控制:阴影不能直接加到界面,这样会覆盖掉包括图片的整个界面,所以放大实现中要将图片放到最外一层。阴影背景会不止在一个方法中调用,所以我们最好设置为属性,方便调用。

图片缩放:点击大图、图片都能实现图片放大,点击图片和阴影背景都能实现图片缩小。图片放大、缩小和阴影出现、消失都有渐变效果,所以使用动画来实现。图片实现缩放,必须要知道原先图片的frame,所以我们最好设置一个属性保存图片原先的frame。

注意:点击图片默认会有点击效果,去掉Highlighted Adjusts Image即可解决。

028-超级猜图-iOS笔记

ViewController.m文件

实现效果如下图:

028-超级猜图-iOS笔记

六、动态创建答案区

答案区我们可以动态创建答案按钮在一个View中,然后把这个View添加到父视图(屏幕)上。View我们可以直接拖控件,再循环创建按钮控件并添加到这个View上。和我们前两天写的九宫格大同小异,非常easy,这里我就不分析计算过程了。

028-超级猜图-iOS笔记

ViewController.m文件

实现效果如下图:

028-超级猜图-iOS笔记

七、动态创建选项区

和创建答案区的方式类似,先拖一个UIView,动态创建选项区按钮并添加到选项区的UIView。

028-超级猜图-iOS笔记

ViewController.m文件

实现效果如下图:

028-超级猜图-iOS笔记

八、答案区和选项区的交互

点击选项区会将按钮上的文字赋值给答案区的按钮,并隐藏被点击的选项区按钮。点击答案区会清楚被点击按钮的文字,并将选项区对应按钮显示出来。如果答案区按钮都全部赋值,就判断答案是否成功,如果成功则加分并判断是否是最后一题,不是则进入下一题,是则提示游戏结束。

028-超级猜图-iOS笔记

ViewController.m文件

九、实现提示按钮功能

每次点击提示按钮会扣分,再清空答案区按钮并恢复选项区按钮,然后截取正确答案第一个文字添加到答案区第一个按钮上。

方法如下代码

至此整个小练习就完成了,再随意新增一些简单功能,就不多做演示。

六阿哥

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: