iOS开发-九宫格Demo展示

前言: 今天给同学讲一下布局和MVC封装的过度 那么就建一个九宫格的项目给同学们瞅瞅！那么废话不多说，上代码！

 

//

//  ZZViewController.h

//  九宫格多种实现

//

//  Created by 周昭 on 16/10/20.

//  Copyright © 2016年 HT_Technology. All rights reserved.

//

 

#import <UIKit/UIKit.h>

 

@interface ZZViewController : UIViewController

 

@end

 

 

//

//  ZZViewController.m

//  九宫格多种实现

//

//  Created by 周昭 on 16/10/20.

//  Copyright © 2016年 HT_Technology. All rights reserved.

//

 

#import "ZZViewController.h"

#import "ZZApp.h"

#import "ZZAppView.h"

 

@interface ZZViewController()

/**

 *  懒加载数据

 */

@property (nonatomic,strong)NSArray *apps;

@end

 

@implementation ZZViewController

 

 

#pragma mark - 12个4行3列

- (NSArray *)apps

{

    if (_apps ==nil) {

        // 1.获得plist的全路径

        NSString *path = [[NSBundlemainBundle]pathForResource:@"app.plist"ofType:nil];

        

        // 2.加载数组

        NSArray *dictArray = [NSArrayarrayWithContentsOfFile:path];

        

        // 3.将dictArray里面的所有字典转成模型对象,放到新的数组中

        NSMutableArray *appArray = [NSMutableArrayarray];

        for (NSDictionary *dictin dictArray) {

            

            // 3.1创建模型对象

            ZZApp *app = [ZZAppappWithDict:dict];

            

            // 3.2添加模型对象到数组中

            [appArray addObject:app];

        }

        _apps = appArray;

    }

    return_apps;

}

 

