[iOS UI进阶

A.需要掌握的

1. 设计、实现设置界面
2. cell的封装
3. UICollectionView的使用
4. 自定义UICollectionView
5. 抽取控制器父类
6. “帮助”功能

code source: https://github.com/hellovoidworld/HelloLottery

 

B.实现

1.探讨“设置”界面的实现方案

（1）“设置”界面可以采用的做法

• static cell（呆板，完全没有动态）
• 使用代码，条件判断逐个编写（麻烦，代码冗长）
• 使用模型、plist加载（能够动态配置跳转控制器，不能配置请求代码；由于使用字符串配置跳转控制器名，容易出现运行时错误）

 

（2）“设置”界面最终的做法

a.使用模型封装每个cell的数据（item)，使用Class作为跳转控制器属性（这样就能经过编译检测）

b.在“设置”控制器延迟加载数据，设置每个cell的数据

 

 

2.“设置”界面控制器基类

（1）创建cell的数据模型group

组：包含了头部和尾部数据，还有最重要的内容数据items

group：

• 头部标题
• 尾部标题
• items
  
  

（2）创建cell的数据模型item

包含了每个cell的内容，有图标、标题，根据有部分控件的不同，创建不同的item类

item:

• 图标
• 标题
• 跳转目标控制器类

 

各种不同类型的item数据模型类:

 

（3）创建自定义cell，包含图标、标题、右部分控件（暂时有跳转箭头、开关、文本）

• 设置数据成员（item模型数据属性）
• 加载数据
• 提供静态初始化方法cellWithTableView，使用缓冲池重用
• 细分子类自定义“开关”item（不能点击跳转，拥有一个开关）
• 细分子类自定义“箭头”item（点击跳转，没有开关）
• 默认的请求item（不能点击跳转，没有开关，内置block成员）

 

根据item的类型，描绘cell的外观：

/** 设置右部分控件 */
- (void) setupRightView {
    if ([self.item isKindOfClass:[HVWArrowSettingItem class]]) { // 跳转箭头类型
        self.accessoryView = self.arrowView;
    } else if ([self.item isKindOfClass:[HVWSwitchSettingItem class]]) { // 开关类型
        self.accessoryView = self.switchView;
    } else if ([self.item isKindOfClass:[HVWLabelSettingItem class]]) { // 标签类型
        self.accessoryView = self.labelView;
    } else {
        self.accessoryView = nil;
    }
}

 

 

 

（4）执行代码属性block

• 使用copy修饰
• 使用MBProgressHUD外部包进行提示信息显示，模拟交互效果

 

 

a.定义block成员

//
//  HVWSettingItem.h
//  HelloLottery
//
//  Created by hellovoidworld on 15/1/6.
//  Copyright (c) 2015年 hellovoidworld. All rights reserved.
//

#import <Foundation/Foundation.h>

typedef void (^RunningBlock)();

/** item基类 */
@interface HVWSettingItem : NSObject

/** 图标 */
@property(nonatomic, copy) NSString *icon;

/** 标题 */
@property(nonatomic, copy) NSString *title;

/** block代码 */
@property(nonatomic, copy) RunningBlock runningBlock;

+ (instancetype) itemWithIcon:(NSString *) icon title:(NSString *) title;
+ (instancetype) itemWithTitle:(NSString *) title;

@end

 

b.配置block

使用外部包辅助进行弹窗信息的显示

 

   // 第1组
    HVWSettingItem *updateCheckItem = [HVWArrowSettingItem itemWithIcon:@"MoreUpdate" title:@"检查新版本"];
   
    // 检查新版本配置一个block，模拟更新过程
    updateCheckItem.runningBlock = ^{
        // 弹窗提示
        [MBProgressHUD showMessage:@"正在使出吃奶的劲儿检查中..."];
       
        // 模拟发送网络请求延迟
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            // 隐藏消息框
            [MBProgressHUD hideHUD];
           
            // 提醒版本信息
            [MBProgressHUD showError:@"没有发现新版本!"];
        });
    };

 

