iOS界面布局之三——纯代码的autoLayout及布局动画(一)

简介: iOS界面布局之三——纯代码的autoLayout及布局动画

iOS界面布局之三——纯代码的autoLayout及布局动画


一、引言


       关于界面布局,apple的策略已经趋于成熟,autolayout的优势在开发中也已经展现的淋漓尽致。除了使用storyBoard进行布局约束的拖拽,有时我们也需要在代码中进行autolayout的布局设置,Masonry库可以方便的创建约束属性,实际上,我们也没有必要再使用系统原生的代码来创建和设置约束,这篇博客只作为使用的方法备忘。前几篇布局介绍的链接如下:


使用autoresizing进行界面布局:http://my.oschina.net/u/2340880/blog/423357


初识autolayout布局模型:http://my.oschina.net/u/2340880/blog/423500


二、了解一个类


       用代码来做视图间的相关约束,那么就一定要将“约束”也进行对象化,在iOS6之后,引入了autolayout这个概念,相应的也增加了NSLayoutConstraint这个对象,这个对象就是专门用来进行约束布局的设置对象。通过这个对象,我们可以设置类似视图对象之间的间距,约束的宽高,比例等属性。创建NSLayoutConstraint对象的方法有两种,下面我们分别介绍:


1、使用Objective-C风格的方法创建约束对象


       所谓Objective-C风格的方法,就是通过原生枚举和一些属性设置来创建NSLayoutConstraint对象。使用NSLayoutConstraint类的如下方法:


