iOS开发UI篇—自定义瀑布流控件（接口设计）

iOS开发UI篇—自定义瀑布流控件（接口设计）

一、简单说明

1.关于瀑布流

　　

电商应用要展示商品信息通常是通过瀑布流的方式，因为每个商品的展示图片，长度和商都都不太一样。

如果不用瀑布流的话，展示这样的格子数据，还有一种办法是使用九宫格。

但利用九宫格有一个缺点，那就是每个格子的宽高是一样的，如果一定要使用九宫格来展示，那么展示的商品图片可能会变形。

为了保证商品图片能够按照原来的宽高比进行展示，一般采用的是瀑布流的方式。

2.瀑布流的特点：

由很多的格子组成，但是每个格子的宽度和高速都是不确定的，是在动态改变的，就像瀑布一样，是一条线一条线的。

说明:使用tableView不能实现瀑布流式的布局，因为tableView是以行为单位的，它要求每行（cell）的高度在内部是一致的。

本系列文章介绍了如何自定义一个瀑布流控件来展示商品信息，本文介绍自定义瀑布流的接口设计。

 

3.自定义瀑布流控件的实现思路

　　参考UITbaleView控件的设计。

　　

（1）设置数据源（强制的，可选的）

1)告诉有多少个数据（cell）

2)每一个索引对应的cell

3)告诉显示多少列

（2）设置代理

代理方法都是可选的。

1）设置第index位置对应的高度

2）监听选中了第index的cell（控件)

3）设计返回的间距那么

 

二、自定义瀑布流控件（接口设计）

1.新建一个项目

　　

2.新建一个类，继承自UIScrollView，自己写一个瀑布流控件。

　　

　　

3.接口设计

 YYWaterflowView.h文件的代码设计

//
//  YYWaterflowView.h
//  06-瀑布流01接口设计
//
//  Created by apple on 14-7-29.
//  Copyright (c) 2014年 wendingding. All rights reserved.
//

#import <UIKit/UIKit.h>

//使用瀑布流形式展示内容的控件
typedef enum {
    YYWaterflowViewMarginTypeTop,
    YYWaterflowViewMarginTypeBottom,
    YYWaterflowViewMarginTypeLeft,
    YYWaterflowViewMarginTypeRight,
    YYWaterflowViewMarginTypeColumn,//每一列
    YYWaterflowViewMarginTypeRow,//每一行

}YYWaterflowViewMarginType;

@class YYWaterflowViewCell,YYWaterflowView;

/**
 *  1.数据源方法
 */
@protocol YYWaterflowViewDataSource <NSObject>
//要求强制实现
@required
/**
 * （1）一共有多少个数据
 */
-(NSUInteger)numberOfCellsInWaterflowView:(YYWaterflowView *)waterflowView;
/**
 *  (2)返回index位置对应的cell
 */
-(YYWaterflowViewCell *)waterflowView:(YYWaterflowView *)waterflowView cellAtIndex:(NSUInteger)index;

//不要求强制实现
@optional
/**
 *  (3)一共有多少列
 */
-(NSUInteger)numberOfColumnsInWaterflowView:(YYWaterflowView *)waterflowView;

@end


/**
 *  2.代理方法
 */
@protocol YYWaterflowViewDelegate <UIScrollViewDelegate>
//不要求强制实现
@optional
/**
 *  (1)第index位置cell对应的高度
 */
-(CGFloat)waterflowView:(YYWaterflowView *)waterflowView heightAtIndex:(NSUInteger)index;
/**
 *  (2)选中第index位置的cell
 */
-(void)waterflowView:(YYWaterflowView *)waterflowView didSelectAtIndex:(NSUInteger)index;
/**
 *  (3)返回间距
 */
-(CGFloat)waterflowView:(YYWaterflowView *)waterflowView marginForType:(YYWaterflowViewMarginType)type;
@end


/**
 *  3.瀑布流控件
 */
@interface YYWaterflowView : UIScrollView
/**
 *  (1)数据源
 */
@property(nonatomic,weak)id<YYWaterflowViewDataSource> dadaSource;
/**
 *  (2)代理
 */
@property(nonatomic,weak)id<YYWaterflowViewDelegate> delegate;
@end

主控制器中的使用：

YYViewController.m文件的代码

//
//  YYViewController.m
//  06-瀑布流01接口设计
//
//  Created by apple on 14-7-28.
//  Copyright (c) 2014年 wendingding. All rights reserved.
//

#import "YYViewController.h"
#import "YYWaterflowView.h"
#import "YYWaterflowViewCell.h"

@interface YYViewController ()<YYWaterflowViewDelegate,YYWaterflowViewDataSource>

@end

@implementation YYViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    YYWaterflowView *waterflow=[[YYWaterflowView alloc]init];
    waterflow.frame=self.view.bounds;
    waterflow.delegate=self;
    waterflow.dadaSource=self;
    [self.view addSubview:waterflow];
}

#pragma mark-数据源方法
-(NSUInteger)numberOfCellsInWaterflowView:(YYWaterflowView *)waterflowView
{
    return 100;
}
-(NSUInteger)numberOfColumnsInWaterflowView:(YYWaterflowView *)waterflowView
{
    return 3;
}
-(YYWaterflowViewCell *)waterflowView:(YYWaterflowView *)waterflowView cellAtIndex:(NSUInteger)index
{
    YYWaterflowViewCell *cell=[[YYWaterflowViewCell alloc]init];
    //给cell设置一个随机色
    cell.backgroundColor=YYRandomColor;
    return cell;
}


#pragma mark-代理方法
-(CGFloat)waterflowView:(YYWaterflowView *)waterflowView heightAtIndex:(NSUInteger)index
{
    switch (index%3) {
        case 0:return 70;
        case 1:return 100;
        case 2:return 80;
        default:return 120;
    }
}
-(CGFloat)waterflowView:(YYWaterflowView *)waterflowView marginForType:(YYWaterflowViewMarginType)type
{
    switch (type) {
        case YYWaterflowViewMarginTypeTop:
        case YYWaterflowViewMarginTypeBottom:
        case YYWaterflowViewMarginTypeLeft:
        case YYWaterflowViewMarginTypeRight:
            return 10;
        case YYWaterflowViewMarginTypeColumn:
        case YYWaterflowViewMarginTypeRow:
            return 20;
    }
}
-(void)waterflowView:(YYWaterflowView *)waterflowView didSelectAtIndex:(NSUInteger)index
{
    NSLog(@"点击了%d的cell",index);
}
@end

pch文件中随机色的设置

//
//  Prefix header
//
//  The contents of this file are implicitly included at the beginning of every source file.
//

#import <Availability.h>

#ifndef __IPHONE_5_0
#warning "This project uses features only available in iOS SDK 5.0 and later."
#endif

#ifdef __OBJC__
    #import <UIKit/UIKit.h>
    #import <Foundation/Foundation.h>

// 颜色
#define YYColor(r, g, b) [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:1.0]
#define YYColorRGBA(r, g, b, a) [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:a]

// 随机色
#define YYRandomColor YYColor(arc4random_uniform(256), arc4random_uniform(256), arc4random_uniform(256))
#endif