在storyboard/xib文件中实现自动布局 autolayout

1、注意事项

  • autolayout和frame属性是有冲突的,所以如果准备使用autolayout,就不要再代码中对控件的frame属性进行操作。
  • 设置autolayout必须设置完全,必须包括位置信息和尺寸信息。也就是说必须有宽高和坐标位置,缺一不可。

回到顶部

2、简单示例

  两个view(redView和blueView),等高等宽,redView距离左边和下边间距都是20,距离blueView间距也是20.blueView距离右边和下边都是20.

回到顶部

  2.1、autolayout的相关属性设置

回到顶部

  2.2、redView的设置,blueView类似

要保证每个控件都可以计算出来位置信息和尺寸信息。

blueView的约束设置

回到顶部

  2.3、效果预览

任意旋转,始终处于底部,并且间距保持一致。

回到顶部

3、复杂示例

  实现效果如下:

  View中有四个UIView

  每个UIView中又包含两个控件UIImageView和UILable。

  UIimageview位于正中心,UILable位于底部。

  

回到顶部

  3.1、先实现内部控件的自动布局

分析如下:

  UIImageView和UIlable的自动布局。

UIImageView的相关约束信息。

UIlable的相关约束信息

回到顶部

  3.2、添加四个相同的UIView,并设置相关约束

其中一个redView的约束信息

看效果,在不同尺寸下,和旋转状态下,效果一致。

总结:

这个全部是通过操作添加约束的,难以用文字表达清楚,看源代码吧(最后边)。

回到顶部

4、特殊情况UIlable

设置UILable的约束条件,它只需指定位置和宽度,高度系统会根据文字长度自动计算。
比如一下程序:

两个UIView中间是一个UIlabel。现在文字长度是这样。然后添加一个方法实现单击屏幕,使得文字内容变短。

 1 /**
 2  *  触摸屏幕调用这个方法
 3
 4  */
 5 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
 6 {
 7
 8     // 添加动画效果
 9     [UIView animateWithDuration:0.5 animations:^{
10          _lab.text = @"asdfasfasdfadsf";
11         // 要执行动画的view
12         [self.view layoutIfNeeded];
13     }];
14 }

单击屏幕后UILable会自动缩小高度。不会是固定大小。

 

源代码参考:

http://pan.baidu.com/s/1qW60b5y

时间: 2024-10-17 08:08:39

在storyboard/xib文件中实现自动布局 autolayout的相关文章

APP的页面有三种基本实现方式:storyboard,xib,代码实现 与自动布局

APP页面的三种基本实现方式:storyboard,xib,代码实现. 当然在不采用页面自动布局的情况下,代码实现可以和storyboard,xib混合使用,咱们只说只采用基本实现方式,不说混合实现页面,你们可以自己在心里混合下吧. 采用storyboard实现的APP页面安装包最大,你想采用他强大功能(页面组织逻辑,可见既可得等),那么你的APP包的大小只有忍痛长瘤子了,采用他你对安装包的大小别太奢望了.不过很多老码农写APP习惯,不喜欢这类现代化的工具,还在用代码实现页面,或用XIB实现页面

将插座变量(IBOutlet)关联到*.xib文件中对象 + 将对*.xib对象的操作关联到动作方法(IBAction)

将插座变量(IBOutlet)关联到*.xib文件中对象 以BNRDetailViewController.m和BNRDetailViewController.xib为例(<iOS编程>第10章例子) 1.打开BNRDetailViewController.xib,添加一个UITextField对象: 2.在辅助编辑器中打开BNRDetailViewController.m,方法是:按住Option键并点击项目导航面板中的BNRDetailViewController.m: 3.按住Contr

代码视图与StoryBoard.Xib文件视图的跳转

在storyboard中拖拽的控件,当我们使用纯代码进行编写的时候,进行跳转的时候用我们平时用的[self.navigationController popToViewController:Vc animated:YES], 你会发现跳转的后出现的页面只有你用用纯代码写的,而storyboard中的没有,这时候我们使用这个方法还是比较简单不能实现纯代码视图与StoryBoard.Xib视图跳转的问题: 可以常使用以下的方法: UIStoryboard *story = [UIStoryboard

iOS Interface Builder:在.xib文件中加载另一个.xib文件

在开发中,经常会用到一个需要重复使用的模块,比如好友列表中每个用户的展示或每条动态,这些都是相同的模版,这样我们就可以把这个部分提取出来放到一个单独的.xib中.那么提取出的.xib如何在其他.xib中使用呢? 接下来就说一下如何在.xib中加载其他的.xib.大概结构是这样的: 创建项目,项目名称叫CompositeXib 创建MainView和ChildView,ChildView将作为子View包含到MainView中. 创建完成后是这样的: 设置ChildView的Size可以自定义,去

IOS手动添加的View 在代码中使用(自动布局)autoLayout

- (void)viewDidLoad { [super viewDidLoad]; UIButton *btnTest = [UIButton buttonWithType:UIButtonTypeCustom];//不需要去刻意指定x,y的坐标,可以用CGRectZero btnTest.backgroundColor = [UIColor redColor]; btnTest.layer.borderColor = [UIColor yellowColor].CGColor; btnTes

**IOS:xib文件解析(xib和storyboard的比较,一个轻量级一个重量级)

使用Xcode做iOS项目,经常会和Xib文件打交道,因为Xib文件直观的展现出运行时视图的外观,所以上手非常容易,使用也很方便,但对于从未用纯代码写过视图的童鞋,多数对Xib的理解有些片面. Xib文件是什么? A nib file describes the visual elements of your application’s user interface, including windows, views, controls, and many others. It can also

IOS Xib使用——为控制器添加Xib文件

Xib文件是一个轻量级的用来描述局部界面的文件,它与StoryBoard类似,都是使用Interface Bulider工具进行编辑.但是StoryBoard是重量级的,它是用来描述整个软件的多个界面,并且能够展示多个页面之间的跳转关系.在StoryBoard出现之前,一直是使用Xib文件表示界面.当然除了使用Xib文件,也可以直接使用代码来生成界面,无论哪种方式,都各自有自己的优缺点. Xib既可以用来表示一个控制器的界面,又可以用来表示不同控制器中的局部的小界面.在本节,主要讲解一下用Xib

IOS之UI--小实例项目--添加商品和商品名(使用xib文件终结版) + xib相关知识点总结

*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } a { color: #4183C4; } a.absent { color: #cc0000; } a.anchor { display: block; padding-left: 30px; margin-left: -30px; cursor: pointer; position: absolute

iOS UI-团购案例(通过xib文件自定义UITableViewCell)

一.Model 1 #import <Foundation/Foundation.h> 2 3 @interface Goods : NSObject 4 5 @property (nonatomic, copy) NSString *icon; 6 @property (nonatomic, copy) NSString *title; 7 @property (nonatomic, copy) NSString *price; 8 @property (nonatomic, copy) N