（5）自定义继承UITableViewController的HVWBaseSettingViewController作为“设置”界面的控制器父类，为“设置”的若干个子界面提供公共逻辑代码。

包括功能

• 加载解析group和item数据
• 根据group数据创建table的样式
• 根据不同的item模型创建不同的cell外观
• 如果item类是跳转类型的，需要配置跳转目标控制器
• 如果item类是代码执行型的，需要配置block代码

 

a.使用同一个BaseSettingViewController作为父类，配置了不同数据的界面

 

b.所有类“设置”界面控制器：

c.MVC

 

 

3.部分代码

a.“设置”跳转控制器父类：

//
//  HVWBaseSettingViewController.m
//  HelloLottery
//
//  Created by hellovoidworld on 15/1/6.
//  Copyright (c) 2015年 hellovoidworld. All rights reserved.
//

#import "HVWBaseSettingViewController.h"
#import "HVWSettingGroup.h"
#import "HVWSettingItem.h"
#import "HVWSettingCell.h"
#import "HVWArrowSettingItem.h"

@interface HVWBaseSettingViewController ()

@end

@implementation HVWBaseSettingViewController

- (void)viewDidLoad {
    [super viewDidLoad];
   
   
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

/** 重写初始化方法 
* 一定要使用group样式
*/
- (instancetype)init {
    return [super initWithStyle:UITableViewStyleGrouped];
}

- (instancetype)initWithStyle:(UITableViewStyle)style {
    return [super initWithStyle:UITableViewStyleGrouped];
}

/** 加载空数据 */
- (NSMutableArray *)data {
    if (nil == _data) {
        _data = [NSMutableArray array];
    }
   
    return _data;
}

#pragma mark - Table view data source

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return self.data.count;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    HVWSettingGroup *group = self.data[section];
    return group.items.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    HVWSettingCell *cell = [HVWSettingCell cellWithTableView:tableView];
    HVWSettingGroup *group = self.data[indexPath.section];
    cell.item = group.items[indexPath.row];
    return cell;
}

#pragma mark - 代理方法
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    // 1.取消选中，不要保持选中状态
    [self.tableView deselectRowAtIndexPath:indexPath animated:YES];
   
    // 2.1加载点击事件
    HVWSettingGroup *group = self.data[indexPath.section];
    HVWSettingItem *item = group.items[indexPath.row];
   
    // 2.2如果配置有block， 运行block
    if (item.runningBlock) {
        item.runningBlock();
    }
   
    // 2.3配置跳转控制器
    if ([item isKindOfClass:[HVWArrowSettingItem class]]) { // 如果是跳转类型的item
        HVWArrowSettingItem *arrowItem = (HVWArrowSettingItem *) item;

       
        if (nil != arrowItem.destinationViewControllerClass) {
            UIViewController *viewController = [[arrowItem.destinationViewControllerClass alloc] init];
            viewController.title = arrowItem.title;
            [self.navigationController pushViewController:viewController animated:YES];
        }
    }
}

/** 组头部 */
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {
    HVWSettingGroup *group = self.data[section];
    return group.headerTitle;
}

/** 组尾部 */
- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section {
    HVWSettingGroup *group = self.data[section];
    return group.tailTitle;
}

@end

 

b.“设置”界面控制器

//
//  HVWSettingViewController.m
//  HelloLottery
//
//  Created by hellovoidworld on 15/1/6.
//  Copyright (c) 2015年 hellovoidworld. All rights reserved.
//

#import "HVWSettingViewController.h"
#import "HVWSettingGroup.h"
#import "HVWArrowSettingItem.h"
#import "HVWSwitchSettingItem.h"
#import "HVWPushNoticeViewController.h"
#import "MBProgressHUD+MJ.h"

