首页 > 代码库 > iOS开发UI篇—自定义瀑布流控件（接口设计）
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文件的代码设计
1 // 2 // YYWaterflowView.h 3 // 06-瀑布流01接口设计 4 // 5 // Created by apple on 14-7-29. 6 // Copyright (c) 2014年 wendingding. All rights reserved. 7 // 8 9 #import <UIKit/UIKit.h>10 11 //使用瀑布流形式展示内容的控件12 typedef enum {13 YYWaterflowViewMarginTypeTop,14 YYWaterflowViewMarginTypeBottom,15 YYWaterflowViewMarginTypeLeft,16 YYWaterflowViewMarginTypeRight,17 YYWaterflowViewMarginTypeColumn,//每一列18 YYWaterflowViewMarginTypeRow,//每一行19 20 }YYWaterflowViewMarginType;21 22 @class YYWaterflowViewCell,YYWaterflowView;23 24 /**25 * 1.数据源方法26 */27 @protocol YYWaterflowViewDataSource <NSObject>28 //要求强制实现29 @required30 /**31 * （1）一共有多少个数据32 */33 -(NSUInteger)numberOfCellsInWaterflowView:(YYWaterflowView *)waterflowView;34 /**35 * (2)返回index位置对应的cell36 */37 -(YYWaterflowViewCell *)waterflowView:(YYWaterflowView *)waterflowView cellAtIndex:(NSUInteger)index;38 39 //不要求强制实现40 @optional41 /**42 * (3)一共有多少列43 */44 -(NSUInteger)numberOfColumnsInWaterflowView:(YYWaterflowView *)waterflowView;45 46 @end47 48 49 /**50 * 2.代理方法51 */52 @protocol YYWaterflowViewDelegate <UIScrollViewDelegate>53 //不要求强制实现54 @optional55 /**56 * (1)第index位置cell对应的高度57 */58 -(CGFloat)waterflowView:(YYWaterflowView *)waterflowView heightAtIndex:(NSUInteger)index;59 /**60 * (2)选中第index位置的cell61 */62 -(void)waterflowView:(YYWaterflowView *)waterflowView didSelectAtIndex:(NSUInteger)index;63 /**64 * (3)返回间距65 */66 -(CGFloat)waterflowView:(YYWaterflowView *)waterflowView marginForType:(YYWaterflowViewMarginType)type;67 @end68 69 70 /**71 * 3.瀑布流控件72 */73 @interface YYWaterflowView : UIScrollView74 /**75 * (1)数据源76 */77 @property(nonatomic,weak)id<YYWaterflowViewDataSource> dadaSource;78 /**79 * (2)代理80 */81 @property(nonatomic,weak)id<YYWaterflowViewDelegate> delegate;82 @end
主控制器中的使用：
YYViewController.m文件的代码
1 // 2 // YYViewController.m 3 // 06-瀑布流01接口设计 4 // 5 // Created by apple on 14-7-28. 6 // Copyright (c) 2014年 wendingding. All rights reserved. 7 // 8 9 #import "YYViewController.h"10 #import "YYWaterflowView.h"11 #import "YYWaterflowViewCell.h"12 13 @interface YYViewController ()<YYWaterflowViewDelegate,YYWaterflowViewDataSource>14 15 @end16 17 @implementation YYViewController18 19 - (void)viewDidLoad20 {21 [super viewDidLoad];22 YYWaterflowView *waterflow=[[YYWaterflowView alloc]init];23 waterflow.frame=self.view.bounds;24 waterflow.delegate=self;25 waterflow.dadaSource=self;26 [self.view addSubview:waterflow];27 }28 29 #pragma mark-数据源方法30 -(NSUInteger)numberOfCellsInWaterflowView:(YYWaterflowView *)waterflowView31 {32 return 100;33 }34 -(NSUInteger)numberOfColumnsInWaterflowView:(YYWaterflowView *)waterflowView35 {36 return 3;37 }38 -(YYWaterflowViewCell *)waterflowView:(YYWaterflowView *)waterflowView cellAtIndex:(NSUInteger)index39 {40 YYWaterflowViewCell *cell=[[YYWaterflowViewCell alloc]init];41 //给cell设置一个随机色42 cell.backgroundColor=YYRandomColor;43 return cell;44 }45 46 47 #pragma mark-代理方法48 -(CGFloat)waterflowView:(YYWaterflowView *)waterflowView heightAtIndex:(NSUInteger)index49 {50 switch (index%3) {51 case 0:return 70;52 case 1:return 100;53 case 2:return 80;54 default:return 120;55 }56 }57 -(CGFloat)waterflowView:(YYWaterflowView *)waterflowView marginForType:(YYWaterflowViewMarginType)type58 {59 switch (type) {60 case YYWaterflowViewMarginTypeTop:61 case YYWaterflowViewMarginTypeBottom:62 case YYWaterflowViewMarginTypeLeft:63 case YYWaterflowViewMarginTypeRight:64 return 10;65 case YYWaterflowViewMarginTypeColumn:66 case YYWaterflowViewMarginTypeRow:67 return 20;68 }69 }70 -(void)waterflowView:(YYWaterflowView *)waterflowView didSelectAtIndex:(NSUInteger)index71 {72 NSLog(@"点击了%d的cell",index);73 }74 @end
pch文件中随机色的设置
1 // 2 // Prefix header 3 // 4 // The contents of this file are implicitly included at the beginning of every source file. 5 // 6 7 #import <Availability.h> 8 9 #ifndef __IPHONE_5_010 #warning "This project uses features only available in iOS SDK 5.0 and later."11 #endif12 13 #ifdef __OBJC__14 #import <UIKit/UIKit.h>15 #import <Foundation/Foundation.h>16 17 // 颜色18 #define YYColor(r, g, b) [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:1.0]19 #define YYColorRGBA(r, g, b, a) [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:a]20 21 // 随机色22 #define YYRandomColor YYColor(arc4random_uniform(256), arc4random_uniform(256), arc4random_uniform(256))23 #endif
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。