码迷,mamicode.com
首页 > 其他好文 > 详细

Masonry自动布局与UIScrolView适配

时间:2016-09-01 18:07:43      阅读:281      评论:0      收藏:0      [点我收藏+]

标签:

Masonry介绍

Masonry是一个轻量级的布局框架 拥有自己的描述语法 采用更优雅的链式语法封装自动布局 简洁明了 并具有高可读性 而且同时支持 iOS 和 Max OS X。可以通过cocoapods将其导入。

Masonry使用

Masonry属性及其说明

//左侧

//@property (nonatomic, strong, readonly) MASViewAttribute *mas_left;

//上侧

//@property (nonatomic, strong, readonly) MASViewAttribute *mas_top;

//右侧

//@property (nonatomic, strong, readonly) MASViewAttribute *mas_right;

//下侧

//@property (nonatomic, strong, readonly) MASViewAttribute *mas_bottom;

//首部

//@property (nonatomic, strong, readonly) MASViewAttribute *mas_leading;

//尾部

//@property (nonatomic, strong, readonly) MASViewAttribute *mas_trailing;

//宽度

//@property (nonatomic, strong, readonly) MASViewAttribute *mas_width;

//高度

//@property (nonatomic, strong, readonly) MASViewAttribute *mas_height;

//横向中点

//@property (nonatomic, strong, readonly) MASViewAttribute *mas_centerX;

//纵向中点

//@property (nonatomic, strong, readonly) MASViewAttribute *mas_centerY;

//文本基线

//@property (nonatomic, strong, readonly) MASViewAttribute *mas_baseline;

其中leading与left trailing与right 在正常情况下是等价的 但是当一些布局是从右至左时(比如阿拉伯文?没有类似的经验) 则会对调 换句话说就是基本可以不理不用 用left和right就好了

  • 首先介绍下UIScrollView的frame与contentsize的区别

技术分享

 

  • 重要说明

(1)UIScrollView的frame与contentsize属性的区分:UIScrollView的frame指的是这个scrollview的可视范围(可看见的区域),contentsize是其滚动范围。

(2)contentinset(不带*号的一般不是结构体就是枚举),为UIScrollView增加额外的滚动区域。(上,左,下,右)逆时针。contentinset可以使用代码或者是视图控制器进行设置,但两者有区别(注意区分)。

(3)contentsize属性只能使用代码设置。

(4)contentoffset是个CGpoint类型的结构体,用来记录ScrollView的滚动位置,即记录着“框”跑到了哪里。知道了这个属性,就知道了其位置,可以通过设置这个属性来控制这个“框”的移动。

(5)不允许直接修改某个对象内部结构体属性的成员,三个步骤(先拿到值,修改之,再把修改后的值赋回去)。

(6)增加了额外区域后,contentoffset的原点在哪里?

  • 有助于理解的几个截图

模型图:

技术分享

对比图:

技术分享

坐标图:

技术分享

MasonryUIScrollView的自动布局:

  • 首先确定UIScrollView的位置:相当于确定UIScrollView的frame

 

 //UIScrollView滑动界面
    [self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(self.view);
        make.left.equalTo(self.view).offset(0);
        make.right.equalTo(self.view).offset(0);
        make.bottom.mas_equalTo(self.view.mas_bottom).offset(-60);

    }];
  • 适配界面1,使界面1的top,left,heightwidth与scrollview对齐,其中在Masonry适配中top,可以与bottom或则height确定View的竖直方位,同理Left可以与right或则width确定水平位置的方位
//1界面适配
    [self.accountElectricChargeView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(@0);
        make.left.mas_equalTo(self.scrollView.mas_left);
        make.height.mas_equalTo(self.scrollView.mas_height);
        make.width.mas_equalTo(self.scrollView.mas_width);
    }];
  • 适配界面2:因为是适配水平位置,所以top仍然与scrollView的对齐,left与第一个界面的right对齐,bottom与scrollView或则第一个界面对齐
 //2界面适配
    [self.accountPeakElectricView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(@0);
        make.left.mas_equalTo(self.accountElectricChargeView.mas_right);
     make.bottom.mas_equalTo(self.scrollView);
  •      make.width.mas_equalTo(self.accountElectricChargeView.mas_width); }];
  • 适配界面3:与界面2同理
 //3界面适配
    [self.accountElectricFactorView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(@0);
        make.left.mas_equalTo(self.accountPeakElectricView.mas_right);
        make.bottom.mas_equalTo(self.scrollView);
        make.width.mas_equalTo(self.accountElectricChargeView.mas_width);
    }];
  • 最后,使scrollview的right与第三个界面(即最后一个界面)的right对齐。
[self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.right.mas_equalTo(self.accountElectricFactorView.mas_right);
    }];

Masonry自动布局与UIScrolView适配

标签:

原文地址:http://www.cnblogs.com/luerniu/p/5830560.html

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