@interface HVWSettingViewController ()

@end

@implementation HVWSettingViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.

    // 设置标题
    self.title = @"设置";

    // 配置数据
    [self setupGroup0];
    [self setupGroup1];
}

- (void) setupGroup0 {
    // 第0组
    HVWSettingItem *pushItem = [HVWArrowSettingItem itemWithIcon:@"MorePush" title:@"推送和提醒" destinationViewControllerClass:[HVWPushNoticeViewController class]];
    HVWSettingItem *shakeItem = [HVWSwitchSettingItem itemWithIcon:@"handShake" title:@"摇一摇机选"];
    HVWSettingItem *soundItem = [HVWSwitchSettingItem itemWithIcon:@"sound_Effect" title:@"声音效果"];
    HVWSettingItem *assistantItem = [HVWSwitchSettingItem itemWithIcon:@"IDInfo" title:@"购彩小助手"];
   
    HVWSettingGroup *group = [[HVWSettingGroup alloc] init];
    group.items = @[pushItem, shakeItem, soundItem, assistantItem];
   
    [self.data addObject:group];
}

- (void) setupGroup1 {
    // 第1组
    HVWSettingItem *updateCheckItem = [HVWArrowSettingItem itemWithIcon:@"MoreUpdate" title:@"检查新版本"];
   
    // 检查新版本配置一个block，模拟更新过程
    updateCheckItem.runningBlock = ^{
        // 弹窗提示
        [MBProgressHUD showMessage:@"正在使出吃奶的劲儿检查中..."];
       
        // 模拟发送网络请求延迟
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            // 隐藏消息框
            [MBProgressHUD hideHUD];
           
            // 提醒版本信息
            [MBProgressHUD showError:@"没有发现新版本!"];
        });
    };
   
    HVWSettingItem *checkMailItem = [HVWArrowSettingItem itemWithIcon:@"MoreMessage" title:@"查看邮箱"];
    HVWSettingItem *shareItem = [HVWArrowSettingItem itemWithIcon:@"MoreShare" title:@"分享"];
    HVWSettingItem *productRecommandItem = [HVWArrowSettingItem itemWithIcon:@"MoreNetease" title:@"产品推荐"];
    HVWSettingItem *aboutItem = [HVWArrowSettingItem itemWithIcon:@"MoreAbout" title:@"关于"];
   
    HVWSettingGroup *group = [[HVWSettingGroup alloc] init];
    group.items = @[updateCheckItem, checkMailItem, shareItem, productRecommandItem, aboutItem];
    [self.data addObject:group];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

 

 

4.“产品推荐”界面

 

基本框架：

 

（1）UICollectionView的基本使用

a.注册cell(告诉collectionView将来创建怎样的cell)

[self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"product"];

b.从缓存池中取出cell

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"product" forIndexPath:indexPath];

    return cell;
}

 

b.重写init方法,创建布局参数

- (id)init
{
    // 1.流水布局
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    // 2.每个cell的尺寸
    layout.itemSize = CGSizeMake(100, 100);
    return [super initWithCollectionViewLayout:layout];
}

 

 

（2）UICollectionViewFlowLayout

UICollectionViewFlowLayout称为”流水布局”, 用来约束cell的显示

常见属性
Cell的尺寸
@property (nonatomic) CGSize itemSize;

cell之间的水平间距
@property (nonatomic) CGFloat minimumInteritemSpacing;

cell之间的垂直间距
@property (nonatomic) CGFloat minimumLineSpacing;

四周的内边距

@property (nonatomic) UIEdgeInsets sectionInset;

 

 

（3）自定义UICollectionViewCell（每个“产品”图标）

a.通过一个json文件读取数据，使用“产品”模型封装

• 使用NSJSONSerialization解析JSON数据，得到装有字典数据的数组
• 字典转模型

 

b.使用xib设计自定义UICollectionCell

