简化用户界面设计

来源:互联网 发布:php信息管理系统源码 编辑:程序博客网 时间:2024/05/17 04:36

为了创建具有适配能力的用户界面,Xcode提供了约束来固定用户界面子项四边与窗口四边或者其它子项四边的距离,这一章,你将学习更多关于约束和storyboard的知识。

一.使用Stack View

如果你的用户界面包含多个子项,对每个子项设置约束会导致很乱,为了解决这个问题,Xcode提供了一个特点,叫做Stack View,stack view背后的想法是一组用户界面子项需要放在一起。并不是单独为每一个子项设置约束,而是将它们放在一个stack view中,然后对stack view设置约束。

操作:

在.xib中放入三个check box,然后将其全选,点击右下角的Stack View,将三个check box分组放在stack view中,然后对stack view设置约束:

二.修复约束冲突(Fix Constrint Conflict)

如果你的用户界面没有正确地适配,尝试一个或多个下面的选项:

  • 添加或者删除约束
  • 改变约束优先级
  • 改变约束:从”等于(=)”固定值关系到”大于或等于(>=)”或者”小于或等于(<=)”关系

一个compression约束可以让用户界面子项不要缩小或者放大太多,创建compression约束方法:按住Ctrl键,将鼠标拖到用户界面子项的边界内即可。然后可以固定Width或者Height,如图:

如果我们对一个用户界面子项设置固定宽度(利用compression约束),并且固定左右与窗口边缘距离(利用left和right约束),为了满足这些约束,Xcode不再会调整窗口的宽度。如果我们想要保持用户界面子项的宽度不小于当前宽度,但是允许窗口调整大小,如何做呢?一个方法是使用约束优先级。

优先级定义了哪个约束必须首先要满足。每次你创建一个约束,Xcode会给它一个1000的优先级,是最高的。如果你给它更低的优先级,那么它允许优先级更高的约束优先执行。

大多数的约束都是定义一个固定的值,为了更灵活,你可以改变等于关系,变成大于或等于、小于或等于。

三.使用Storyboard Reference

设计用户界面的两种方式是.xib文件和.storyboard文件。Storyboard展示了由segue连接的scene(场景,即窗口)。对于包含少数窗口的简单程序,一个storyboard足够了。但是如果你程序的用户界面包含许多窗口的话,一个storyboard塞满了许多scene和segue,可能看起来很乱。

为了避免让整个用户界面放在一个单独的storyboard中,Xcode让你使用storyboard reference将一个storyboard分成几个部分。storyboard reference让你在分开的storyboard文件中存储scene和segue。一个storyboard reference box代表一个分开的storyboard文件:

创建storyboard reference有两种方式:

1.选择你想从storyboard文件中分开的storyboard场景,然后选择”Editor”–>”Refactor to Storyboard”

创建一个新工程,选择”use Storyboard”,然后从对象库中拖”Tab View Controller”,并使用按钮将其用segue连接起来,如图:

点击Tab View Controller来选择它,然后Editor—–>Refactor to Storyboard,如图:

然后,出现对话框:

命名为Tab.storyboard,保存,如图:

2.从对象库中拖一个Storyboard Reference,将它连接到一个已经存在的storyboard中的场景中。

创建一个新工程,选择”use Storyboard”,然后从对象库中拖”Tab Storyboard Reference”,并使用按钮将其用segue连接起来,Storyboard Reference就相当于一个storyboard,如图:

创建一个新的storyboard文件,命名为Tab.storyboard,如图:

从对象库中拖”Tab View Controller”到Tab.storyboard,并将其作为”Is Inital Controller”,如图:

在Main.storyboard文件中,将storyboard reference中引用的storyboard指定为Tab.storyboard,如图:

0 0
原创粉丝点击