- (void)viewDidLoad {

    [superviewDidLoad];

    

    /*

     // 首先我们一进入界面就要添加应用信息那么在viewDidLoad中加载

     CGFloat appViewW = 80;

     CGFloat appViewH = 90;

     CGFloat margin = (self.view.frame.size.width - 3 * appViewW) / 4;

     

     // 那么分析思路对于9宫格我们肯定是要封装成一个整体的view内部添加子控件那么实现一改动全部改动

     

     // 尝试添加1个小框框

     UIView *appView = [[UIView alloc] init];

     appView.backgroundColor = [UIColor redColor];

     CGFloat appViewX = margin;

     CGFloat appViewY = 30;

     appView.frame = CGRectMake(appViewX, appViewY, appViewW, appViewH);

     [self.view addSubview:appView];

     

     // 尝试添加2个小框框

     UIView *appView2 = [[UIView alloc] init];

     appView2.backgroundColor = [UIColor blueColor];

     CGFloat appView2X = margin + appViewW + margin;

     CGFloat appView2Y = appViewY;

     appView2.frame = CGRectMake(appView2X, appView2Y, appViewW, appViewH);

     [self.view addSubview:appView2];

     */

#warning - 写到这里那么我们就觉得这样一直添加下去肯定是垃圾代码并且不好拓展控制器内的代码量冗余(很恶心)

#pragma mark - 如果到这里你都没有体会到这个恶心程度那么同学你就该反思一下了如果我们的plist改了那么我们所有的东西都要改

    // 0.总列数

    int totalColumns =3;

    

    // 1.应用的尺寸

    CGFloat appViewW =80;

    CGFloat appViewH =90;

    

    // 2.间隙 = (控制器view的宽度 - 3 * 应用宽度) / 4

    CGFloat marginX = (self.view.frame.size.width - totalColumns * appViewW) / (totalColumns + 1);

    CGFloat marginY =20;

    // 3.根据应用个数创建对应的框框

    for (int i =0; i <self.apps.count; i++) {

        // 3.1创建小框框

        ZZAppView *appView = [[ZZAppViewalloc]init];

#pragma mark - 这里我们分析肯定要根据i的值来改变框框的x&y值

        // 3.2计算行号和列号

        int row = i / totalColumns;

        int col = i % totalColumns;

        

        // 3.3计算框框的位置

        CGFloat appViewX = marginX + col * (appViewW + marginX);

        CGFloat appViewY =30 + row * (appViewH + marginY);

        appView.frame =CGRectMake(appViewX, appViewY, appViewW, appViewH);

        

        // 3.4添加框框到控制器的view

        [self.viewaddSubview:appView];

        

        // 3.5给appView传递模型数据

        appView.app =self.apps[i];

#pragma mark - 字典存放数据你的key写错就完蛋字符串报错系统不会提示你

        /*

         * 到这里那么我们肯定要采取封装view的形式来减少控制器的压力那么直接干起来

         // 3.5添加内部的小控件(首先拿到字典信息)

         ZZApp *appInfo = self.apps[i];

         

         

         // 3.6图片

         UIImageView *iconImg = [[UIImageView alloc] init];

         CGFloat iconImgW = 45;

         #pragma mark - 乘法效率比除法效率高

         CGFloat iconImgX = (appViewW - iconImgW) * 0.5;

         CGFloat iconImgY = 0;

         CGFloat iconImgH = iconImgW;

         iconImg.frame = CGRectMake(iconImgX, iconImgY, iconImgW, iconImgH);

         iconImg.image = [UIImage imageNamed:appInfo.icon];

         [appView addSubview:iconImg];

         

         #pragma mark - 文字直接填充然后居中如果文字有多少你算多少然后居中这样你不觉得很累吗？

         // 3.7文字

         UILabel *nameLabel = [[UILabel alloc] init];

         nameLabel.text = appInfo.name;

         nameLabel.textAlignment = NSTextAlignmentCenter;

         nameLabel.font = [UIFont systemFontOfSize:13];

         CGFloat nameLabelX = 0;

         CGFloat nameLabelY = iconImgH;

         CGFloat nameLabelW = appViewW;

         CGFloat nameLabelH = 20;

         nameLabel.frame = CGRectMake(nameLabelX, nameLabelY, nameLabelW, nameLabelH);

         [appView addSubview:nameLabel];

         

         // 3.8按钮

         #pragma mark - 按钮内部有文字和图片(注意自学技巧)设置按钮的文字按钮内部的子控件因为按钮有状态所以设置文字你要准确的告诉按钮是什么文字？UIImageView内部内容模式contentMode UIButton内部的子控件是自读的

         UIButton *downLoadBtn = [[UIButton alloc] init];

         [downLoadBtn setBackgroundImage:[UIImage imageNamed:@"buttongreen"] forState:UIControlStateNormal];

         [downLoadBtn setBackgroundImage:[UIImage imageNamed:@"buttongreen_highlighted"] forState:UIControlStateHighlighted];

         [downLoadBtn setTitle:NSLocalizedString(@"下载", nil) forState:UIControlStateNormal];

         downLoadBtn.titleLabel.font = [UIFont systemFontOfSize:13];

         CGFloat downLoadBtnX = nameLabelX;

         CGFloat downLoadBtnY = nameLabelY + nameLabelH;

         CGFloat downLoadBtnW = appViewW;

         CGFloat downLoadBtnH = 20;

         downLoadBtn.frame = CGRectMake(downLoadBtnX, downLoadBtnY, downLoadBtnW, downLoadBtnH);

         [appView addSubview:downLoadBtn];

         

         #warning - 如果控制器里面你还全部这么写(你考虑过拓展性吗？)不觉得这样写很恶心吗～所以现在开始封装搞起来

         */

    }

}

 

@end

 

//

//  ZZApp.h

//  九宫格多种实现

//

//  Created by 周昭 on 16/10/14.

//  Copyright © 2016年 HT_Technology. All rights reserved.

//

 

#import <Foundation/Foundation.h>

 

@interface ZZApp : NSObject

/**

 *  名字

 */

@property (nonatomic,copy)NSString *name;

 

/**

 *  图标

 */

@property (nonatomic,copy)NSString *icon;

 

#pragma mark - id 和 instancetype区别 (id外部任何对象都能接收如果写错了你后面只会越错越多)

/**

 *  通过字典转模型对象

 *

 *  @param dict 字典对象

 *

 *  @return 已经初始化完毕的模型对象

 */

- (instancetype)initWithDict:(NSDictionary *)dict;

 

+ (instancetype)appWithDict:(NSDictionary *)dict;

 

@end

 

//

//  ZZApp.m

//  九宫格多种实现

//

//  Created by 周昭 on 16/10/14.

//  Copyright © 2016年 HT_Technology. All rights reserved.

//

 

#import "ZZApp.h"

 

@implementation ZZApp

 

- (instancetype)initWithDict:(NSDictionary *)dict

