一、我们先来总结一下之前的步骤: 1.新建项目 2.拷贝素材 3. 懒加载模型数据 4. 通过storyboard设计"超级猜图"的上半部分界面。 1> 一个UIImageView做背景 2> 分析界面上的控件应该使用什么控件 **注意按钮点击要想没有高亮-效果取消: highlighted adjust image属性 5. 实现状态栏白色文字效果。 6. 实现点击"下一题"功能。 *使用一个index属性来记录当前显示的题目的索引。 *点击"下一题"的时候,从数组中获取对应的题目,并显示到对应的界面控件上。 *解决最后一题之后,再次点击“下一题”索引越界问题。sender. enabled = (self. index != self. questions.count - 1); **注意:设置按钮图片的时候,通过调用setImage: forState: UIControlStateNormal 方法来设置。 7.在viewDidLoad中初始化第一个问题(显示第一个问题到界面上)。 *设置self. index = -1 *手动调用"下一题’按钮的点击事件 8.实现"查看大图"功能。 ** 点击右侧"大图"按钮,显示大图 *实现思路(步骤) : 1>添加一个“阴影"按钮,因为该"阴影"要实现点击,所以用"按钮"。 2>然后再把"头像按钮"显示在"阴影"上面。 3>通过动画的方式改变"头像按钮"的frame(位置和尺寸)变成大图效果。 **注意:如果图片没有变大,检查是否没有取消"自动布局(Auto Layout )" **点击"遮罩阴影",回到小图 1>通过动画慢慢将"遮罩阴影"的透明度变为0 2>通过动画慢慢将"头像图片"的frame修改为原来的位置 3>在动画执行完毕后,移除"遮罩阴影” **点击图片本身显示大图,再次点击图片本身显示小图 9.动态生成"答案按钮“。 *思路: 0>在点击"下一题"按钮中实现该功能 1>创建一个UIView来存放所有的"答案按钮" 2>根据每个问题的答案的文字个数来创建按钮 3>每次创建按钮之前,先把旧的按钮都删除 4>指定每个"答案按钮“的尺寸和中间的margin,然后计算第一个按钮的x值(marginLeft) 。 5>在循环中,计算每个按钮的x值(y值都是0)。 10.动态生成"待选项按钮"。 *思路: 0>在点击"下一题"按钮中实现该功能 1>创建一个UIView来存放所有的"待选项按钮" 2>根据每个问题的options数组中的元素个数来创建按钮 3>每次创建按钮之前,先把旧的按钮都删除 4>指定每个“答案按钮”的尺寸和中间的margin,然后计算第一个按钮的x值(marginLeft) 5>计算每个按钮的y值。 11.实现"待选按钮"的单击事件 *隐藏当前被点击的"待选按钮" *将当前被点击的"待选按钮"的文字显示到"答案按钮"的左起第一个为空的按钮上 *如果"答案按钮"已经全部填满了,那么就不允许再点击"待选按钮"了。 **注意:只要父控件不能处理事件,那么子控件也无法处理事件。 1>如果"答案按钮"文字填满了,则设置option view禁止与用户交互 self. optionsView.userInteractionEnabled = NO; 2>当用户再次点击"答案按钮"时或点击"下一题"后在创建"待选按钮"的时候再次启用option view与用户的交互功能 self.optionsView. userInteractionEnabled = YES; 12.实现"答案按钮"的单击事件 *设置被点击的"答案按钮"文字为空(nil) *设置与当前被点击的"答案按钮"相对应的"待选按钮“显示出来 注意:这里注意一个bug, 当答案按钮中有两个相同的文字的option按钮时的问题 **解决: 1>为每个option按钮设置一个唯一的tag 2>在点击某个option按钮的时候,把option按钮的text和tag都设置到answer按钮上 3>在点击answer按钮的时候,判断answer 按钮的文字与tag同时都与某个option按钮匹配时,再显示这个option按钮 *设置所有"答案按钮"的文字颜色为黑色 13.在“待选按钮"的单击事件中,判断当前的答案的正确性 *每次点击"待选按钮"都需要做判断,如果答案按钮"满了”, 再去判断正确性 *如果正确: