iOS界面布局之一——使用autoresizing进行动态布局

简介:

iOS界面布局之一——使用autoresizing进行动态布局

autoresizing是iOS中传统的界面自动布局方式,通过它,当父视图frame变换时,子视图会自动的做出相应的调整。

一、通过代码进行布局

任何一个view都有autoresizingMask这个属性,通过这个属性可以设置当前view与其父视图的相对关系。我们先来看UIViewAutoresizing这个枚举:

?
1
2
3
4
5
6
7
8
9
typedef  NS_OPTIONS(NSUInteger, UIViewAutoresizing) {
     UIViewAutoresizingNone                 = 0, //默认
     UIViewAutoresizingFlexibleLeftMargin   = 1 << 0, //与父视图右边间距固定,左边可变
     UIViewAutoresizingFlexibleWidth        = 1 << 1, //视图宽度可变
     UIViewAutoresizingFlexibleRightMargin  = 1 << 2, //与父视图左边间距固定,右边可变
     UIViewAutoresizingFlexibleTopMargin    = 1 << 3, //与父视图下边间距固定,上边可变
     UIViewAutoresizingFlexibleHeight       = 1 << 4, //视图高度可变
     UIViewAutoresizingFlexibleBottomMargin = 1 << 5 //与父视图上边间距固定,下边可变
};

下面我们通过效果来看这些属性的作用:

先创建两个view,为了区分,设置不同的背景色:

?
1
2
3
4
5
6
7
8
9
10
- ( void )viewDidLoad {
     [super viewDidLoad];
     // Do any additional setup after loading the view, typically from a nib.
     UIView * view1 = [[UIView alloc]initWithFrame:CGRectMake(20, 40, 200, 200)];
     view1.backgroundColor=[UIColor redColor];
     UIView * view2 = [[UIView alloc]initWithFrame:CGRectMake(10, 10, 100, 100)];
     view2.backgroundColor=[UIColor greenColor];
     [view1 addSubview:view2];
     [self.view addSubview:view1];
}

设置view2的自动布局属性如下:

?
1
  view2.autoresizingMask=UIViewAutoresizingFlexibleBottomMargin;

这时的效果如下:


改变view1的frame如下:

?
1
UIView * view1 = [[UIView alloc]initWithFrame:CGRectMake(20, 40, 300, 300)];

效果如下:

这时view2的下边距离相对父视图是可变的。

设置如下:

?
1
    view2.autoresizingMask=UIViewAutoresizingFlexibleHeight;

效果如下:


可以看出,这时子视图的高度是随父视图变化而自动改变的。

如下设置:

?
1
view2.autoresizingMask=UIViewAutoresizingFlexibleLeftMargin;

效果如下:


这时子视图的左边是随父视图变化而可变的。

同理,UIViewAutoresizingFlexibleRightMargin将使子视图右边与父视图的距离可变。

UIViewAutoresizingFlexibleTopMargin将使子视图上边与父视图距离可变。UIViewAutoresizingFlexibleWidth将使子视图的宽度可变。

注意:这些自动布局的属性是可以叠加的,比如保持视图与父视图边距不变,如下设置:

?
1
view2.autoresizingMask=UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;

效果如下:

二、nib文件中可视化设置自动布局

在storyboard中我们可以更加轻松的进行autoresizing自动布局。在view设置栏中有autoresizing这个设置,点中相应的箭头,就是刚才我们探讨的设置选项。并且我们把鼠标放在这个上面的时候,右侧会自动为我们预览效果。

如果你觉得autoresizing很强大,那么你就太容易满足了,autoresizing可以满足大部分简单的自动布局需求,可是它有一个致命的缺陷,它只能设置子视图相对于父视图的变化,却不能精确这个变化的度是多少,因此对于复杂的精准的布局需求,它就力不从心了。但是有一个好消息告诉你,iOS6之后的autolayout自动布局方案,正是解决复杂布局的好帮手,我们在下一遍博客中再进行详细讨论。


目录
相关文章
|
2月前
|
安全 iOS开发
iOS页面布局:UIScrollView的布局问题
iOS页面布局:UIScrollView的布局问题
56 8
|
5月前
|
编解码 安全 Android开发
探索iOS与Android开发的差异:从界面到性能
【6月更文挑战第10天】在移动应用开发的广阔天地中,iOS和Android两大平台各占山头,它们在设计理念、用户体验、性能优化等方面展现出独特的魅力。本文将深入探讨这两大系统在开发过程中的主要差异,从用户界面设计到性能调优,揭示各自背后的技术逻辑与创新策略,为开发者提供全面的视角和实用的开发指南。
|
6月前
|
安全 Swift iOS开发
【Swift 开发专栏】Swift 与 UIKit:构建 iOS 应用界面
【4月更文挑战第30天】本文探讨了Swift和UIKit在构建iOS应用界面的关键技术和实践方法。Swift的简洁语法、类型安全和高效编程模型,加上与UIKit的紧密集成,使开发者能便捷地创建用户界面。UIKit提供视图、控制器、布局、动画和事件处理等功能,支持灵活的界面设计。实践中,遵循设计原则,合理组织视图层次,运用布局和动画,以及实现响应式设计,能提升界面质量和用户体验。文章通过登录、列表和详情界面的实际案例展示了Swift与UIKit的结合应用。
286 1
|
Swift iOS开发
iOS 用一个布局来解决嵌套问题—— UICollectionViewCompositionalLayout
iOS 用一个布局来解决嵌套问题—— UICollectionViewCompositionalLayout
iOS 用一个布局来解决嵌套问题—— UICollectionViewCompositionalLayout
|
iOS开发
iOS布局中的抗被拉伸、抗压缩优先级
iOS布局中的抗被拉伸、抗压缩优先级
658 0
|
缓存 iOS开发
iOS小技能:解决TableVIew刷新数据带来的界面跳动问题
iOS小技能:解决TableVIew刷新数据带来的界面跳动问题
1699 0
iOS小技能:解决TableVIew刷新数据带来的界面跳动问题
|
iOS开发
IOS15上纯代码布局之导航控制器的导航条为透明的问题
IOS15上纯代码布局之导航控制器的导航条为透明的问题
223 0
|
iOS开发
IOS使用纯代码布局替换掉默认的storyboard
IOS使用纯代码布局替换掉默认的storyboard
103 0
|
Android开发 iOS开发
IOS开发之UIScrollView约束布局
IOS开发之UIScrollView约束布局
414 0
|
iOS开发
ios调用系统应用界面显示如何显示中文
在iOS里面,跳转到系统相簿界面,通讯录界面等后标题显示的英文,关键是手机已经设置显示中文了。
70 0