|
| 1 | +// |
| 2 | +// FLLTest5ViewController.m |
| 3 | +// MyLayout |
| 4 | +// |
| 5 | +// Created by oybq on 15/10/31. |
| 6 | +// Copyright (c) 2015年 YoungSoft. All rights reserved. |
| 7 | +// |
| 8 | + |
| 9 | +#import "FLLTest5ViewController.h" |
| 10 | +#import "MyLayout.h" |
| 11 | +#import "CFTool.h" |
| 12 | + |
| 13 | +@interface FLLTest5ViewController () |
| 14 | + |
| 15 | + |
| 16 | +@end |
| 17 | + |
| 18 | +@implementation FLLTest5ViewController |
| 19 | + |
| 20 | + |
| 21 | +-(void)loadView |
| 22 | +{ |
| 23 | + /* |
| 24 | + 这个例子主要是用来展示数量约束流式布局对分页滚动能力的支持。 |
| 25 | + */ |
| 26 | + UIScrollView *scrollView = [UIScrollView new]; |
| 27 | + scrollView.delaysContentTouches = NO; //因为里面也有滚动视图，优先处理子滚动视图的事件。 |
| 28 | + self.view = scrollView; |
| 29 | + |
| 30 | + MyLinearLayout *rootLayout = [MyLinearLayout linearLayoutWithOrientation:MyLayoutViewOrientation_Vert]; |
| 31 | + rootLayout.backgroundColor = [UIColor whiteColor]; |
| 32 | + rootLayout.myLeftMargin = rootLayout.myRightMargin = 0; //宽度和滚动视图保持一致。 |
| 33 | + rootLayout.gravity = MyMarginGravity_Horz_Fill; //里面的所有子视图和布局视图宽度一致。 |
| 34 | + [scrollView addSubview:rootLayout]; |
| 35 | + |
| 36 | + |
| 37 | + //创建一个水平数量流式布局分页从左到右滚动 |
| 38 | + [self createHorzPagingFlowLayout1:rootLayout]; |
| 39 | + |
| 40 | + //创建一个水平数量流式布局分页从上到下滚动的流式布局。 |
| 41 | + [self createHorzPagingFlowLayout2:rootLayout]; |
| 42 | + |
| 43 | + //创建一个垂直数量流式布局分页从上到下滚动 |
| 44 | + [self createVertPagingFlowLayout1:rootLayout]; |
| 45 | + |
| 46 | + //创建一个垂直数量流式布局分页从左到右滚动 |
| 47 | + [self createVertPagingFlowLayout2:rootLayout]; |
| 48 | + |
| 49 | + |
| 50 | + |
| 51 | + |
| 52 | + |
| 53 | +} |
| 54 | + |
| 55 | +- (void)viewDidLoad { |
| 56 | + [super viewDidLoad]; |
| 57 | + // Do any additional setup after loading the view. |
| 58 | + |
| 59 | +} |
| 60 | + |
| 61 | + |
| 62 | +- (void)didReceiveMemoryWarning { |
| 63 | + [super didReceiveMemoryWarning]; |
| 64 | + // Dispose of any resources that can be recreated. |
| 65 | +} |
| 66 | + |
| 67 | +#pragma mark -- Layout Construction |
| 68 | + |
| 69 | +//添加所有测试子条目视图。 |
| 70 | +-(void)addAllItemSubviews:(MyFlowLayout*)flowLayout |
| 71 | +{ |
| 72 | + |
| 73 | + for (int i = 0; i < 40; i++) |
| 74 | + { |
| 75 | + UILabel *label = [UILabel new]; |
| 76 | + label.textAlignment = NSTextAlignmentCenter; |
| 77 | + label.backgroundColor = [CFTool color:random() % 14 + 1]; |
| 78 | + label.text = [NSString stringWithFormat:@"%d",i]; |
| 79 | + [flowLayout addSubview:label]; |
| 80 | + |
| 81 | + } |
| 82 | + |
| 83 | + |
| 84 | +} |
| 85 | + |
| 86 | + |
| 87 | +/** |
| 88 | + * 创建一个水平分页从左向右滚动的流式布局 |
| 89 | + */ |
| 90 | +-(void)createHorzPagingFlowLayout1:(UIView*)rootLayout |
| 91 | +{ |
| 92 | + UILabel *titleLabel = [UILabel new]; |
| 93 | + titleLabel.text = @"水平流式布局分页从左往右滚动:➡︎"; |
| 94 | + [titleLabel sizeToFit]; |
| 95 | + [rootLayout addSubview:titleLabel]; |
| 96 | + titleLabel.myTopMargin = 20; |
| 97 | + |
| 98 | + //要开启分页功能，必须要将流式布局加入到一个滚动视图里面作为子视图！！！ |
| 99 | + UIScrollView *scrollView = [UIScrollView new]; |
| 100 | + scrollView.pagingEnabled = YES; //开启分页滚动模式！！您可以注释这句话看看非分页滚动的布局滚动效果。 |
| 101 | + scrollView.myHeight = 200; //设置明确的高度为200，因为宽度已经由父线性布局的gravity属性确定了，所以不需要设置了。 |
| 102 | + [rootLayout addSubview:scrollView]; |
| 103 | + |
| 104 | + |
| 105 | + //建立一个水平数量约束流式布局:每列展示3个子视图,每页展示9个子视图，整体从左往右滚动。 |
| 106 | + MyFlowLayout *flowLayout = [MyFlowLayout flowLayoutWithOrientation:MyLayoutViewOrientation_Horz arrangedCount:3]; |
| 107 | + flowLayout.pagedCount = 9; //pagedCount设置为非0时表示开始分页展示的功能，这里表示每页展示9个子视图，这个数量必须是arrangedCount的倍数。 |
| 108 | + flowLayout.wrapContentWidth = YES; //设置布局视图的宽度由子视图包裹，当水平流式布局的这个属性设置为YES，并和pagedCount搭配使用会产生分页从左到右滚动的效果。 |
| 109 | + flowLayout.heightDime.equalTo(scrollView.heightDime); //因为是分页从左到右滚动，因此布局视图的高度必须设置为和父滚动视图相等。 |
| 110 | + /* |
| 111 | + 上面是实现一个水平流式布局分页且从左往右滚动的标准属性设置方法。 |
| 112 | + */ |
| 113 | + |
| 114 | + flowLayout.subviewHorzMargin = 10; |
| 115 | + flowLayout.subviewVertMargin = 10; //设置子视图的水平和垂直间距。 |
| 116 | + flowLayout.padding = UIEdgeInsetsMake(5, 5, 5, 5); //布局视图的内边距设置！您可以注释掉这句话看看效果！如果设置内边距且也有分页时请将这个值设置和子视图间距相等。 |
| 117 | + [scrollView addSubview:flowLayout]; |
| 118 | + flowLayout.backgroundColor = [CFTool color:0]; |
| 119 | + |
| 120 | + [self addAllItemSubviews:flowLayout]; |
| 121 | + |
| 122 | + //获取流式布局的横屏size classes，并且设置当设备处于横屏时每页的数量由9个变为了18个。您可以注释掉这段代码，然后横竖屏切换看看效果。 |
| 123 | + MyFlowLayout *flowLayoutSC = [flowLayout fetchLayoutSizeClass:MySizeClass_Landscape copyFrom:MySizeClass_wAny | MySizeClass_hAny]; |
| 124 | + flowLayoutSC.pagedCount = 18; |
| 125 | +} |
| 126 | + |
| 127 | +/** |
| 128 | + * 创建一个水平分页从上向下滚动的流式布局 |
| 129 | + */ |
| 130 | +-(void)createHorzPagingFlowLayout2:(UIView*)rootLayout |
| 131 | +{ |
| 132 | + UILabel *titleLabel = [UILabel new]; |
| 133 | + titleLabel.text = @"水平流式布局分页从上往下滚动:⬇︎"; |
| 134 | + [titleLabel sizeToFit]; |
| 135 | + [rootLayout addSubview:titleLabel]; |
| 136 | + titleLabel.myTopMargin = 20; |
| 137 | + |
| 138 | + //要开启分页功能，必须要将流式布局加入到一个滚动视图里面作为子视图！！！ |
| 139 | + UIScrollView *scrollView = [UIScrollView new]; |
| 140 | + scrollView.pagingEnabled = YES; //开启分页滚动模式！！您可以注释这句话看看非分页滚动的布局滚动效果。 |
| 141 | + scrollView.myHeight = 250; //设置明确的高度为250，因为宽度已经由父线性布局的gravity属性确定了，所以不需要设置了。 |
| 142 | + [rootLayout addSubview:scrollView]; |
| 143 | + |
| 144 | + |
| 145 | + //建立一个水平数量约束流式布局:每列展示3个子视图,每页展示9个子视图，整体从上往下滚动。 |
| 146 | + MyFlowLayout *flowLayout = [MyFlowLayout flowLayoutWithOrientation:MyLayoutViewOrientation_Horz arrangedCount:3]; |
| 147 | + flowLayout.pagedCount = 9; //pagedCount设置为非0时表示开始分页展示的功能，这里表示每页展示9个子视图，这个数量必须是arrangedCount的倍数。 |
| 148 | + flowLayout.wrapContentHeight = YES; //设置布局视图的高度由子视图包裹，当水平流式布局的这个属性设置为YES，并和pagedCount搭配使用会产生分页从上到下滚动的效果。 |
| 149 | + flowLayout.widthDime.equalTo(scrollView.widthDime); //因为是分页从左到右滚动，因此布局视图的宽度必须设置为和父滚动视图相等。 |
| 150 | + /* |
| 151 | + 上面是实现一个水平流式布局分页且从上往下滚动的标准属性设置方法。 |
| 152 | + */ |
| 153 | + |
| 154 | + flowLayout.subviewHorzMargin = 10; |
| 155 | + flowLayout.subviewVertMargin = 10; //设置子视图的水平和垂直间距。 |
| 156 | + flowLayout.padding = UIEdgeInsetsMake(5, 5, 5, 5); //布局视图的内边距设置！您可以注释掉这句话看看效果！如果设置内边距且也有分页时请将这个值设置和子视图间距相等。 |
| 157 | + [scrollView addSubview:flowLayout]; |
| 158 | + flowLayout.backgroundColor = [CFTool color:0]; |
| 159 | + |
| 160 | + [self addAllItemSubviews:flowLayout]; |
| 161 | + |
| 162 | + //获取流式布局的横屏size classes，并且设置设备处于横屏时每页的数量由9个变为18个。您可以注释掉这段代码，然后横竖屏切换看看效果。 |
| 163 | + MyFlowLayout *flowLayoutSC = [flowLayout fetchLayoutSizeClass:MySizeClass_Landscape copyFrom:MySizeClass_wAny | MySizeClass_hAny]; |
| 164 | + flowLayoutSC.pagedCount = 18; |
| 165 | + |
| 166 | +} |
| 167 | + |
| 168 | + |
| 169 | +/** |
| 170 | + * 创建一个垂直分页从上向下滚动的流式布局 |
| 171 | + */ |
| 172 | +-(void)createVertPagingFlowLayout1:(UIView*)rootLayout |
| 173 | +{ |
| 174 | + UILabel *titleLabel = [UILabel new]; |
| 175 | + titleLabel.text = @"垂直流式布局分页从上往下滚动:⬇︎"; |
| 176 | + [titleLabel sizeToFit]; |
| 177 | + [rootLayout addSubview:titleLabel]; |
| 178 | + titleLabel.myTopMargin = 20; |
| 179 | + |
| 180 | + //要开启分页功能，必须要将流式布局加入到一个滚动视图里面作为子视图！！！ |
| 181 | + UIScrollView *scrollView = [UIScrollView new]; |
| 182 | + scrollView.pagingEnabled = YES; //开启分页滚动模式！！您可以注释这句话看看非分页滚动的布局滚动效果。 |
| 183 | + scrollView.myHeight = 250; //设置明确的高度为250，因为宽度已经由父线性布局的gravity属性确定了，所以不需要设置了。 |
| 184 | + [rootLayout addSubview:scrollView]; |
| 185 | + |
| 186 | + //建立一个垂直数量约束流式布局:每列展示3个子视图,每页展示9个子视图，整体从上往下滚动。 |
| 187 | + MyFlowLayout *flowLayout = [MyFlowLayout flowLayoutWithOrientation:MyLayoutViewOrientation_Vert arrangedCount:3]; |
| 188 | + flowLayout.pagedCount = 9; //pagedCount设置为非0时表示开始分页展示的功能，这里表示每页展示9个子视图，这个数量必须是arrangedCount的倍数。 |
| 189 | + flowLayout.wrapContentHeight = YES; //设置布局视图的高度由子视图包裹，当垂直流式布局的这个属性设置为YES，并和pagedCount搭配使用会产生分页从上到下滚动的效果。 |
| 190 | + flowLayout.widthDime.equalTo(scrollView.widthDime); |
| 191 | + /* |
| 192 | + 上面是实现一个垂直流式布局分页且从上往下滚动的标准属性设置方法。 |
| 193 | + */ |
| 194 | + |
| 195 | + |
| 196 | + flowLayout.subviewHorzMargin = 10; |
| 197 | + flowLayout.subviewVertMargin = 10; //设置子视图的水平和垂直间距。 |
| 198 | + flowLayout.padding = UIEdgeInsetsMake(5, 5, 5, 5); //布局视图的内边距设置！您可以注释掉这句话看看效果！如果设置内边距且也有分页时请将这个值设置和子视图间距相等。 |
| 199 | + [scrollView addSubview:flowLayout]; |
| 200 | + flowLayout.backgroundColor = [CFTool color:0]; |
| 201 | + |
| 202 | + [self addAllItemSubviews:flowLayout]; |
| 203 | + |
| 204 | + //获取流式布局的横屏size classes，并且设置设备处于横屏时,每排数量由3个变为6个，每页的数量由9个变为18个。您可以注释掉这段代码，然后横竖屏切换看看效果。 |
| 205 | + MyFlowLayout *flowLayoutSC = [flowLayout fetchLayoutSizeClass:MySizeClass_Landscape copyFrom:MySizeClass_wAny | MySizeClass_hAny]; |
| 206 | + flowLayoutSC.arrangedCount = 6; |
| 207 | + flowLayoutSC.pagedCount = 18; |
| 208 | + |
| 209 | + |
| 210 | + |
| 211 | +} |
| 212 | + |
| 213 | +/** |
| 214 | + * 创建一个垂直分页从左向右滚动的流式布局 |
| 215 | + */ |
| 216 | +-(void)createVertPagingFlowLayout2:(UIView*)rootLayout |
| 217 | +{ |
| 218 | + UILabel *titleLabel = [UILabel new]; |
| 219 | + titleLabel.text = @"垂直流式布局分页从左往右滚动:➡︎"; |
| 220 | + [titleLabel sizeToFit]; |
| 221 | + [rootLayout addSubview:titleLabel]; |
| 222 | + titleLabel.myTopMargin = 20; |
| 223 | + |
| 224 | + //要开启分页功能，必须要将流式布局加入到一个滚动视图里面作为子视图！！！ |
| 225 | + UIScrollView *scrollView = [UIScrollView new]; |
| 226 | + scrollView.pagingEnabled = YES; //开启分页滚动模式！！您可以注释这句话看看非分页滚动的布局滚动效果。 |
| 227 | + scrollView.myHeight = 200; //设置明确的高度为200，因为宽度已经由父线性布局的gravity属性确定了，所以不需要设置了。 |
| 228 | + [rootLayout addSubview:scrollView]; |
| 229 | + |
| 230 | + //建立一个垂直数量约束流式布局:每列展示3个子视图,每页展示9个子视图，整体从左往右滚动。 |
| 231 | + MyFlowLayout *flowLayout = [MyFlowLayout flowLayoutWithOrientation:MyLayoutViewOrientation_Vert arrangedCount:3]; |
| 232 | + flowLayout.pagedCount = 9; //pagedCount设置为非0时表示开始分页展示的功能，这里表示每页展示9个子视图，这个数量必须是arrangedCount的倍数。 |
| 233 | + flowLayout.wrapContentWidth = YES; //设置布局视图的宽度由子视图包裹，当垂直流式布局的这个属性设置为YES，并和pagedCount搭配使用会产生分页从左到右滚动的效果。 |
| 234 | + flowLayout.heightDime.equalTo(scrollView.heightDime); |
| 235 | + /* |
| 236 | + 上面是实现一个垂直流式布局分页且从左往右滚动的标准属性设置方法。 |
| 237 | + */ |
| 238 | + |
| 239 | + |
| 240 | + flowLayout.subviewHorzMargin = 10; |
| 241 | + flowLayout.subviewVertMargin = 10; //设置子视图的水平和垂直间距。 |
| 242 | + flowLayout.padding = UIEdgeInsetsMake(5, 5, 5, 5); //布局视图的内边距设置！您可以注释掉这句话看看效果！如果设置内边距且也有分页时请将这个值设置和子视图间距相等。 |
| 243 | + [scrollView addSubview:flowLayout]; |
| 244 | + flowLayout.backgroundColor = [CFTool color:0]; |
| 245 | + |
| 246 | + [self addAllItemSubviews:flowLayout]; |
| 247 | + |
| 248 | + //获取流式布局的横屏size classes，并且设置设备处于横屏时,每排数量由3个变为6个，每页的数量由9个变为18个。您可以注释掉这段代码，然后横竖屏切换看看效果。 |
| 249 | + MyFlowLayout *flowLayoutSC = [flowLayout fetchLayoutSizeClass:MySizeClass_Landscape copyFrom:MySizeClass_wAny | MySizeClass_hAny]; |
| 250 | + flowLayoutSC.arrangedCount = 6; |
| 251 | + flowLayoutSC.pagedCount = 18; |
| 252 | + |
| 253 | +} |
| 254 | + |
| 255 | + |
| 256 | +#pragma mark -- Handle Method |
| 257 | + |
| 258 | +/* |
| 259 | +#pragma mark - Navigation |
| 260 | +
|
| 261 | +// In a storyboard-based application, you will often want to do a little preparation before navigation |
| 262 | +- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender { |
| 263 | + // Get the new view controller using [segue destinationViewController]. |
| 264 | + // Pass the selected object to the new view controller. |
| 265 | +} |
| 266 | +*/ |
| 267 | + |
| 268 | +@end |
0 commit comments