• 自定义类
• xib设计
• 自定义类的初始化、方法设计
  
  

 

 

c.UICollectionViewController对于xib自定义UICollectionCell的适配

• 修改重用方法
• 在init方法中，设置cell的尺寸、水平间距、垂直间距
• 设置四周间距

 

HVWUICollectionViewController：

//
//  HVWProductViewController.m
//  HelloLottery
//
//  Created by hellovoidworld on 15/1/7.
//  Copyright (c) 2015年 hellovoidworld. All rights reserved.
//

#import "HVWProductViewController.h"
#import "HVWProduct.h"
#import "HVWProductCell.h"

@interface HVWProductViewController ()

/** 数据 */
@property(nonatomic, strong) NSArray *products;

@end

@implementation HVWProductViewController

static NSString * const reuseIdentifier = @"HVWProductCell";

- (void)viewDidLoad {
    [super viewDidLoad];
   
    // 1.Register cell classes 注册cell，要使用哪个CollectionViewCell
    UINib *nib = [UINib nibWithNibName:@"HVWProductCell" bundle:[NSBundle mainBundle]];
    [self.collectionView registerNib:nib forCellWithReuseIdentifier:reuseIdentifier];
   
    // 2.设置背景色
    self.collectionView.backgroundColor = [UIColor whiteColor];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

/** 加载JSON数据 */
- (NSArray *)products {
    if (nil == _products) {
        // 1.读取json
        NSString *jsonPath = [[NSBundle mainBundle] pathForResource:@"more_project.json" ofType:nil];
       
        // 2.加载数据
        NSData *data = [NSData dataWithContentsOfFile:jsonPath];
       
        // 3.将json数据转成数组、字典，使用一个json工具类
        NSArray *dictArray = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:nil];
       
        // 4.字典转模型
        NSMutableArray *productArray = [NSMutableArray array];
        for (NSDictionary *dict in dictArray) {
            HVWProduct *product = [HVWProduct productWithDictionary:dict];
            [productArray addObject:product];
        }
       
        _products = productArray;
    }
    return _products;
}

/** 初始化，配置布局 */
- (instancetype)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);
   
    // 6.配置布局方式
    return [super initWithCollectionViewLayout:layout];
}



#pragma mark <UICollectionViewDataSource>

- (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
    HVWProductCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];
   
    // 2.配置模型数据
    cell.product = self.products[indexPath.item];
   
    return cell;
}

#pragma mark <UICollectionViewDelegate>
/** 选择事件 */
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    HVWProduct *product = self.products[indexPath.item];
    NSLog(@"选择了app: %@", product.title);
}

@end

 

8.“帮助”模块

 

 

 

（1）UIWebView

加载网页
// 创建URL
NSURL *url = [[NSBundle mainBundle] URLForResource:@”abc.html” withExtension:nil];
// 创建请求
NSURLRequest *request = [NSURLRequest requestWithURL:url];
// 发送请求加载网页
[webView loadRequest:request];

执行JavaScript(要等网页加载完毕才能执行)
[webView stringByEvaluatingJavaScriptFromString:js];

监听webView的加载
设置代理监听:webView.delegate = self;

 

 

（2）“帮助”界面

创建类“设置”界面控制器：HVWHelpViewController

a.加载json数据，使用HVWHtml模型封装

b.根据HVWHtml模型数据，封装出tableView的group和item用于显示

 

 

 

（3）“帮助”条目点击查看

a.HVWHelpViewController根据html数据动态配置了所有cell的显示内容，所以要再动态配置每个cell的跳转页面，跳转用控制器HVWHtmlViewController（这个是继承UIViewController的普通控制器）

b.创建一个UIViewController，使用UIWebView加载html网页

c.HVWHtmlViewController加载完html后，执行js代码跳转到html网页的指定位置

 

//
//  HVWHelpViewController.m
//  HelloLottery
//
//  Created by hellovoidworld on 15/1/7.
//  Copyright (c) 2015年 hellovoidworld. All rights reserved.
//

