iOS界面布局之四——使用第三方库Masonry进行autolayout布局(一)

简介: iOS界面布局之四——使用第三方库Masonry进行autolayout布局

iOS界面布局之四——使用第三方库Masonry进行autolayout布局


一、引言


       在前面博客,我们讨论了使用iOS原生的框架代码来进行autolayout布局。在使用中,我们会发现,无论是代码量还是结构的清晰度,都十分不能让我们满意,在storyBoard中只需要几条线就可以搞定的事情,用代码缺要写冗余的一大堆。并且有些时候,故事版并不能解决所有问题,某些控件必须我们手写,这样的话,我们就不得不进行代码的autolayout布局,幸运的是,Masonry可以帮助我们轻松愉快的完成这一任务。


使用代码进行autolayout布局:http://my.oschina.net/u/2340880/blog


二、使用Masonry

       这里说的大部分内容均来自Masonry和官方gitHub,将其内容进行了翻译和解释,源地址如下:https://github.com/SnapKit/Masonry


1、布局的控件属性对照


       无论是用storyBoard还是代码,在设置控件之间layout关系的时候,我们都需要设置控件的位置属性。在下面的方法中,这个位置属性就是NSLayoutAttribute对象,他决定的控件对象的参照位置:


+(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1

                                           relatedBy:(NSLayoutRelation)relation

                                           toItem:(nullable id)view2

                                           attribute:(NSLayoutAttribute)attr2

                                           multiplier:(CGFloat)multiplier constant:(CGFloat)c;

在Masonry中,有一系列的属性与之成对应关系,对照如下:


image.png


2、3个方法让你玩转Masonry约束操作


       Masonry在UIView的类别中,有3个全局的操作约束的方法,通过他们我们可以自由的进行autolayout的设置。


添加约束:


- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block;

这个方法用于我们在最开始时为控件设置的约束,在block中进行约束条件的设置,例如我们创建一个label,将其尺寸设置为50*50,放在屏幕中间,使用如下代码:


注意:在添加约束前,必须将视图添加到其父视图上。


- (void)viewDidLoad {

   [super viewDidLoad];

   // Do any additional setup after loading the view, typically from a nib.

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

   [self.view addSubview:label];

   [label mas_makeConstraints:^(MASConstraintMaker *make) {

       make.center.equalTo(self.view);

       make.height.equalTo(@50);

       make.width.equalTo(@50);

   }];

   label.backgroundColor = [UIColor redColor];

}

效果如下:


image.png


更新约束:


当我们需要配合布局改变或者动画效果的时候,我们可能需要将已经添加的约束进行更新操作,使用如下的方法:


[label mas_updateConstraints:^(MASConstraintMaker *make) {

       make.height.equalTo(@100);

       make.width.equalTo(@100);

   }];

更新约束的作用在于更新已经添加的某些约束,并不会移除掉原有的约束,如果我们需要添加新的约束,可以使用下面的重设约束的方法。


重设约束:


[label mas_remakeConstraints:^(MASConstraintMaker *make) {

       make.left.equalTo(self.view.mas_left).offset(10);

       make.top.equalTo(self.view.mas_top).offset(100);

       make.height.equalTo(@100);

       make.width.equalTo(@100);

   }];

3、约束值相关


       在添加具体约束的时候,我们不仅可以将约束值设置为绝对的相等关系,也可以设置一些值域的关系,在Masonry中,有如下三种:


//绝对相等

- (MASConstraint * (^)(id attr))equalTo;

//大于等于

- (MASConstraint * (^)(id attr))greaterThanOrEqualTo;

//小于等于

- (MASConstraint * (^)(id attr))lessThanOrEqualTo;

对于约束的优先级,使用如下几个量:


//手动设置一个优先级参数

- (MASConstraint * (^)(MASLayoutPriority priority))priority;

//优先级低

- (MASConstraint * (^)())priorityLow;

//优先级中等

- (MASConstraint * (^)())priorityMedium;

//优先级高

- (MASConstraint * (^)())priorityHigh;

写法如下:


[label mas_remakeConstraints:^(MASConstraintMaker *make) {

       make.left.equalTo(self.view.mas_left).offset(10);

       make.top.equalTo(self.view.mas_top).offset(100);

       make.height.equalTo(@100).priority(1000);

       make.width.equalTo(@100).priorityHigh();

   }];

相关文章
Swift 与 UIKit 在 iOS 应用界面开发中的关键技术和实践方法
本文深入探讨了 Swift 与 UIKit 在 iOS 应用界面开发中的关键技术和实践方法。Swift 以其简洁、高效和类型安全的特点,结合 UIKit 丰富的组件和功能,为开发者提供了强大的工具。文章从 Swift 的语法优势、类型安全、编程模型以及与 UIKit 的集成,到 UIKit 的主要组件和功能,再到构建界面的实践技巧和实际案例分析,全面介绍了如何利用这些技术创建高质量的用户界面。
75 2
iOS页面布局:UIScrollView的布局问题
iOS页面布局:UIScrollView的布局问题
115 8
Xamarin.Forms:从零开始的快速入门指南——打造你的首个跨平台移动应用,轻松学会用C#和XAML构建iOS与Android通用界面的每一个步骤
【8月更文挑战第31天】Xamarin.Forms 是一个强大的框架,让开发者通过单一共享代码库构建跨平台移动应用,支持 iOS、Android 和 Windows。使用 C# 和 XAML,它简化了多平台开发流程并保持一致的用户体验。本指南通过创建一个简单的 “HelloXamarin” 应用演示了 Xamarin.Forms 的基本功能和工作原理。
156 0
探索iOS与Android开发的差异:从界面到性能
【6月更文挑战第10天】在移动应用开发的广阔天地中,iOS和Android两大平台各占山头,它们在设计理念、用户体验、性能优化等方面展现出独特的魅力。本文将深入探讨这两大系统在开发过程中的主要差异,从用户界面设计到性能调优,揭示各自背后的技术逻辑与创新策略,为开发者提供全面的视角和实用的开发指南。
iOS 用一个布局来解决嵌套问题—— UICollectionViewCompositionalLayout
iOS 用一个布局来解决嵌套问题—— UICollectionViewCompositionalLayout
iOS 用一个布局来解决嵌套问题—— UICollectionViewCompositionalLayout
【Swift 开发专栏】Swift 与 UIKit:构建 iOS 应用界面
【4月更文挑战第30天】本文探讨了Swift和UIKit在构建iOS应用界面的关键技术和实践方法。Swift的简洁语法、类型安全和高效编程模型,加上与UIKit的紧密集成,使开发者能便捷地创建用户界面。UIKit提供视图、控制器、布局、动画和事件处理等功能,支持灵活的界面设计。实践中,遵循设计原则,合理组织视图层次,运用布局和动画,以及实现响应式设计,能提升界面质量和用户体验。文章通过登录、列表和详情界面的实际案例展示了Swift与UIKit的结合应用。
373 1
iOS布局中的抗被拉伸、抗压缩优先级
iOS布局中的抗被拉伸、抗压缩优先级
803 0
IOS使用AutoLayout让UIScrollView自动计算ContentSize
IOS使用AutoLayout让UIScrollView自动计算ContentSize
229 0
IOS15上纯代码布局之导航控制器的导航条为透明的问题
IOS15上纯代码布局之导航控制器的导航条为透明的问题
246 0
IOS使用纯代码布局替换掉默认的storyboard
IOS使用纯代码布局替换掉默认的storyboard
123 0

热门文章

最新文章

  • 1
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    47
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    19
  • 3
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    59
  • 4
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
    32
  • 5
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
    13
  • 6
    iOS各个证书生成细节
    16
  • 7
    iOS7应用开发7:自定义视图、手势操作
    1
  • 8
    IOS小工具以及精彩的博客
    507
  • 9
    iOS - Swift NSPoint 位置
    1
  • 10
    iOS开发-UIScrollView原理
    655
  • 1
    iOS各个证书生成细节
    16
  • 2
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    59
  • 3
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
    32
  • 4
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    47
  • 5
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    40
  • 6
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
    32
  • 7
    uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
    147
  • 8
    【05】2025年1月首发完整版-篇幅较长-苹果app如何上架到app store完整流程·不借助第三方上架工具的情况下无需花钱但需仔细学习-优雅草央千澈详解关于APP签名以及分发-们最关心的一篇来了-IOS上架app
    279
  • 9
    app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
    99
  • 10
    深入探索iOS开发中的SwiftUI框架
    149
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等