综合设计ui 彩票设计json 和 html添加

json的格式和plist文件差不多  所以思路也是差不多  首先创建模型

#import <Foundation/Foundation.h>

@interface MJHtml : NSObject
/**
 *  网页标题
 */
@property (nonatomic, copy) NSString *title;
/**
 *  网页文件名
 */
@property (nonatomic, copy) NSString *html;

@property (nonatomic, copy) NSString *ID;

- (instancetype)initWithDict:(NSDictionary *)dict;
+ (instancetype)htmlWithDict:(NSDictionary *)dict;
@end

#import "MJHtml.h"

@implementation MJHtml
- (instancetype)initWithDict:(NSDictionary *)dict
{
    if (self = [super init]) {
        self.html = dict[@"html"];
        self.title = dict[@"title"];
        self.ID = dict[@"id"];
    }
    return self;
}

+ (instancetype)htmlWithDict:(NSDictionary *)dict
{
    return [[self alloc] initWithDict:dict];
}
@end

然后创建一个MJHelpViewController  继承base

#import "MJHelpViewController.h"
#import "MJSettingArrowItem.h"
#import "MJSettingGroup.h"
#import "MJHtmlViewController.h"
#import "MJNavigationController.h"
#import "MJHtml.h"

@interface MJHelpViewController ()
@property (nonatomic, strong) NSArray *htmls;
@end

@implementation MJHelpViewController

- (NSArray *)htmls
{
    if (_htmls == nil) {
        
        // JSON文件的路径
        NSString *path = [[NSBundle mainBundle] pathForResource:@"help.json" ofType:nil];
        
        // 加载JSON文件
        NSData *data = [NSData dataWithContentsOfFile:path];
        
        // 将JSON数据转为NSArray或者NSDictionary
        NSArray *dictArray = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:nil];
        
        // 将字典转成模型
        NSMutableArray *htmlArray = [NSMutableArray array];
        for (NSDictionary *dict in dictArray) {
            MJHtml *html = [MJHtml htmlWithDict:dict];
            [htmlArray addObject:html];
        }
        
        _htmls = htmlArray;
    }
    return _htmls;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 1.创建所有的item
    NSMutableArray *items = [NSMutableArray array];
    for (MJHtml *html in self.htmls) {
        MJSettingItem *item = [MJSettingArrowItem itemWithTitle:html.title destVcClass:nil];
        [items addObject:item];
    }
    
    // 2.创建组
    MJSettingGroup *group = [[MJSettingGroup alloc] init];
    group.items = items;
    [self.data addObject:group];
}

这样json就写到了界面里面    然后点击要弹出下一个网页   网页显示的界面是UIWebView   在loadview中设置他的view为uiwebview

loadview

自定义VIEW  如果想把控制器的view换成其他view

然后设置网页的标题就是html 的标题    设置代理可以在OC中用javascript语句   拼接后使用

#import <UIKit/UIKit.h>
@class MJHtml;
@interface MJHtmlViewController : UIViewController
@property (nonatomic, strong) MJHtml *html;
@end

//
//  MJHtmlViewController.m
//  00-ItcastLottery
//
//  Created by apple on 14-4-17.
//  Copyright (c) 2014年 itcast. All rights reserved.
//

#import "MJHtmlViewController.h"
#import "MJHtml.h"

@interface MJHtmlViewController () <UIWebViewDelegate>

@end

@implementation MJHtmlViewController

- (void)loadView
{
    self.view = [[UIWebView alloc] init];
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 设置标题
    self.title = self.html.title;
    
    UIWebView *webView = (UIWebView *)self.view;
    webView.delegate = self;
    
    // 创建URL
    NSURL *url = [[NSBundle mainBundle] URLForResource:self.html.html withExtension:nil];
    
    // 创建请求
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    
    // 发送请求加载网页
    [webView loadRequest:request];
    
    // 设置左上角的关闭按钮
    self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"关闭" style:UIBarButtonItemStylePlain target:self action:@selector(close)];
}

- (void)close
{
    [self dismissViewControllerAnimated:YES completion:nil];
}

/**
 *  网页加载完毕的时候调用
 */
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    // 跳到id对应的网页标签
    
    // 1.拼接Javacript代码
    NSString *js = [NSString stringWithFormat:@"window.location.href = '#%@';", self.html.ID];
    // 2.执行JavaScript代码
    [webView stringByEvaluatingJavaScriptFromString:js];
}
@end

然后在help中  将下一个网页设置为navigation的根控制器  跳转

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    MJHtmlViewController *htmlVc = [[MJHtmlViewController alloc] init];
    htmlVc.html = self.htmls[indexPath.row];
    MJNavigationController *nav = [[MJNavigationController alloc] initWithRootViewController:htmlVc];
    [self presentViewController:nav animated:YES completion:nil];
}
@end