#import "HVWHelpViewController.h"
#import "HVWHtml.h"
#import "HVWArrowSettingItem.h"
#import "HVWSettingGroup.h"
#import "HVWHtmlViewController.h"
#import "HVWNavigationController.h"

@interface HVWHelpViewController ()

/** html数据 */
@property(nonatomic, strong) NSArray *htmls;

@end

@implementation HVWHelpViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
   
    // 配置html数据
    // 1.创建item
    NSMutableArray *items = [NSMutableArray array];
    for (HVWHtml *html in self.htmls) {
        HVWSettingItem *item = [HVWArrowSettingItem itemWithTitle:html.title destinationViewControllerClass:nil];
        [items addObject:item];
    }
   
    // 2.创建group
    HVWSettingGroup *group = [[HVWSettingGroup alloc] init];
    group.items = items;
   
    // 3.配置到tableView
    [self.data addObject:group];
}

/** 加载数据 */
- (NSArray *)htmls {
    if (nil == _htmls) {
        // 1.读取json
        NSString *jsonPath = [[NSBundle mainBundle] pathForResource:@"help.json" ofType:nil];
       
        // 2.解析json
        NSData *jsonData = [NSData dataWithContentsOfFile:jsonPath];
        NSArray *jsonArray = [NSJSONSerialization JSONObjectWithData:jsonData options:NSJSONReadingMutableContainers error:nil];
       
        // 3.字典转模型
        NSMutableArray *htmlArray = [NSMutableArray array];
        for(NSDictionary *dict in jsonArray) {
            HVWHtml *html = [HVWHtml htmlWithDictionary:dict];
            [htmlArray addObject:html];
        }
        _htmls = htmlArray;
       
    }
    return _htmls;
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


#pragma mark - 代理方法
/** cell点击跳转 */
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
   
    HVWHtmlViewController *htmlViewController = [[HVWHtmlViewController alloc] init];
    htmlViewController.html = self.htmls[indexPath.row];
   
    /** 为了实现向上弹出效果，不使用push，而是用modal (present**);
     *  使用NaviationController是为了配置一个头部导航栏
     */
    HVWNavigationController *nv = [[HVWNavigationController alloc] initWithRootViewController:htmlViewController];
    [self.navigationController presentViewController:nv animated:YES completion:nil];
}

@end

 

//
//  HVWHtmlViewController.m
//  HelloLottery
//
//  Created by hellovoidworld on 15/1/7.
//  Copyright (c) 2015年 hellovoidworld. All rights reserved.
//

#import "HVWHtmlViewController.h"
#import "HVWHtml.h"

@interface HVWHtmlViewController ()<UIWebViewDelegate>

@end

@implementation HVWHtmlViewController


- (void)loadView {
    // 改变内置view为UIWebView
    self.view = [[UIWebView alloc] init];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
   
}


/** 加载数据 */
- (void)setHtml:(HVWHtml *)html {
    _html = html;
   
    // 1.设置标题
    self.title = self.html.title;
   
    // 2.获取UIWebView
    UIWebView *webView = (UIWebView *) self.view;
    // 设置webView代理
    webView.delegate = self;
   
    // 3.创建URL
    NSURL *url = [[NSBundle mainBundle] URLForResource:self.html.html withExtension:nil];
   
    // 4.创建请求
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
   
    // 5.发送请求
    [webView loadRequest:request];
   
    // 6.添加关闭按钮
    self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"关闭" style:UIBarButtonItemStylePlain target:self action:@selector(close)];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

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

/** 加载html完毕，跳转到指定部分 */
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    // 1.合成js代码
    NSString *js = [NSString stringWithFormat:@"window.location.href = '#%@';", self.html.ID];
   
    // 2.执行js代码
    [webView stringByEvaluatingJavaScriptFromString:js];
}

@end