XIB——AutoLayout添加约束

仿QQ登录界面:

说明:以下各图背景红色只是方便看清楚;

1.创建工程:创建xib文件,不会,可看上上上篇:初识xib

2.打开xib文件:

(1).创建头像:

拖控件:uiimageview——》放到任意位置——》点击Align键,Pin键;如下图:

此时:就可以对控件任意约束了:

说明:由于时间原因,没介绍的以后慢慢自己琢磨;

Align键:Horizontally: 垂直居中对齐; Vertically:水平居中对其;

Pin键:

Add New Constraints:表示这个控件距离上下左右的间距;

Constrain to margins: 以AutoMargins的位置作为起点进行约束,一般选中即可;

Width:就是该控件的宽度;

Height:就是该控件的高度;

注意:上下左右的间距和控件的宽度、高度配合使用,尽量不要冲突; 例如:375的屏幕宽度,你不能距离左边200,距离右边200,还要控件宽度100,肯定不行;笔者建议就是:给了距离左边的间距,同时给出空间宽度即可,适用于lable,textfile等控件,不考虑它到底距离右边多少;如果给了距离左右的间距,就不要给宽度了,适用于button之类的控件;

下面:开始添加imageview的约束:

1》.垂直居中:点击align——》选中Horizontally——》点击Add 1 constraint:

2》.给大小: 130 * 130, 距离上边缘 20;

注意:给上下左右的大小时:先点击红色虚线的部分,让他变成实线;

给宽度、高度时先打勾选中,再给大小;

最后点击:Add 3 constraint:

3》.点击 Resolve Auto Layout Issues——》点击 Update Frames;

4》.其他处理:

在右侧可以添加图片,修改背景等属性

运行:5和6s效果图:

修改成圆角:

点击右上角:两个圈的那个——》在.m文件创建属性关联;

关联:

选中控件(uiimageview)——》右键:

选中New Prferencing Outlet后面的小圆圈,拖到.m文件的@interface与@end中:

给属性命名qqImg,并点击Connect关联:

最后修改边角:

_qqImg.layer.cornerRadius = 65;

运行:

最终效果图:6s和5:

时间: 2024-10-21 12:51:34

XIB——AutoLayout添加约束的相关文章

iOS - XIB之AutoLayout添加约束

XIB--AutoLayout添加约束 仿QQ登录界面: 说明:以下各图背景红色只是方便看清楚: 1.创建工程:创建xib文件 2.打开xib文件: (1).创建头像: 拖控件:uiimageview-->放到任意位置-->点击Align键,Pin键:如下图: 此时:就可以对控件任意约束了: 说明:由于时间原因,没介绍的以后慢慢自己琢磨: Align键:Horizontally: 垂直居中对齐: Vertically:水平居中对其: Pin键: Add New Constraints:表示这个

如何在UIScrollView的xib上添加子控件并添加AutoLayout约束

引言 自从苹果推出了autoLayout之后,作为开发者,深深的体验到了他的便捷之处,再也不用为适配不同屏幕布局UI而烦恼,我们仅仅需要和类关联一个xib文件,想上面放置我们需要的控件xib,并打好其相对于父视图以及同级视图的约束关系,这样我们就做好了不同屏幕的适配.但是奇怪的是UIScrollView上添加子控件,和之前的一样的操作,报的错却很吓人,那是为什么呢? 原因分析 因为UIScrollView想要能滑动的前提是要知道他的ContentSize的大小,我们直接向上面添加约束,他不知道自

纯代码添加约束,autolayout 适配

IOS AutoLayout 代码约束—VFL 2014-12-22 22:19:43http://my.oschina.net/carson6931-Carson6931-点击数:2148 IOS 提供了两种添加约束的方法 第一种: +(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2

xib添加约束

一.添加xib 1.当控制器已经创建下单独创建xib(为控制器单独创建xib) 1.单独创建xib,名字要和控制器名字一样. 2.设置xib的控制器类为当前控制器. 3.给当前控制器view拖线为当前xib. 4.如下图: 二.设置约束 1.label 1.label添加约束可以只设置x,y就可以定位label. 2.在xib或storyBoard中换行的快捷键option+回车.

iOS 用xib给scrollView添加约束

之前习惯了使用纯代码布局,最近使用xib给scrollView添加约束时遇到了一些问题,查阅资料后总结一下. 1.在xib中添加一个滚动视图UIScrollView,上下左右约束都为0 2.在滚动视图上添加一个UIView,如果是水平方向滚动,设置UIView垂直居中.如果是竖直方向滚动,设置UIView水平居中.如果水平方向和竖直方向都需要滚动则不需要设置.设置UIView上下左右约束都为0. 3.如果是水平方向滚动,设置UIView的宽度.如果是竖直方向滚动,设置UIView的高度.如果水平

怎样使用AutoLayOut为UIScrollView添加约束

1.在ViewController中拖入1个UIScrollView,并为其添加约束 约束为上下左右四边与superview对齐 2.在scrollview中,拖入1个UIView,为了便于区分将其设为橙色. 3.为view添加约束 约束为上下左右四边与superview对齐 添加完这些约束后,我们发现出现了错误,不要理会 4.为view添加宽度约束,本例中,想达到的效果是scrollView可以竖向滚动,不要横向滚动, 因此,可以将view的宽度约束为与scrollView相同 5.接下来为v

使用AutoLayOut为UIScrollView添加约束图解及要点

1.在ViewController中拖入1个UIScrollView,并为其添加约束 约束为上下左右四边与superview对齐 2.在scrollview中,拖入1个UIView,为了便于区分将其设为橙色. 3.为view添加约束 约束为上下左右四边与superview对齐 添加完这些约束后,我们发现出现了错误,不要理会 4.为view添加宽度约束,本例中,想达到的效果是scrollView可以竖向滚动,不要横向滚动, 因此,可以将view的宽度约束为与scrollView相同 5.接下来为v

Storyboard中使用UIscrollView添加约束的开发总结

第一次在项目中用storyboard做界面,一般的界面直接添加约束非常爽快 然后有个界面有scrollview,添加了约束还总是出错 刚开始使用了 wCompact,hRegular,滑动出现问题,有些界面滑动不了或者可以左右滑动 已经在viewDidLoad里面添加了scrollView的contentsize 约束什么的都没有问题,百思不得其解 后来上网查了一下资料 还是scrollView的contentsize的问题 scrollView的contentsize只能在viewDidApp

StoryBoard下ScrollView如何添加约束

在做项目的事后有一个注册页面,为了适配屏幕采用了StoryBoard,添加约束以后运行后发现一个问题.  在4.0 甚至更大的屏幕下是没有问题的,如下图(4.0屏幕) 但是放到更小的3.5英寸就会出现问题,发现下面的按钮不见了,主要原因是输入框太多,导致更个屏幕放不下更多.如图(3.5)英寸 想了下就决定用ScrolleView, ContentSize可以设置为560. 这样在其他屏幕上没有太多的影响,在3.5的屏幕下也可以滑动了.但是在StoryBord拖过ScrollView,添加约束的时