Masonry scrollview循环布局

前言

说到iOS自动布局,有很多的解决办法。有的人使用xib/storyboard自动布局,也有人使用frame来适配。对于前者,笔者并不喜欢,也不支持。对于后者,更是麻烦,到处计算高度、宽度等,千万大量代码的冗余,对维护和开发的效率都很低。

笔者在这里介绍纯代码自动布局的第三方库:Masonry。这个库使用率相当高,在全世界都有大量的开发者在使用,其star数量也是相当高的。

效果图

本节详解Masonry的循环创建视图的基本用法,先看看效果图:

核心代码

看下代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

@interface ScrollViewController ()

@property (nonatomic, strong) UIScrollView *scrollView;

@end

@implementation ScrollViewController

- (void)viewDidLoad {

[super viewDidLoad];

self.scrollView = [[UIScrollView alloc] init];

self.scrollView.pagingEnabled = NO;

[self.view addSubview:self.scrollView];

self.scrollView.backgroundColor = [UIColor lightGrayColor];

CGFloat screenWidth = [UIScreen mainScreen].bounds.size.width;

UILabel *lastLabel = nil;

for (NSUInteger i = 0; i < 20; ++i) {

UILabel *label = [[UILabel alloc] init];

label.numberOfLines = 0;

label.layer.borderColor = [UIColor greenColor].CGColor;

label.layer.borderWidth = 2.0;

label.text = [self randomText];

// We must preferredMaxLayoutWidth property for adapting to iOS6.0

label.preferredMaxLayoutWidth = screenWidth - 30;

label.textAlignment = NSTextAlignmentLeft;

label.textColor = [self randomColor];

[self.scrollView addSubview:label];

[label mas_makeConstraints:^(MASConstraintMaker *make) {

make.left.mas_equalTo(15);

make.right.mas_equalTo(self.view).offset(-15);

if (lastLabel) {

make.top.mas_equalTo(lastLabel.mas_bottom).offset(20);

} else {

make.top.mas_equalTo(self.scrollView).offset(20);

}

}];

lastLabel = label;

}

[self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {

make.edges.mas_equalTo(self.view);

// 让scrollview的contentSize随着内容的增多而变化

make.bottom.mas_equalTo(lastLabel.mas_bottom).offset(20);

}];

}

- (UIColor *)randomColor {

CGFloat hue = ( arc4random() % 256 / 256.0 );  //  0.0 to 1.0

CGFloat saturation = ( arc4random() % 128 / 256.0 ) + 0.5;  //  0.5 to 1.0, away from white

CGFloat brightness = ( arc4random() % 128 / 256.0 ) + 0.5;  //  0.5 to 1.0, away from black

return [UIColor colorWithHue:hue saturation:saturation brightness:brightness alpha:1];

}

- (NSString *)randomText {

CGFloat length = arc4random() % 50 + 5;

NSMutableString *str = [[NSMutableString alloc] init];

for (NSUInteger i = 0; i < length; ++i) {

[str appendString:@"测试数据很长,"];

}

return str;

}

@end

讲解

对于循环创建,我们需要记录下一个视图所依赖的控件,这里使用了lastLabel来记录。

我们要想让scrollviewcontentSize随内容的变化而变化,那么就我们一定要添加注意添加约束:

1

2

3

4

5

6

7

8

[self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {

make.edges.mas_equalTo(self.view);

// 让scrollview的contentSize随着内容的增多而变化

make.bottom.mas_equalTo(lastLabel.mas_bottom).offset(20);

}];

对于scrollviewtableview,我们不能使用bottom来计算其高,因为这个属性对于scrollviewtableview来说,不用用来计算高度的,而是用于计算contentSize.height的。我们要想随内容而变化,以便可滚动查看,就必须设置bottom约束。

时间: 2024-08-15 03:47:41

Masonry scrollview循环布局的相关文章

封装scrollView 循环滚动,tableViewCell(连载) mvc