+(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(nullable id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

先来介绍下方法中的参数都是什么意义,我们应该怎么用他们:


view1:要添加约束的视图对象。


attr1:要约束的对象属性,这个就是一些枚举,如下:


typedef NS_ENUM(NSInteger, NSLayoutAttribute) {

   NSLayoutAttributeLeft = 1,//左

   NSLayoutAttributeRight,//右

   NSLayoutAttributeTop,//上

   NSLayoutAttributeBottom,//下

   NSLayoutAttributeLeading,//起始边,类似左,只在某些从右向左排列的语言中和NSLayoutAttributeLeft有大区别

   NSLayoutAttributeTrailing,//结束边

   NSLayoutAttributeWidth,//宽度

   NSLayoutAttributeHeight,//高度

   NSLayoutAttributeCenterX,//x中心

   NSLayoutAttributeCenterY,//y中心

   NSLayoutAttributeBaseline,//基线

   NSLayoutAttributeLastBaseline = NSLayoutAttributeBaseline,

   NSLayoutAttributeFirstBaseline NS_ENUM_AVAILABLE_IOS(8_0),

 

   //下面的属性是设置的边距 意义和上面类似 对应左,右等边距

   NSLayoutAttributeLeftMargin NS_ENUM_AVAILABLE_IOS(8_0),

   NSLayoutAttributeRightMargin NS_ENUM_AVAILABLE_IOS(8_0),

   NSLayoutAttributeTopMargin NS_ENUM_AVAILABLE_IOS(8_0),

   NSLayoutAttributeBottomMargin NS_ENUM_AVAILABLE_IOS(8_0),

   NSLayoutAttributeLeadingMargin NS_ENUM_AVAILABLE_IOS(8_0),

   NSLayoutAttributeTrailingMargin NS_ENUM_AVAILABLE_IOS(8_0),

   NSLayoutAttributeCenterXWithinMargins NS_ENUM_AVAILABLE_IOS(8_0),

   NSLayoutAttributeCenterYWithinMargins NS_ENUM_AVAILABLE_IOS(8_0),

   //无,后面会说应用场景

   NSLayoutAttributeNotAnAttribute = 0

};

relation:约束的选项,对应<=,==,>=这些,枚举如下:


typedef NS_ENUM(NSInteger, NSLayoutRelation) {

   NSLayoutRelationLessThanOrEqual = -1,//<=

   NSLayoutRelationEqual = 0,//==

   NSLayoutRelationGreaterThanOrEqual = 1,//>=

};

view2:与之对应添加约束的视图对象,例如,如过我要设置view1的上边距离父视图的上边一定间距,这个view2就是view1的父视图,如果我要设置view1与另一个视图一定距离,这个view2就是另一个视图。


attr2:view2的要约束的属性,和attr1含义一样。


multiplie:约束的比例,比如view1的宽是view2的宽的两倍,这个multiplie就是2.


C:这是具体的约束值


对于这些属性,文档上有这样的解释:view1.attr1 = view2.attr2 * multiplier + constant


例如,我们创建一个label,将它的宽高固定为100*100,位置放在屏幕的中央,我们可以使用如下的约束代码:


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

   label.numberOfLines = 0;

   //使用代码布局 需要将这个属性设置为NO

   label.translatesAutoresizingMaskIntoConstraints = NO;

   label.backgroundColor = [UIColor redColor];

   //创建x居中的约束

   NSLayoutConstraint * constraintx = [NSLayoutConstraint constraintWithItem:label attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0];

   //创建y居中的约束

   NSLayoutConstraint * constrainty = [NSLayoutConstraint constraintWithItem:label attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1 constant:0];

   //创建宽度约束

   NSLayoutConstraint * constraintw = [NSLayoutConstraint constraintWithItem:label attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:100];

   //创建高度约束

   NSLayoutConstraint * constrainth = [NSLayoutConstraint constraintWithItem:label attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:100];

   //添加约束之前,必须将视图加在父视图上

   [self.view addSubview:label];

   [self.view addConstraints:@[constraintx,constrainty,constrainth,constraintw]];

效果如下:


image.png


可以发现,一个如此简单的约束方式,我们用这样的代码要写这么一大坨,麻烦而且不直观。于是,apple又提供给我们下面一种方式。


2.使用ASCLL字符创造艺术般的格式化字符串约束


       看到这个小标题是不是眼前一亮,这个标题不是我凭空想象出来的,apple的文档上就是这么写的。十分可爱,对吧。相对于NSLayoutConstraint中的创建方法如下:


+ (NSArray<__kindof NSLayoutConstraint *> *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(nullable NSDictionary<NSString *,id> *)metrics views:(NSDictionary<NSString *, id> *)views;


目录
相关文章
|
iOS开发
iOS 动画绘制圆形
iOS 动画绘制圆形
193 1
|
编译器 iOS开发 异构计算
读iOS核心动画笔记
读iOS核心动画笔记
130 0
|
安全 iOS开发
iOS页面布局:UIScrollView的布局问题
iOS页面布局:UIScrollView的布局问题
511 63
|
12月前
|
安全 Swift iOS开发
Swift 与 UIKit 在 iOS 应用界面开发中的关键技术和实践方法
本文深入探讨了 Swift 与 UIKit 在 iOS 应用界面开发中的关键技术和实践方法。Swift 以其简洁、高效和类型安全的特点,结合 UIKit 丰富的组件和功能,为开发者提供了强大的工具。文章从 Swift 的语法优势、类型安全、编程模型以及与 UIKit 的集成,到 UIKit 的主要组件和功能,再到构建界面的实践技巧和实际案例分析,全面介绍了如何利用这些技术创建高质量的用户界面。
273 2
|
12月前
|
Swift iOS开发 UED
如何使用Swift和UIKit在iOS应用中实现自定义按钮动画
本文通过一个具体案例,介绍如何使用Swift和UIKit在iOS应用中实现自定义按钮动画。当用户点击按钮时,按钮将从圆形变为椭圆形,颜色从蓝色渐变到绿色;释放按钮时,动画以相反方式恢复。通过UIView的动画方法和弹簧动画效果,实现平滑自然的过渡。
219 1
|
Swift iOS开发 UED
如何使用Swift和UIKit在iOS应用中实现自定义按钮动画
【10月更文挑战第18天】本文通过一个具体案例,介绍如何使用Swift和UIKit在iOS应用中实现自定义按钮动画。当用户按下按钮时,按钮将从圆形变为椭圆形并从蓝色渐变为绿色;释放按钮时,动画恢复原状。通过UIView的动画方法和弹簧动画效果,实现平滑自然的动画过渡。
191 5
|
Swift iOS开发 UED
揭秘一款iOS应用中令人惊叹的自定义动画效果,带你领略编程艺术的魅力所在!
【9月更文挑战第5天】本文通过具体案例介绍如何在iOS应用中使用Swift与UIKit实现自定义按钮动画,当用户点击按钮时,按钮将从圆形变为椭圆形并从蓝色渐变到绿色,释放后恢复原状。文中详细展示了代码实现过程及动画平滑过渡的技巧,帮助读者提升应用的视觉体验与特色。
208 11
|
Swift iOS开发
iOS 用一个布局来解决嵌套问题—— UICollectionViewCompositionalLayout
iOS 用一个布局来解决嵌套问题—— UICollectionViewCompositionalLayout
iOS 用一个布局来解决嵌套问题—— UICollectionViewCompositionalLayout
|
Swift iOS开发 UED
【绝妙创意】颠覆你的视觉体验!揭秘一款iOS应用中令人惊叹的自定义动画效果,带你领略编程艺术的魅力所在!
【8月更文挑战第13天】本文通过一个具体案例,介绍如何使用Swift与UIKit在iOS应用中创建独特的按钮动画效果。当按钮被按下时,其形状从圆形变化为椭圆形,颜色则从蓝色渐变为绿色;释放后,动画反向恢复原状。利用UIView动画方法及弹簧动画效果,实现了平滑自然的过渡。通过调整参数,开发者可以进一步优化动画体验,增强应用的互动性和视觉吸引力。
174 7
|
Android开发 iOS开发 C#
Xamarin.Forms:从零开始的快速入门指南——打造你的首个跨平台移动应用,轻松学会用C#和XAML构建iOS与Android通用界面的每一个步骤
【8月更文挑战第31天】Xamarin.Forms 是一个强大的框架,让开发者通过单一共享代码库构建跨平台移动应用,支持 iOS、Android 和 Windows。使用 C# 和 XAML,它简化了多平台开发流程并保持一致的用户体验。本指南通过创建一个简单的 “HelloXamarin” 应用演示了 Xamarin.Forms 的基本功能和工作原理。
418 0

热门文章

最新文章

下一篇
开通oss服务