今天学习自动布局中的自动调整尺寸大小。

一、尺寸分类

尺寸分类是对设备宽高的一种大致分类。

有两种具体的尺寸分类用来表示真机:紧凑(Compact)和标准(Regular)。还有第三种分类可以在设计工具里和代码中同时代表紧凑或标准:任意(Any)

以下是尺寸分类和设备方向的图解

熟知尺寸分类,对应用程序的设计十分必要。

我们在设计的时候需要用到尺寸分类控件,如图

二、下面记录如何从竖向变为横向,且控件位置可发生改变的自适应布局

1.选择合适的尺寸类型,这里用iPhone5s的尺寸类型举例

2.重新移动控件进行初步布局

3.卸载当前面板中,在竖屏时已经做好的约束

以Action one为例子,把view控件和4个按钮的约束都卸载掉

1)选择Action one,打开尺寸检查器

2)双击Constraints中第一个约束,点击底部Installed复选框前面的加号,选择Any With | Compact Height ,添加一个只针对wAny和hCompact布局的新复选框。取消他的勾选就可以从这个尺寸分类组合中卸载此约束,而此约束在通用设计师仍然有效的。

4.为新的设计添加约束

1)绿视图,点击Pin按钮,取消勾选Constrain to margins复选框,点击正方形上方,左侧,下方的红色虚线,并在文本框中填入20,最后点击Add 3 Constraints按钮,如图。

固定绿视图右边则只需按住右键,从视图往右边拖动,直到主视图背景变蓝,释放,选择Trailing Space to Container Margin选项。

2)按钮,需要把4个按钮位于一列对齐,并且间隔相同距离。需要借助几个view控件。通过在按钮间隙中添加隐藏的填充视图,让这些视图占据所有可用的空间并拥有相同的高度,这样就等于让所有按钮的间距拥有相同的高度,最后结果如图。

①添加填充视图,把视图的颜色选为灰色

②选中所有填充视图,点击Pin按钮,勾选Equal Widths和Equal Heights 并且选中左右的虚线,并在文本框中填入0,最后点击Add 18 Constraints

③让填充视图和按钮在同一垂直线上对齐,选择所有的填充视图和按钮,按下Align按钮,勾选Horizontal Centers复选框,然后点击Add 8 Contraints按钮。

④确保视图占据按钮之间的所有垂直空间,以及最顶端按钮和底端按钮与主视图之间的空隙。我们通过设置每买两个视图之间的距离为零就可以达到这个效果。

选取所有填充视图并点击Pin按钮,在弹出面板中选中上下的红色虚线,并在文本框中填入0,最后点击Add 10 Contraints按钮。

⑤选择Editor -> Resolve Auto Layout Issues -> Update Frames选项,大功告成!

注意:最后别忘了把填充视图隐藏起来,选中填充视图,在属性检查器中的Drawing中勾选Hidden复选框。

