文档章节

iOS-Masonry布局UIScrollView

麦兜卖鱼丸
 麦兜卖鱼丸
发布于 2016/03/15 00:38
字数 609
阅读 1.2K
收藏 1

行业解决方案、产品招募中!想赚钱就来传!>>>

前言

IOS自动布局有sb、xib自适应或者是纯代码编写frame布局,前者本人不太喜欢,后者计算太多也是比较繁琐,masonry这个第三方库,其实是封装了autolayout的约束,易于我们使用纯代码编写自适应布局。

 

(一)下面的这个例子是一个绑定手机号成功的页面布局;

#import "BindSuccessViewController.h"
#import <Masonry.h>
#define SCREEN_WIDTH CGRectGetWidth([UIScreen mainScreen].bounds)

@interface BindSuccessViewController () {
    UIImageView *imageView;
    UILabel *alertlabel;
    UIImageView *hfImageView;
    UIButton *sureButton;
    UIButton *cancelButton;
    
    UIScrollView *scrollView;
    UIView *layoutView;
}
@end

@implementation BindSuccessViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.navigationItem.title = @"修改手机号";
    self.view.backgroundColor = [UIColor whiteColor];
    self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"back"] style:UIBarButtonItemStylePlain target:self action:@selector(clickCancelButton)];
    
    [self initView];
    [self configView];
}

- (void)initView {
    
    scrollView = [UIScrollView new];
    scrollView.bounces = NO;
    scrollView.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:scrollView];
    
    layoutView = [UIView new];
    layoutView.backgroundColor = [UIColor whiteColor];
    [scrollView addSubview:layoutView];
    
    
    imageView = [UIImageView new];
    imageView.image = [UIImage imageNamed:@"success"];
    [layoutView addSubview:imageView];
    
    alertlabel = [UILabel new];
    alertlabel.preferredMaxLayoutWidth = SCREEN_WIDTH - 30;
    alertlabel.numberOfLines = 0;
    alertlabel.text = @"您已经成功的修改手机号!";
    alertlabel.font = [UIFont systemFontOfSize:14.0f];
    alertlabel.textAlignment = NSTextAlignmentCenter;
    [layoutView addSubview:alertlabel];
    
    hfImageView = [UIImageView new];
    hfImageView.image = [UIImage imageNamed:@"setting-hf"];
    [layoutView addSubview:hfImageView];
    
    sureButton = [UIButton buttonWithType:UIButtonTypeCustom];
    sureButton.backgroundColor = [UIColor colorWithRed:0 green:160.0f/255 blue:223.0f/255 alpha:1.0f];
    [sureButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    [sureButton setTitle:@"确定" forState:UIControlStateNormal];
    [sureButton addTarget:self action:@selector(clickSureButton) forControlEvents:UIControlEventTouchUpInside];
    [layoutView addSubview:sureButton];
    
    cancelButton = [UIButton buttonWithType:UIButtonTypeCustom];
    cancelButton.layer.borderWidth = 1.0f;
    cancelButton.layer.borderColor = [UIColor colorWithRed:0 green:160.0f/255 blue:223.0f/255 alpha:1.0f].CGColor;
    [cancelButton setTitle:@"取消" forState:UIControlStateNormal];
    [cancelButton setTitleColor:[UIColor colorWithRed:0 green:160.0f/255 blue:223.0f/255 alpha:1.0f] forState:UIControlStateNormal];
    [cancelButton addTarget:self action:@selector(clickCancelButton) forControlEvents:UIControlEventTouchUpInside];
    [layoutView addSubview:cancelButton];
}

- (void)configView {
    
    [scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.edges.equalTo(self.view);
    }];
    
    
    [layoutView mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.left.top.mas_equalTo(0);
        make.width.mas_equalTo(self.view);
        make.bottom.equalTo(cancelButton.mas_bottom).offset(20);
    }];
    
    [imageView mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.top.equalTo(layoutView).offset(20);
        make.centerX.equalTo(scrollView);
        make.width.mas_equalTo(@60);
        make.height.mas_equalTo(@60);
    }];
    
    [alertlabel mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.top.equalTo(imageView.mas_bottom).offset(15);
        make.left.equalTo(layoutView).offset(15);
        make.right.equalTo(layoutView).offset(-15);
    }];
    
    [hfImageView mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.top.equalTo(alertlabel.mas_bottom).offset(30);
        make.centerX.equalTo(scrollView);
        make.width.mas_equalTo(@277);
        make.height.mas_equalTo(@165);
    }];
    
    [sureButton mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.top.equalTo(hfImageView.mas_bottom).offset(20);
        make.left.equalTo(layoutView).offset(15);
        make.right.equalTo(layoutView).offset(-15);
        make.height.mas_equalTo(@40);
    }];
    
    [cancelButton mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.top.equalTo(sureButton.mas_bottom).offset(20);
        make.left.equalTo(sureButton);
        make.right.equalTo(sureButton);
        make.height.mas_equalTo(@40);
    }];
    
    [scrollView mas_updateConstraints:^(MASConstraintMaker *make) {
        
        make.bottom.mas_equalTo(layoutView.mas_bottom).priorityLow();
        make.bottom.mas_greaterThanOrEqualTo(self.view);
    }];
}