封装 封装 封装 ... 封装的重要性太重要了 给大家在送点干货 从一个项目中抽取出来的,和大家一起分享 封装scrollView 循环滚动,tableViewCell(连载) 明天还会更新 tableView 的封装 使用了mvc 设计模式 代码如下: // // GPMainController.m #import "GPMainController.h" #import "GPAdsView.h" #import "GPSubViewCell.h&q

使用Masonry搭建特殊布局时与xib的对比

之前只有比较浅的接触过Masonry.项目中大多数的布局还是用xib中的AutoLayout与手码的frame计算相结合,相信也会有很多项目和我一样是这两种布局的组合.其实xib各方面用的感觉都挺好,以前是性能问题,冲突问题饱受人诟病,但随着苹果的更新换代这些问题也逐渐趋向最小化. 我们团队整改的主要原因是为了更细粒度的组件化.因为将一块代码复用到另一个页面远比从xib中拖几个控件到别的页面来的要快,并且使用Masonry写出来的代码在控件间关系上非常清晰便于理解. 普通的布局就略过不说了,这里

ScrollView循环滚动图片

涉及到banner页或者相册浏览,考虑到性能问题和用户体验性,经常要用到ScrollView循环滚动图片,在此只分析banner页,相册浏览类似: 设计思想: UIScrollView添加三个ImageView:firstImgView,secondImgView,thirdImgView. 当前每次显示的都是secondImgView,firstImgView显示前一张图片,thirdImgView显示后一张图片,若secondImgView显示的是第一张图片,则firstImgView显示最

iOS scrollview循环播放加缩放

前些日子一直在研究3d的框架没有时间写博客,不过最后需求改了,也没研究出个啥.这段时间出了新的需求,需要循环播放图片,并且滑动的时候中间的图片有缩放的效果.刚开始想在网上搜索,不过并没有找到合适的demo,没办法只能写个了. 首先说下思路,做这个效果需要解决三个问题. 第一个问题,如何控制每次滑动的距离.iOS中好像并没有设置scrollview每次滑动的距离吧.设置其画框的大小和pageenable的时候已经决定了其每次滑动的距离.但是需求要显示三张图片啊,中间大图,两边的图片只显示一部分.也

android(9) ListView + ScrollView + ViewPager布局

一.ListView + ScrollView + ViewPager界面实现: 看了别人的源码总要总结一下,ListView与ScrollView两者之间是有冲突的,但有的时候,又不得不两者一块使用.主要就是ListView中item高度不确定,只要写死或先算出所有的item的高度和就能显示出你所需要的效果了. 效果图: 主界面: public class MainActivity extends Activity { // viewPager private MyPageAdapter vi

97、进入ScrollView根布局页面,直接跳到页面底部,不能显示顶部内容

API使用:http://www.cnblogs.com/over140/archive/2011/01/27/1945964.html 以ScrollView为根的部局,不能从顶部显示其包含的页面内容:下面是我哦的解决方案. mScrollView.smoothScrollTo(0, 0); mScrollView.scrollTo(0, 0); 但是经过我的测试使用,是不可以的.现有一个方法能解决:使用该布局最顶部的ScrollView中最顶部的那个控件View.layout都行,让后使用这

React Native scrollview 循环播放

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Menlo; color: #008400 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 18.0px; font: 12.0px Menlo; color: #d4d4d4; min-height: 14.0px } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px He

封装scrollView 循环滚动

今天给大家送点干货:封装的简单实用及介绍,希望大家共同学习共同进步 封装在变成过程中非常重要,可以提高代码的复用性,可以高效的完成项目,并且可以对外部提供接口 大家可以看一下 封装之前 和封装之后 viewDidLoad 中的代码量 ,未封装之前 基本上所有的代码都写在了控制器内,十分的麻烦 封装之后 有少量的代码就可以完成特定的功能! 封装之前: // // QHMainController.m #import "QHMainController.h" #import "G

scrollView循环播放器(一)

/** *  设置scrollView */ - (void)setUpScrollView:(NSArray *)array { UIScrollView *scrollView = [[UIScrollView alloc]initWithFrame:self.bounds]; scrollView.delegate = self; scrollView.pagingEnabled = YES; scrollView.showsHorizontalScrollIndicator = NO;