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

本文链接：https://blog.csdn.net/tj462989817/article/details/49669511

DEMO<1>应用图标的九宫格排列

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

1.应用图标如图：

现在Xcode比较简单的方法是直接新建Xib文件用作应用的模板，Xib文件可以用来描述一块局部的UI界面。方法是新建Xib文件，将其属性中的size选项设为freeform，再将xib中所需的UIImageView、UILable和UIButton直接拖到合适位置，并设置约束。接下来就是连线到对应的模板文件中，在代码中给各个控件赋值。将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中所有的对象（UIImageView、UILable、UIButton）并将他们按顺序放到objs数组中

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

在开发阶段，开发者面向的是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<count; i++) {

        NSInteger rowIndex = i/3;//index对3取整判断属于哪一行
        NSInteger columnIndex = i%3;//index对3取余判断属于哪一列
        //子View的x、y值
        CGFloat appX = (columnIndex+1)*margin+columnIndex*appViewWidth;
        CGFloat appY = (rowIndex +1)*margin+rowIndex*appViewHeight;
        //实例化并设置frame
        appView *app = [[appView alloc]initWithFrame:CGRectMake(appX, appY, appViewWidth, appViewHeight)];
       
        [self.view addSubview:app];
    }
}

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

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

DEMO<2>看图猜词游戏

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

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

a.模糊效果

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

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

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

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

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

bringSubviewToFront:方法是将参数View移动到视图的最顶层
c.补充:app应用图标

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

Default.png：非retina-iPhone屏幕（3.5inch），320x480

Default@2x.png：retina-iPhone屏幕（3.5inch），640x960

Default-568h@2x.png：4inch的retina-iPhone屏幕，640x1136

Default-Portrait~ipad.png：非retain-iPad竖屏屏幕，768x1024

Default-Portrait~ipad@2x.png：retain-iPad竖屏屏幕，1536x2048

Default-Landscape~ipad.png：非retain-iPad横屏屏幕，1024x768

Default-Landscape~ipad@2x.png：retain-iPad横屏屏幕，2048x1536

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