iOS开发-自动布局和自动旋转的更多相关文章

  1. IOS某个ViewController禁止自动旋转

    IOS屏幕自动旋转,强制横竖屏方法: - (BOOL)shouldAutorotate { return YES; } - (NSUInteger)supportedInterfaceOrientat ...

  2. iOS开发-自动布局篇:史上最牛的自动布局教学!

    转载自:http://www.jianshu.com/p/f6cf9ef451d9 本文我们将提到: aotulayout(手码) VFL aotulayout(Xib) Masonry(第三方框架) ...

  3. 解决ios横屏拍照图片自动旋转90度问题

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  4. iOS开发--QQ音乐练习,旋转动画的实现,音乐工具类的封装,定时器的使用技巧,SliderBar的事件处理

    一.旋转动画的实现 二.音乐工具类的封装 -- 返回所有歌曲,返回当前播放歌曲,设置当前播放歌曲,返回下一首歌曲,返回上一首歌曲方法的实现 头文件 .m文件 #import "ChaosMu ...

  5. IOS开发——手动设置屏幕旋转

    在移动开发过程.您可能需要跨越看看你的手机.有可能是所有的接口必须跨越,有可能是一个交叉通过电话,当用户当,你的接口也希望他能跨越.还有可能的是,界面的一部分需要被侧向显示.视情况而定,有不同的方法来 ...

  6. ios开发——实用技术篇&三维旋转动画

    实现三位旋转动画的方法有很多种,这里介绍三种 一:UIView 1 [UIView animateWithDuration:1.0 animations:^{ 2 self.iconView.laye ...

  7. [iOS开发] 使用Jenkins自动打包并上传至蒲公英

    设置构建触发器 Poll SCM H/2 * * * * 设置 构建脚本 # #xodebuild & jenkins 自动构建并上传至pgyer.com #2017年5月9日 # #定义一些 ...

  8. iOS开发 CGAffineTransform 让图片旋转, 旋转后获得图片旋转的角度

    1.让图片旋转 UIImageView *imageView = [[UIImageView alloc]init]; imageView.frame = CGRectMake(50, 50, 200 ...

  9. iOS开发--自动布局

    距离左边的: 距离顶部的: 距离右边的: 距离底部的:

随机推荐

  1. 深入理解Java虚拟机 - Java体系

    使用JAVA已经快三年了,但说来惭愧,一直以来认为Java就是Java语言本身,最多再包括一个JVM,对于整个Java的体系结构还是不甚明了,现在有时间把<深入理解Java虚拟机>这本书读 ...

  2. 逆序对的相关问题:bzoj1831,bzoj2431

    先从简单一点的bzoj2431入手: n个数1~n已经限定了,所以 对于1~i-1,新加入i,最多可以增加i-1个逆序对,最少增加0个逆序对 f[i,j]表示1~i形成的序列逆序对为j的方案数 比较容 ...

  3. UVa 10900 (连续概率、递推) So you want to be a 2n-aire?

    题意: 初始奖金为1块钱,有n个问题,连续回答对i个问题后,奖金变为2i元. 回答对每道题的概率在t~1之间均匀分布. 听到问题后有两个选择: 放弃回答,拿走已得到的奖金 回答问题: 如果回答正确,奖 ...

  4. ubuntu常用快捷键

    1.直接退出窗口  Ctrl + q 2.窗口变大变小  Alt + Q 3.最小化窗口,显示桌面Ctrl + Alt + D 4.把当前窗口移到另一个工作区 Shift+ Ctrl + Alt +方 ...

  5. SharePoint 2010 获取列表中所有数据(包括文件夹内)的方法

    转: http://blog.csdn.net/wangwenism/article/details/8751411 SharePoint的列表能存储文件以及文件夹,用户使用的时候,经常会建几个分类文 ...

  6. Spring @Resource、@Autowired、@Qualifier的注解注入及区别

    spring2.5提供了基于注解(Annotation-based)的配置,我们可以通过注解的方式来完成注入依赖.在Java代码中可以使用 @Resource或者@Autowired注解方式来经行注入 ...

  7. [Tommas] 测试用例覆盖率(一)

    一.测试用例的切面设计 所谓测试切面设计,其实就是测试用例大项的划分.测试用例划分的经典方法是瀑布模型,也就是从上到下,逐渐细分,大模块包括小模块,小模块包括更小的模块.但仅仅如此是不够的,我们还要从 ...

  8. [LeetCode] Two Sum水过

    刷LeetCode的第一题,TwoSum,基本算是水过. 题目:https://leetcode.com/problems/two-sum/ Given an array of integers, f ...

  9. JDBCTemplate.java

    package com.pk.xjgs.util; import java.sql.Connection; import java.sql.SQLException; import java.util ...

  10. lua协程实现简析

    协程,简单来说就是新创建一个协助程序(co = coroutine.create(func)),然后需要手动去启动它(coroutine.resume(co)),在它最终退出之前,它有可能暂停多次返回 ...