[iOS开发]屏幕适配二:Xcode7使用Autolayout拖拽布局基础(1)

参照自动布局教程一我们在Xcode7中来实现一下这个界面(由于教程是较早的Xcode版本所以来重做一遍)Xcode7中已经没有了pin这个选项了。

设计图如下:

实现步骤一:在Stroyboard上拖拽三个view并用不同的颜色表示,将他们修改到与设计图相似的大小效果图如下

实现步骤二:通过观察设计图可以发现三个view等高,上半部分两个view等宽,按住command单击选中三个view,使用autolayout约束为等高,同样选中上部两个view约束为等宽,实现过程如下:

同样的方式来处理上半部分两个view的等宽

实现步骤三:根据设计图调整view的位置,并设定view与super view的约束(现在约束的错误暂时不需要处理),单个选中view1设定他的top和left的约束为20

用同样的处理方式来设定view2 的top和right的边距约束,view3的bottom,left、right的边距约束,约束值为20,实现效果如下:

实现步骤四:设定三个view之间的相对距离,选中view2设定lift约束的时候回发现有两个选项,一个值比较小,一个值比较大,默认的是值比较小的哪一个,值比较小的选项是相对view1的距离值比较大的是相对super view的距离,这里使用默认的约束值:

使用同样的方式来处理view相对view1和view2的相对距离,处理完成效果如下:

最后一步:这时候你会发现之前红色的报错消失了,只剩下黄色的警告了,这说明你在约束上没有问题了剩下的只是控件的frame问题。接下来要做的就是单击每个警告,逐步解决每个警告问题就可以了。也可以选中所有view直接update frame一下解决所有问题,最终效果如下:

执行一下检验一下效果(至此布局基础第一节就到此结束了是不是很简单呢):

直接执行效果:

嘿嘿再旋转一下:

ok检验结束,愿能给有缘人,解惑答疑。

时间: 2024-10-12 04:23:46

[iOS开发]屏幕适配二:Xcode7使用Autolayout拖拽布局基础(1)的相关文章

iOS开发——屏幕适配篇&autoResizing autoLayout和sizeClass

autoResizing autoLayout和sizeClass详解 1. autoResizing autoresizing是苹果早期的ui布局适配的解决办法,iOS6之前完全可以胜任了,因为苹果手机只有3.5寸的屏幕,在加上手机app很 少支持横屏,所以iOS开发者基本不用怎么适配布局,所有的ui控件只要相对父控件布局就可以了,没错autoResizing就是一个相对于父控件的布 局解决方法:注意:它只能相对父控件布局:***在xcode中可以通过可视化的界面调整也可以通过代码去控制 在用

iOS开发屏幕适配问题解决方案

屏幕适配问题共有四种解决方案:(1)根据屏幕宽高写控件frame(下策):(2)Autoresizing的使用(中策):(3)AutoLayout的使用(上策):(4)sizeClasses+AutoLayout的使用(上上策).下面将会分别来进行叙述. (1)根据当前屏幕的宽高写frame 在新特性界面中,根据:[UIScreen mainScreen].bounds.size.height.来判断用户的屏幕长度,来判断时3.5寸,4寸,4.7寸,5.5寸,以此来设置新特性中图片选用哪套. 常

iOS开发——屏幕适配篇&Masonry详解

Masonry详解 前言 1 MagicNumber -> autoresizingMask -> autolayout 以上是纯手写代码所经历的关于页面布局的三个时期 在iphone1-iphone3gs时代 window的size固定为(320,480) 我们只需要简单计算一下相对位置就好了 在iphone4-iphone4s时代 苹果推出了retina屏 但是给了码农们非常大的福利:window的size不变 在iphone5-iphone5s时代 window的size变了(320,5

ios中object c纯代码开发屏幕适配处理方法

纯代码开发屏幕适配处理方法: 为适配iphone各个版本的机型,对ui布局中的坐标采用比例的方式进行初始化,在这里选定iphone6作为ui布局 1.首先在AppDelegate.h中定义两个属性: 1 #import <UIKit/UIKit.h> 2 3 @interface AppDelegate : UIResponder <UIApplicationDelegate> 4 5 @property (strong, nonatomic) UIWindow *window;

从零开始学ios开发(十二):Table Views(上)

这次学习的控件非常重要且非常强大,是ios应用中使用率非常高的一个控件,可以说几乎每个app都会使用到它,它就是功能异常强大的Table Views.可以打开你的iphone中的phone.Messages.Contacts.Mail.Settings等等等等,这些都用到了Table Views. 在Table Views中,Table是用来显示一系列数据的,每条数据占用且只占用一行(一个table cell),在ios中没有规定table到底可以容纳多少行数据,也就是说,只要内存足够多,tab

iOS开发-定制多样式二维码

iOS开发-定制多样式二维码 二维码/条形码是按照某种特定的几何图形按一定规律在平台(一维/二维方向上)分布的黑白相间的图形纪录符号信息.使用若干个与二进制对应的几何形体来表示文字数值信息. 最常见的二维码功能包括信息获取.网站跳转.电商交易.手机支付等等,其拥有密度小.信息容量大.容错能力强.成本低.制作难度低等优点.在移动开发中,二维码的地位也越来越重要,掌握二维码的基本操作是重要的本领之一. 在iOS7之后,苹果自身集成了二维码的生成和读取功能.生成二维码包括以下步骤 1.导入CoreIm

iOS开发UINavigation系列二——UINavigationItem

iOS开发UINavigation系列二--UINavigationItem 一.引言 UINavigationItem是导航栏上用于管理导航项的类,在上一篇博客中,我们知道导航栏是通过push与pop的堆栈操作来对item进行管理的,同样,每一个Item自身也有许多属性可供我们进行自定制.这篇博客,主要讨论UINavigationItem的使用方法. UINavigationBar:http://my.oschina.net/u/2340880/blog/527706. 二.来说说UINavi

iOS开发系列之二 - UILabel 用法小结

// 初始化标签 UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 100, 300, 150)]; // 设置标签文字 label.text = @"This is a test text.This is a test text.This is a test text."; // 设置标签文字字体 // 使用系统字体 label.font = [UIFont systemFontOfSize:20]; //

从零开始学ios开发(十二):Table Views(中)UITableViewCell定制

我们继续学习Table View的内容,这次主要是针对UITableViewCell,在前一篇的例子中我们已经使用过UITableViewCell,一个默认的UITableViewCell包含imageView.textLabel.detailTextLabel等属性,但是很多时候这些默认的属性并不能满足需要,其实更多的时候我们想自己制定UITableViewCell的内容,这篇学习的就是制定自己的UITableViewCell. UITableViewCell继承自UIView,因此它可以加载