码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2014-07-29 13:55:18      阅读:3717      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   使用   os   strong   文件   

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

一、简单说明

1.关于瀑布流

  bubuko.com,布布扣

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

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

bubuko.com,布布扣

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

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

2.瀑布流的特点:
由很多的格子组成,但是每个格子的宽度和高速都是不确定的,是在动态改变的,就像瀑布一样,是一条线一条线的。
说明:使用tableView不能实现瀑布流式的布局,因为tableView是以行为单位的,它要求每行(cell)的高度在内部是一致的。
本系列文章介绍了如何自定义一个瀑布流控件来展示商品信息,本文介绍自定义瀑布流的接口设计。
 
3.自定义瀑布流控件的实现思路
  参考UITbaleView控件的设计。
  bubuko.com,布布扣
(1)设置数据源(强制的,可选的)
1)告诉有多少个数据(cell)
2)每一个索引对应的cell
3)告诉显示多少列
(2)设置代理
代理方法都是可选的。
1)设置第index位置对应的高度
2)监听选中了第index的cell(控件)
3)设计返回的间距那么
 
二、自定义瀑布流控件(接口设计
1.新建一个项目
  bubuko.com,布布扣
2.新建一个类,继承自UIScrollView,自己写一个瀑布流控件。
  bubuko.com,布布扣
  bubuko.com,布布扣
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 @required
30 /**
31  * (1)一共有多少个数据
32  */
33 -(NSUInteger)numberOfCellsInWaterflowView:(YYWaterflowView *)waterflowView;
34 /**
35  *  (2)返回index位置对应的cell
36  */
37 -(YYWaterflowViewCell *)waterflowView:(YYWaterflowView *)waterflowView cellAtIndex:(NSUInteger)index;
38 
39 //不要求强制实现
40 @optional
41 /**
42  *  (3)一共有多少列
43  */
44 -(NSUInteger)numberOfColumnsInWaterflowView:(YYWaterflowView *)waterflowView;
45 
46 @end
47 
48 
49 /**
50  *  2.代理方法
51  */
52 @protocol YYWaterflowViewDelegate <UIScrollViewDelegate>
53 //不要求强制实现
54 @optional
55 /**
56  *  (1)第index位置cell对应的高度
57  */
58 -(CGFloat)waterflowView:(YYWaterflowView *)waterflowView heightAtIndex:(NSUInteger)index;
59 /**
60  *  (2)选中第index位置的cell
61  */
62 -(void)waterflowView:(YYWaterflowView *)waterflowView didSelectAtIndex:(NSUInteger)index;
63 /**
64  *  (3)返回间距
65  */
66 -(CGFloat)waterflowView:(YYWaterflowView *)waterflowView marginForType:(YYWaterflowViewMarginType)type;
67 @end
68 
69 
70 /**
71  *  3.瀑布流控件
72  */
73 @interface YYWaterflowView : UIScrollView
74 /**
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 @end
16 
17 @implementation YYViewController
18 
19 - (void)viewDidLoad
20 {
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 *)waterflowView
31 {
32     return 100;
33 }
34 -(NSUInteger)numberOfColumnsInWaterflowView:(YYWaterflowView *)waterflowView
35 {
36     return 3;
37 }
38 -(YYWaterflowViewCell *)waterflowView:(YYWaterflowView *)waterflowView cellAtIndex:(NSUInteger)index
39 {
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)index
49 {
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)type
58 {
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)index
71 {
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_0
10 #warning "This project uses features only available in iOS SDK 5.0 and later."
11 #endif
12 
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

 

iOS开发UI篇—自定义瀑布流控件(接口设计),布布扣,bubuko.com

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

标签:style   blog   http   color   使用   os   strong   文件   

原文地址:http://www.cnblogs.com/wendingding/p/3873937.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!