UIImageView+UILabel+UIButton的小Demo--超级猜图

原创 2017年03月28日 09:56:22


利用UIImageView+UILabel+UIButton做的一个小程序:


首先要实现各个控件的静态布局,要做好每个设备的适配。
因为我是小白,不太懂其他的适配方法,我就用比例来适配。
比如说:就6s的屏幕   375 x 667 的宽高来说,中间大图的宽高固定是182.5 x 182.5 那么宽对于屏幕的比例就是 182.5/375=0.5  ,高和宽一样。
即宽高  都为:

[UIScreen mainScreen].bounds.size.width * 0.5

用这种比例的方式来布局控件,就可以解决适配的问题

一般来说,先固定一个按钮的比例位置(也可以是绝对位置),然后其他的控件相对于这个控件来布局即可


点击下面被选按钮,会把文字传到答案选项框里面,且被选按钮文字隐藏,如果答案错了,答案选项框字体为红色。

实现的思路:
前提:答案按钮4个button是放在一个view里面的,被选答案按钮button也全是放在另一个view里面
点击被选答案按钮时候,遍历答案的view里面的UIButton,如果UIButton.currentTitle.lenght == 0的话,就把被选答案的当前文字设置为答案按钮的文字。然后被选答案隐藏起来。


如果被选答案全对,那么答案区域的字体就显示橙色字体,过0.5秒后自动到下一题,并且分数增加10分。
实现思路:
遍历答案区域的按钮的文字,然后记录下来,然后跟已经转化成模型的当前答案比较,对的话字体就显示橙色并且加10分。分数机制可以自己设置。


点击图片会放大,并且背景半透明白色。点击背景或者图片,还原图片的位置。
实现思路:
图片后面其实就是加了一个UIButton(遮罩)而已,然后设置这个UIButton的宽为屏幕的宽,高为屏幕的高,背景颜色为white,alpha为0.        
 当UIButton的alpha为0时候,然后把当前ImageView的frame设置为

CGRectMake(0, (ScreenHeight -ScreenWidth)*0.5,ScreenWidth,ScreenWidth);然后这是UIButton的alpha为0.5,然后把ImageView加到self.view的最上层。(

[self.viewbringSubviewToFront:self.bigImage];

ScreenWidth和ScreenHeight是屏幕宽高,我自定义过了。为什么要这样设置frame? 不要问为什么,就问你这样设置出来效果好看不?

当UIButton的alpha为0.5时候,还原当前ImageView原来的frame(可以临时保存他原来的frame)。然后设置UIButton的alpha为0.


除了这种方法之外,也可以用UITapGestureRecognizer来实现。这里就不赘述,可以自己改变来试试。


PS:无论用哪种方法,当ImageView还原到原来位置的时候,他处于视图层的位置和原来不一样了。这个Demo看不出来效果,如果你要做九宫格的图片或者多张图片,也是用这种方法实现放大效果的话,那么会出现缩小的图片也出现在放大图片的后面,而且还能点击。解决办法:可以先遍历self.view的子视图,仔细观察每个视图的frame的位置,你会发现因为他的视图层关系变化而导致的。可以直接把UIButton(遮罩)再加到self.view上面一次,强行改变他的视图层关系,就可以了。


个人觉得以上几点比较重要,其余的话,可以自己简单理解下。


此Demo仅供参考,小白写的不太好,忘见谅。


代码网址:https://github.com/HZhenF/Superguess.git
代码参考:点击打开链接








版权声明:本文为博主原创文章,未经博主允许不得转载。

IOS开发笔记28-超级猜图

1、 应用的需求 应用需求: 选项区:点击选项区中的按钮,可将文字显示到答案区的按钮上。 答案区:点击答案区的按钮,会将对应的文字返回到选项区。 下一题:进入下一题...
  • Su_tianbiao
  • Su_tianbiao
  • 2015年10月30日 20:36
  • 904

[iOS开发项目-7] 超级猜图

本项目是取自传智播客的教学项目,加入笔者的修改和润饰。1. 项目名称:超级猜图2. 项目截图展示3. 项目功能 点击图片或“大图”按钮,图片放大;再点击图片或点击周围区域,图片复原。 点击备选按钮,相...
  • apple890111
  • apple890111
  • 2015年10月06日 23:21
  • 642

iOS【开发热门游戏_超级猜图Demo】

AJ分享,必须精品 先看效果图 思路 需求分析 1,搭建界面 1》上半部分,固定的,用Storyboard直接连线(OK) 2》下半部分,根据题目的变化,不断变化和调整,用...
  • luolianxi
  • luolianxi
  • 2015年11月29日 00:40
  • 246

IOS-UI学习笔记(超级猜图)

1、iPhone6的屏幕大小375 * 667(4.7英寸) 2、让图片不能点击:(1)Highlight Adjust Image;                               ...
  • Rechard_chen
  • Rechard_chen
  • 2016年04月14日 14:11
  • 263

(素材源码)猫猫学IOS(六)UI之iOS热门游戏_超级猜图

猫猫分享,必须精品 素材代码地址: http://download.csdn.net/detail/u013357243/8523193 原文地址:http://blog.csdn.net/u0...
  • u013357243
  • u013357243
  • 2015年03月22日 17:17
  • 2642

day04-超级猜图

前言视图不能交互的几种情况1./**视图不能交互的几种情况: 1.视图的属性 1》 [[UIButton alloc] init].alpha ...
  • u011018979
  • u011018979
  • 2017年06月27日 10:55
  • 228

超级猜图

#import "ViewController.h" #import "CZquestions.h" @interface ViewController ()UIAlertViewDele...
  • better_dong
  • better_dong
  • 2015年08月30日 14:05
  • 270

pro-超级猜图

// // MJViewController.m // 01-超级猜图最终版 // // Created by apple on 14-3-27. // Copyright (c) 2014年...
  • baojie1022
  • baojie1022
  • 2014年12月26日 16:07
  • 691

应用:超级猜图(需求分析)

  • CG_Lueng
  • CG_Lueng
  • 2016年03月21日 17:37
  • 85

黑马程序员——超级猜图笔记

1.状态栏? 在iOS7中,状态栏默认情况下归控制器管理,比如状态栏的样式、状态栏是否可见; 控制器通过重写以下方法来控制状态栏: ①设置状态栏的样式: - (UIStatusBarStyle)...
  • u012815580
  • u012815580
  • 2015年01月29日 16:54
  • 179
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:UIImageView+UILabel+UIButton的小Demo--超级猜图
举报原因:
原因补充:

(最多只允许输入30个字)