Auto Layout Guide---自动布局指南(二)

 

原文链接:https://developer.apple.com/library/ios/documentation/……/WorkingwithConstraints.html

 

Working with Constraints in Interface Builder

 

添加,编辑或删除约束最简单的方法是使用可视化布局工具Interface Builder。创建约束很简单:拖动两个view之间来回拖动控制,或一次添加多个约束,您只需使用各种弹出式窗口。

添加约束(Adding Constraints)

当你拖出对象库中的一个元素并把它Interface Builder的画布上,它开始不受约束,可以很容易地通过拖动周围的元素原型界面。如果你建立并运行,而不添加任何约束元素,你会发现,界面生成器修复元素的宽度和高度,和销(pins)定位在父视图的左上角;这意味着调整窗口的大小并不移动或调整元素的大小。为了使你的界面正确的在大小或方向的变化上作出反应,你需要开始添加约束。

重要提示:虽然Xcode中不会产生警告或错误,当你建立一个用户界面,不应该在没有适当的约束的状态下运送您的应用程序!

有几种方法可以添加约束,根据你想要的精度水平和您要添加的时间的数量的限制。

添加约束与控制拖动(Adding Constraints with Control-Drag)

 

添加约束最快的方法是通过按住Control键并拖动到画布上的一个视图,就像你创建outlets 或 actions链接的方式。当你知道你想要什么类型的约束,用此控制拖动的方法创建一个约束,是非常快速,精确的。

您可以控制​​拖动,从自身或其容器,或到另一个元素。根据你拖动的对象和目标,自动布局会适当限制可能性的约束。例如,如果你水平向右拖动到其容器元素,你可以选择pin元素的尾部空间或让它在容器中垂直居中( you have the options to pin the element’s trailing space or to center it vertically in the container)。

 

提示:要同时从控制拖拽菜单中选择多个约束,可以按住Command键或Shift键。

通过对齐和引脚菜单添加约束(Adding Constraints with Align and Pin Menus)

 

您也可以使用自动布局菜单( Auto Layout menu)添加约束,它驻留在Interface Builder的面板上。

 

除了对齐或间距增加约束,你也可以使用这个菜单来解决布局问题,和确定调整大小行为的约束。

  • 对齐(Align创建对齐约束,如围居中容器中的视图,或两种视图的左边缘对齐。

  • PIN  创建间距(spacing )的约束,如定义视图的高度,或指定与另一个视图的水平距离。

  • 问题(Issues通过在建议的基础上添加或复位约束解决布局问题(见“Resolving Auto Layout Issues”)。

  • 调整大小(Resizing指定如何调整影响制约。

 

如果你只有一个单一的元素,那么需要多个要素的约束选项会被禁用。

 

从Align或PIN菜单添加一个约束
  1. 选择适当的约束旁边的复选框。

    要选择“Spacing to nearest neighbor”的约束,选择合适的侧面的元素对应的红色约束。

                                                                                                                                                        如果你需要创建一个不相邻的视图的约束,单击黑色的三角形,从下拉选项中选择一个。

  2. 输入相应的恒定值。

  3. 按下一个按钮来创建约束。

    • “Add Constraints button”添加新的约束到选定的元素。

    • “Add and Update Frames button”添加新的约束到选定的元素,并移动你的界面元素,以尽可能地满足每一个约束。

    注:  你每次点击两个按钮中的一个都会增加新的约束条件。你并没有编辑现有的约束。编辑现有约束的信息,请参阅“Editing Constraints.”

添加丢失或建议的约束(Adding Missing or Suggested Constraints)

 

如果你需要一个起点为你的布局,或者如果你需要迅速做出很大的变化,请使用“ Issues menu添加约束,

如果您需要添加一个大的约束集来形容你的界面布局,而你不想一个个添加约束,选择 Issues > Add Missing Constraints,添加nonambiguous组约束。此命令依据你选择的内容推断要添加的约束。

如果你需要恢复到一组没有错误的约束条件,或者你只是想重新开始,选择Issues > Reset to Suggested Constraints,删除错误的约束和添加nonambiguous的约束集。这相当于清除约束,然后添加缺少的约束。

编辑约束(Editing Constraints)

您可以更改约束,关系和约束的优先级。您可以编辑这些属性,可以通过双击在画布上编辑的价值约束,或通过选择的约束和使用“属性”检查器。但是,你不能改变约束的类型(例如,你不能改变一个宽度约束到一个高度约束)。

删除约束(Deleting Constraints)

你可以随时删除任何约束,通过在画布上或在大纲视图中选择,并按下Delete键。

 

Copyright © 2013 Apple Inc. All Rights Reserved.Terms of Use|Privacy Policy| Updated: 2013-09-18

TheLittleBoy翻译,转载请注明出处,谢谢!

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue-Admin-Template是一个基于Vue.js和Element UI的后台管理系统模板,提供了丰富的UI组件和功能模块,适用于各种类型的后台管理系统。 在Vue-Admin-Template中,整个页面布局是由一个Layout组件来实现的,包括头部导航栏、侧边栏、面包屑导航和主要内容区域。Layout组件的代码在/src/layout目录下,其中包括Header、Sidebar、TagsView、AppMain等多个子组件。 下面是Layout组件的代码示例: ``` <template> <div class="app-wrapper"> <Sidebar /> <div class="main-container"> <Header /> <TagsView /> <AppMain /> </div> </div> </template> <script> import Sidebar from './components/Sidebar' import Header from './components/Header' import TagsView from './components/TagsView' import AppMain from './components/AppMain' export default { name: 'Layout', components: { Sidebar, Header, TagsView, AppMain } } </script> <style> .app-wrapper { display: flex; flex-direction: row; height: 100vh; } .main-container { flex: 1; display: flex; flex-direction: column; overflow: hidden; } </style> ``` 在这个示例中,Layout组件分为两个部分,第一部分是侧边栏组件Sidebar,第二部分是头部导航栏、面包屑导航、主要内容区域等组件的容器。容器使用了Flex布局,其中TagsView和AppMain组件的高度都设置为flex: 1,以充满剩余的空间。 您可以根据自己的需求修改Layout组件的代码,例如添加自定义的组件、修改样式等。同时,Vue-Admin-Template也提供了丰富的UI组件和功能模块,可以方便地实现各种类型的后台管理系统。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值