{

    if (self = [superinit]) {

        self.name = dict[@"name"];

        self.icon = dict[@"icon"];

    }

    returnself;

}

 

+ (instancetype)appWithDict:(NSDictionary *)dict

{

    return [[selfalloc]initWithDict:dict];

}

 

@end

 

//

//  ZZAppView.h

//  九宫格多种实现

//

//  Created by 周昭 on 16/10/20.

//  Copyright © 2016年 HT_Technology. All rights reserved.

//

 

#import <UIKit/UIKit.h>

#import "ZZApp.h"

 

@interface ZZAppView : UIView

 

@property (nonatomic,strong)ZZApp *app;

 

@end

 

//

//  ZZAppView.m

//  九宫格多种实现

//

//  Created by 周昭 on 16/10/20.

//  Copyright © 2016年 HT_Technology. All rights reserved.

//

 

#import "ZZAppView.h"

 

@interface ZZAppView ()

/**

 *  图片

 */

@property (nonatomic,weak)UIImageView *iconImg;

/**

 *  名称

 */

@property (nonatomic,weak)UILabel *nameLabel;

/**

 *  下载按钮

 */

@property (nonatomic,weak)UIButton *downLoadBtn;

 

@end

 

@implementation ZZAppView

/**

 *  通过代码初始化

 */

- (instancetype)initWithFrame:(CGRect)frame

{

    if (self = [superinitWithFrame:frame]) {

        [selfsetUpSubViews];

    }

    returnself;

}

 

/**

 *  通过xib/归档来初始化

 */

- (instancetype)initWithCoder:(NSCoder *)decoder

{

    if (self = [superinitWithCoder:decoder]) {

        [selfsetUpSubViews];

    }

    

    returnself;

}

 

- (void)setUpSubViews

{

    // 3.6图片

    UIImageView *iconImg = [[UIImageViewalloc]init];

    [selfaddSubview:iconImg];

    self.iconImg = iconImg;

    

    // 3.7文字

    UILabel *nameLabel = [[UILabelalloc]init];

    nameLabel.textAlignment =NSTextAlignmentCenter;

    nameLabel.font = [UIFontsystemFontOfSize:13];

    [selfaddSubview:nameLabel];

    self.nameLabel = nameLabel;

    

    // 3.8按钮

    UIButton *downLoadBtn = [[UIButtonalloc]init];

    [downLoadBtn setBackgroundImage:[UIImageimageNamed:@"buttongreen"]forState:UIControlStateNormal];

    [downLoadBtn setBackgroundImage:[UIImageimageNamed:@"buttongreen_highlighted"]forState:UIControlStateHighlighted];

    [downLoadBtn setTitle:NSLocalizedString(@"下载",nil)forState:UIControlStateNormal];

    downLoadBtn.titleLabel.font = [UIFontsystemFontOfSize:13];

    [selfaddSubview:downLoadBtn];

    self.downLoadBtn = downLoadBtn;

}

 

/**

 *  拿到真实的尺寸给内部子控件设置frame

 */

- (void)layoutSubviews

{

    [superlayoutSubviews];

    

    CGFloat iconImgW =45;

    CGFloat iconImgX = (self.frame.size.width - iconImgW) * 0.5;

    CGFloat iconImgY =0;

    CGFloat iconImgH = iconImgW;

    self.iconImg.frame =CGRectMake(iconImgX, iconImgY, iconImgW, iconImgH);

    

    CGFloat nameLabelX =0;

    CGFloat nameLabelY = iconImgH;

    CGFloat nameLabelW =self.frame.size.width;

    CGFloat nameLabelH =20;

    self.nameLabel.frame =CGRectMake(nameLabelX, nameLabelY, nameLabelW, nameLabelH);

    

    CGFloat downLoadBtnX = nameLabelX;

    CGFloat downLoadBtnY = nameLabelY + nameLabelH;

    CGFloat downLoadBtnW = nameLabelW;

    CGFloat downLoadBtnH =20;

    self.downLoadBtn.frame =CGRectMake(downLoadBtnX, downLoadBtnY, downLoadBtnW, downLoadBtnH);

}

 

/**

 *  传递模型数据

 */

- (void)setApp:(ZZApp *)app

{

    _app = app;

    

    self.nameLabel.text = app.name;

    

    self.iconImg.image = [UIImageimageNamed:app.icon];

}

 

@end