iOS开发学习之实现瀑布流

您好、

相信您都知道第三方框架带来的不仅是方便，还给我们在架构上带来了不一样的灵感。。。

当然，虾米在学习当中是看着别人所写的框架的。。。

所以今天虾米 通过第三框架中搭建一个简单的瀑布流小作业。。。

如果当中有什么说不清楚  或者是虾米说错的地方。。。请留下您的评论或者是联系虾米。xiexie..

下面我来说说我所学习的知识点吧。

对于一个瀑布流，我们会想到UITableView来实现，不过它是整齐有规律的  一行一行的如同一个表格。不像瀑布流一样 长长短短 参差不齐 。不过也有它的落差美。。。^-^ 哇哈哈 。。

下拉刷新大致意图：

上拉加载更多大致意图：

用到我们程序的一些代码也要跟着改，这也许是用别人东西的不好之处吧！！！

要用到别人的waterflowView  就必须遵守它的代理协议和数据源方法。

waterflowView是继承UIscrollview实现的。

#import "JHShopsViewController.h"
#import "JHShop.h"
#import "MJExtension.h"
#import "HMWaterflowView.h"
#import "JHShopCell.h"
#import "MJRefresh.h"

@interface JHShopsViewController ()<HMWaterflowViewDataSource,HMWaterflowViewDelegate>

@property (nonatomic, strong) NSMutableArray *shops;
@property (nonatomic,weak) HMWaterflowView *waterflowView;

@end

@implementation JHShopsViewController

-(NSMutableArray *)shops
{
    if (_shops == nil) {
        self.shops = [NSMutableArray array];
    }
    return _shops;
}


- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 0. 初始化数据
    NSArray *newShops = [JHShop objectArrayWithFilename:@"2.plist"];
    [self.shops addObjectsFromArray:newShops];

    
    //瀑布流控件
    HMWaterflowView *waterflowView = [[HMWaterflowView alloc] init];
    waterflowView.backgroundColor = [UIColor greenColor];
    // 跟随着父控件的尺寸而自动伸缩
    waterflowView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
    waterflowView.frame = self.view.bounds;
    waterflowView.dataSource = self;
    waterflowView.delegate = self;
    [self.view addSubview:waterflowView];
    self.waterflowView = waterflowView;
    
//    [waterflowView addHeaderWithCallback:^{
//        nil;
//    }];
//    [waterflowView addFooterWithCallback:^{
//        nil;
//    }];

    
    [waterflowView addHeaderWithTarget:self action:@selector(loadNewShops)];
    [waterflowView addFooterWithTarget:self action:@selector(loadMoreShops)];
    
}

-(void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation
{
    [self.waterflowView reloadData];
}

通过运用MJRefresh设计，我们可以调用下拉刷新和上拉加载更多的实现方法。只要是你的控件属性是可以滚动就可以实现该方法的调用。。。

通过plist来创建一个模型数组。

- (void)loadNewShops
{
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        NSArray *newShops = [JHShop objectArrayWithFilename:@"1.plist"];
        [self.shops insertObjects:newShops atIndexes:[NSIndexSet indexSetWithIndexesInRange:NSMakeRange(0, newShops.count)]];
    });

    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [self.waterflowView reloadData];
        
        [self.waterflowView headerEndRefreshing];
    });
}

- (void)loadMoreShops
{
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        NSArray *moreShops = [JHShop objectArrayWithFilename:@"3.plist"];
        [self.shops addObjectsFromArray:moreShops];

    });
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        
        [self.waterflowView reloadData];
        
        [self.waterflowView footerEndRefreshing];
    });
}

接下来是实现数据源和代理方法：

#pragma mark - 数据源方法
-(NSUInteger)numberOfCellsInWaterflowView:(HMWaterflowView *)waterflowView
{
    return self.shops.count;
}

- (HMWaterflowViewCell *)waterflowView:(HMWaterflowView *)waterflowView cellAtIndex:(NSUInteger)index
{
    JHShopCell *cell = [JHShopCell cellWithWaterflowView:waterflowView];
    cell.shop = self.shops[index];
    
    return cell;
}
-(NSUInteger)numberOfColumnsInWaterflowView:(HMWaterflowView *)waterflowView
{
    if(UIInterfaceOrientationIsPortrait(self.interfaceOrientation)){
        return 3;
    } else {
        return 5;
    }
}


#pragma mark - 代理方法
-(CGFloat)waterflowView:(HMWaterflowView *)waterflowView heightAtIndex:(NSUInteger)index
{
    JHShop *shop = self.shops[index];
     // 根据cell的宽度 和 图片的宽高比 算出 cell的高度
    return waterflowView.cellWidth * shop.h / shop.w;
}
@end

上面是主控制器的实现 。

 不过以下我们需要对JHShopCell进行近一步的封装，cell里面设置了两个属性UIImageView和UILabel.通过layoutSubviews调整其位置。

并将传进来的模型shop 在ImageView和Label上显示。

//
//  JHShopCell.m
//  瀑布流应用OFJH
//
//  Created by cjj on 15-9-16.
//  Copyright (c) 2015年 jh.chen. All rights reserved.
//

#import "JHShopCell.h"
#import "HMWaterflowView.h"
#import "JHShop.h"
#import "UIImageView+WebCache.h"

@interface JHShopCell()
@property (nonatomic, weak) UIImageView *imageView;
@property (nonatomic, weak) UILabel *priceLabel;

@end

@implementation JHShopCell

+ (instancetype)cellWithWaterflowView:(HMWaterflowView *)waterflowView
{
    static NSString *ID = @"SHOP";
    JHShopCell *cell = [waterflowView dequeueReusableCellWithIdentifier:ID];
    if (cell == nil) {
        cell = [[JHShopCell alloc] init];
        cell.identifier = ID;
    }
    return cell;
}

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        UIImageView *imageView = [[UIImageView alloc] init];
        [self addSubview:imageView];
        self.imageView = imageView;
        
        UILabel *priceLabel = [[UILabel alloc] init];
        priceLabel.backgroundColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.3];
        priceLabel.textAlignment = UITextAlignmentCenter;
        priceLabel.textColor = [UIColor whiteColor];
        [self addSubview:priceLabel];
        self.priceLabel = priceLabel;
    }
    return self;
}

-(void)setShop:(JHShop *)shop
{
    _shop = shop;
    self.priceLabel.text = shop.price;
    [self.imageView sd_setImageWithURL:[NSURL URLWithString:shop.img] placeholderImage:[UIImage imageNamed:@"loading.png"]];
}

-(void)layoutSubviews
{
    [super layoutSubviews];
    
    self.imageView.frame = self.bounds;
    
    CGFloat priceX = 0;
    CGFloat priceH = 25;
    CGFloat priceY = self.bounds.size.height - priceH;
    CGFloat priceW = self.bounds.size.width;
    self.priceLabel.frame = CGRectMake(priceX, priceY, priceW, priceH);
}
@end

如果有什么好的建议,请联系虾米，虾米感激不尽 蟹蟹 哈！！

虾米联系方式：

QQ:584837022

github：https://github.com/ios-cjh