- (void)clickSureButton
{
    
}
- (void)clickCancelButton
{
    [self.navigationController popToRootViewControllerAnimated:YES];
}
@end

解释一下一段,使得cancelButton始终会离底部有一段距离,[scrollView mas_updateConstraints:^(MASConstraintMaker *make) {
        make.bottom.mas_equalTo(layoutView.mas_bottom).priorityLow();
        make.bottom.mas_greaterThanOrEqualTo(self.view);
    }]; 这段约束的意思是,先设置了scrollview的bottom等于layoutView的底部+20,但是它的优先级最低,然后又设置了scrollview的bottom大于或等于self.view,也就是说scrollview的contentSize.height至少等于屏幕高度。

 

总结

uiscrollview是一个比较特殊的视图,使用自适应布局的话contentsize的大小取决于subviews,所以在布局时要特别的注意,不然会出现约束冲突。网络上看到一个布局原则:整体frame布局,局部masonry自适应布局。

下一篇: 自定义tabBar
麦兜卖鱼丸
粉丝 12
博文 69
码字总数 69333
作品 0
桂林
iOS工程师
私信 提问
加载中
请先登录后再评论。
浅入浅出Android(003):使用TextView类构造文本控件

基础: TextView是无法供编辑的。 当我们新建一个项目MyTextView时候,默认的布局(/res/layout/activity_main.xml)中已经有了一个TextView: <TextView 运行效果如下: 修改其文本内容...

樂天
2014/03/22
619
1
程序猿媛一:Android滑动翻页+区域点击事件

滑动翻页+区域点击事件 ViewPager+GrideView 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。文尾附注源码获取途径。 转载请保留原文出处“http://my.oschina.net/gluoyer...

花佟林雨月
2013/11/09
4.2K
1
iOS 应用版本更新检查--Harpy

实现 app 版本检查功能。用户打开app之后,进行app的版本更新检查。如果检查到 appstore 上有当前qpp的新版本,则弹出对话框提醒用户下载。可以设置让用户选择下载或者强制用户下载。 [Code4...

匿名
2013/02/18
1.7K
0
跨平台手机应用开发--Gideros

Gideros 可以让你轻松快速创建 iOS 和 Android 应用,提供用户友好的集成开发环境,内建模拟器对应用进行不同屏幕大小、分辨率下的测试,最大的优点是可即时修改代码即时进行测试,无需编译安...

匿名
2013/02/19
2.7K
0
RESwitch

RESwitch 是 UISwitch 的开源替代品,可使用 UIAppearance 协议进行定制。 要求: Xcode 4.5 or higher Apple LLVM compiler iOS 5.0 or higher ARC...

匿名
2013/02/19
584
0

没有更多内容

加载失败,请刷新页面

加载更多

什么是移动语义? - What is move semantics?

问题: I just finished listening to the Software Engineering radio podcast interview with Scott Meyers regarding C++0x . 我刚刚结束了对Scott Meyers进行的有关C ++ 0x的Software En......

技术盛宴
今天
24
0
算法与数据结构体系课

算法与数据结构体系课【超清原画】 下载地址:百度云盘 从0到工作5年,面试、进大厂、搭建知识体系、拓展技术上限 你不再需要其它算法与数据结构课程了 为什么学算法已经是一个不应该问的问题...

1930133570
今天
21
0
如何停止跟踪并忽略对Git中文件的更改? - How to stop tracking and ignore changes to a file in Git?

问题: I have cloned a project that includes some .csproj files. 我已经克隆了一个包含一些.csproj文件的项目。 I don't need/like my local csproj files being tracked by Git (or bei......

富含淀粉
今天
25
0
Redis阻塞

可能存在问题 内在原因:API或数据结构使用不合理、CPU饱和、持久化阻塞等 外在原因:CPU竞争、内存交换、网络问题等 问题处理: API或数据结构使用不合理,可能存在慢查询或者大对象: 发现...

游泳鸟
今天
17
0
OSChina 周五乱弹 —— 来人,上幼儿园老师跳舞的图!

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 小小编辑:《奇跡の海》- 坂本真綾 《奇跡の海》- 坂本真綾 手机党少年们想听歌,请使劲儿戳(这里) 巴蜀(@巴拉迪维)最近有点闹心了, @巴...

小小编辑
今天
64
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部