首页 >> 大全

阿健的iOS开发Demo(应用图标的九宫格排列、看图猜词游戏)

2024-01-06 大全 27 作者:考证青年

DEMO应用图标的九宫格排列

重点功能:1、每个图标都包含图标、应用名和下载按钮 2、九宫格排列应用

1.应用图标如图:

_看图排列顺序_看图猜词猜食物

现在Xcode比较简单的方法是直接新建Xib文件用作应用的模板,Xib文件可以用来描述一块局部的UI界面。方法是新建Xib文件,将其属性中的size选项设为,再将xib中所需的、和直接拖到合适位置,并设置约束。接下来就是连线到对应的模板文件中,在代码中给各个控件赋值。将Xib文件加载到模板类中主要有下面两个方法:

//方法一
NSArray *objs = [[NSBundle mainBundle] loadNibNamed:@”TJAppView" owner:nil options:nil];
//方法二
UINib *nib = [UINib nibWithNibName:@”TJAppView" bundle:[NSBundle mainBundle]];
NSArray *objs = [nib instantiateWithOwner:nil options:nil];

方法一会创建Xib中所有的对象(、、)并将他们按顺序放到objs数组中

方法二参数可以为nil,它默认是main

在开发阶段,开发者面向的是Xib文件,而应用装到手机后,Xib转为nib文件

Xib开发虽然比较简单,但拓展性比较差,如果后续有需求要改动应用模板,就需要重新建文件、连线、设置约束等等,过程比较复杂,他只适合少量同类型模板的项目。接下来我用纯代码来实现这个模板(部分重要代码):

 //app的imageView加载CGFloat imageViewHeight = 45;CGFloat imageViewX = (self.frame.size.width-imageViewHeight)/2;_imageView = [[UIImageView alloc]initWithFrame:CGRectMake(imageViewX, 5, imageViewHeight, imageViewHeight)];[self addSubview:_imageView];//app的lable加载_lable = [[UILabel alloc]initWithFrame:CGRectMake(0, CGRectGetMaxY(_imageView.frame), self.frame.size.width, 15)];//居中和字体大小_lable.textAlignment = NSTextAlignmentCenter;_lable.font = [UIFont systemFontOfSize:13];[self addSubview:_lable];//button的加载_button = [[UIButton alloc]initWithFrame:CGRectMake(imageViewX-3, CGRectGetMaxY(_lable.frame), 51, 20)];//button背景[_button setBackgroundImage:[UIImage imageNamed:@"buttongreen" ] forState:UIControlStateNormal];[_button setBackgroundImage:[UIImage imageNamed:@"buttongreen_highlighted" ] forState:UIControlStateHighlighted];//button文本及字体大小[_button setTitle:@"下载" forState:UIControlStateNormal];[_button setTitle:@"已安装" forState:UIControlStateDisabled];_button.titleLabel.font = [UIFont systemFontOfSize:13];[self addSubview:_button];

用代码实现比较灵活,不会将控件写死,可以根据需求改动

2.九宫格的实现

九宫格其实重点就是子View在父View中x和y值的设置

看图排列顺序_看图猜词猜食物_

    //子View的宽和高CGFloat appViewWidth = 80;CGFloat appViewHeight = 90;//每行3个app,计算出间隔CGFloat margin = (self.view.frame.size.width-appViewWidth*3)/4;//获取应用的个数NSInteger count = self.dataArray.count;for (int i = 0; i

给不同的应用的子控件赋值,就得到下面的效果:

看图排列顺序__看图猜词猜食物

我这里是使用plist文件给每个模板子控件进行赋值的,这是属于简单的MVC(Model View )开发模式

DEMO看图猜词游戏

这个demo用的都是一些比较简单地UI控件,只是本demo的业务逻辑较为复杂一点,这里就不详述了,只说说一个新的东西,截图如下:

_看图猜词猜食物_看图排列顺序

看图猜词猜食物__看图排列顺序

可以看到,这里我进行了一个图片点击操作,或者点击“大图”按钮,图片放大,周围模糊

a.模糊效果

我这里的想法是直接在整个屏幕添加一个view,设置为黑色全透明,这样我只需要在需要的时候改变其透明度就可以让它显示出来

_coverView = [[UIView alloc]initWithFrame:self.view.frame];_coverView.backgroundColor = [UIColor blackColor];_coverView.alpha = 0;[self.view addSubview:_coverView];

b.图片放大,最前端显示

由于图片可以点击,我这里是用的一个来放置图片的,点击后图片放大代码如下:

//设置一个动画放大效果
[UIView animateWithDuration:1 animations:^{_imageButton.transform = CGAffineTransformMakeScale(1.4, 1.4);//按钮宽高放大为原来的1.4倍_coverView.alpha = 0.7;//设置透明度,让覆盖层显示}];[self.view bringSubviewToFront:_imageButton];//防止图片也被覆盖层遮盖

:方法是将参数View移动到视图的最顶层

c.补充:app应用图标

不同机型上应用图标规格也不一样,下面就是常见的一些应用图标规格:

.png:非-屏幕(3.5inch),

@2x.png:-屏幕(3.5inch),

-568h@2x.png:4inch的-屏幕,

-~ipad.png:非-iPad竖屏屏幕,

-~ipad@2x.png:-iPad竖屏屏幕,

-~ipad.png:非-iPad横屏屏幕,

-~ipad@2x.png:-iPad横屏屏幕,

我这里只需将程序需要支持的机型的相应规格图片拖到项目“.”文件右边“”的图片区即可

看图排列顺序__看图猜词猜食物

程序会自动根据机型选择相应图片作为应用图标

关于我们

最火推荐

小编推荐

联系我们


版权声明:本站内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 88@qq.com 举报,一经查实,本站将立刻删除。备案号:桂ICP备2021009421号
Powered By Z-BlogPHP.
复制成功
微信号:
我知道了