然后是

同样的先创建模型

#import <Foundation/Foundation.h>

@interface MJProduct : NSObject
@property (nonatomic, copy) NSString *title;
@property (nonatomic, copy) NSString *icon;
- (instancetype)initWithDict:(NSDictionary *)dict;
+ (instancetype)productWithDict:(NSDictionary *)dict;
@end

#import "MJProduct.h"

@implementation MJProduct
- (instancetype)initWithDict:(NSDictionary *)dict
{
    if (self = [super init]) {
        self.icon = dict[@"icon"];
        self.title = dict[@"title"];
//        [self setValuesForKeysWithDictionary:dict];
    }
    return self;
}

+ (instancetype)productWithDict:(NSDictionary *)dict
{
    return [[self alloc] initWithDict:dict];
}
@end

因为要 放到tableviewcell中所以要重写set方法  

#import <UIKit/UIKit.h>
@class MJProduct;

@interface MJProductCell : UICollectionViewCell
@property (nonatomic, strong) MJProduct *product;
@end

#import "MJProductCell.h"
#import "MJProduct.h"

@interface MJProductCell()
@property (weak, nonatomic) IBOutlet UIImageView *iconView;
@property (weak, nonatomic) IBOutlet UILabel *nameLabel;

@end

@implementation MJProductCell

- (void)awakeFromNib
{
    self.iconView.layer.cornerRadius = 8;   //圆角
    self.iconView.clipsToBounds = YES;      //超出圆角的剪掉
}

- (void)setProduct:(MJProduct *)product
{
    _product = product;
    
    // 1.设置头像
    self.iconView.image = [UIImage imageNamed:product.icon];
    
    // 2.设置名称
    self.nameLabel.text = product.title;
}

@end

这次是继承自UICollectionViewController  九宫格   

注意这要有个UICollectionViewFlowLayout        还要先注册nib   2中方式一种从nib注册一种代码注册

必须用一个非nil的layout参数来初始化UICollectionView

/**
 UICollectionView must be initialized with a non-nil layout parameter
 
 必须用一个非nil的layout参数来初始化UICollectionView
 */

#define MJProductCellID @"product"

#import "MJProductViewController.h"
#import "MJProduct.h"
#import "MJProductCell.h"

@interface MJProductViewController ()
@property (nonatomic, strong) NSArray *products;
@end

@implementation MJProductViewController

- (NSArray *)products
{
    if (_products == nil) {
        
        // JSON文件的路径
        NSString *path = [[NSBundle mainBundle] pathForResource:@"products.json" ofType:nil];
        
        // 加载JSON文件
        NSData *data = [NSData dataWithContentsOfFile:path];
        
        // 将JSON数据转为NSArray或者NSDictionary
        NSArray *dictArray = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:nil];
        
        // 将字典转成模型
        NSMutableArray *productArray = [NSMutableArray array];
        for (NSDictionary *dict in dictArray) {
            MJProduct *p = [MJProduct productWithDict:dict];
            [productArray addObject:p];
        }
        
        _products = productArray;
    }
    return _products;
}

- (id)init
{
    // 1.流水布局
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    // 2.每个cell的尺寸
    layout.itemSize = CGSizeMake(80, 80);
    // 3.设置cell之间的水平间距
    layout.minimumInteritemSpacing = 0;
    // 4.设置cell之间的垂直间距
    layout.minimumLineSpacing = 10;
    // 5.设置四周的内边距
    layout.sectionInset = UIEdgeInsetsMake(layout.minimumLineSpacing, 0, 0, 0);   //默认为10
    return [super initWithCollectionViewLayout:layout];
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 1.注册cell(告诉collectionView将来创建怎样的cell)
    UINib *nib = [UINib nibWithNibName:@"MJProductCell" bundle:nil];
    [self.collectionView registerNib:nib forCellWithReuseIdentifier:MJProductCellID];
    
//    [self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:MJProductCellID];
    
    // 2.设置collectionView的背景色
    self.collectionView.backgroundColor = [UIColor whiteColor];
}

#pragma mark - 数据源方法
//- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
//{
//    return 1;
//}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return self.products.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    // 1.获得cell
    MJProductCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:MJProductCellID forIndexPath:indexPath];
    
    // 2.传递模型
    cell.product = self.products[indexPath.item];
    
    return cell;
}

#pragma mark - 代理方法
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    MJProduct *p = self.products[indexPath.item];
    NSLog(@"点击了---%@", p.title);
}

@end