Start Developing iOS Apps (Swift)->创设基础UI(二)

选择电动布局(Auto Layout)

Auto
Layout是三个强有力的布局引擎,它协助您设计自适应的布局,用以动态的答问任何显示器尺寸的变动。你利用约束(constraints)来描述布局。约束是用来分解叁个因素相对于别的因素的岗位,以及那么些因素本人的尺寸。Auto
Layout依照约束来动态的测算每一种元素的尺码和职位。

概念布局的一种有益方法是选拔栈视图(UIStackView)。栈视图提供一种简化的分界面,用于在列和行上布局视图集结。栈视图使用钩子下的Auto
Layout来计算它管理的有着视图的尺码和岗位。那令你能够轻巧访谈Auto
Layout的全部作用,同不平时间大大减少布局的复杂。

想要选取Auto
Layout,把分界面中已存在的成分包裹到三个栈视图中,然后加多须要的约束来确定栈视图在情景中的地点。

给菜的品性场景加多Auto Laout约束

  1. 点击Standard editor开关回到规范编辑器。

    图片 1standard_toggle_2x.png

    透过点击Navigator和Utilities按键,打开project navigator和utility
    area。

  2. 按住Shift键,并选择text field、label、以及button。

    图片 2BBUI_AL_shift_select_2x.png

  3. 在画布的右下,点击Embed In Stack开关。(也许,选取Editor > Embed
    in > Stack View。)

    图片 3BBUI_AL_stackmenu_2x.png

    Xcode
    把客户界面成分包裹在贰个栈视图中,把它们堆在同步。Xcode解析现存的布局,明确这个因素应该垂直实际不是程度堆集。

    图片 4BBUI_AL_stack_2x.png

  4. 如有要求,展开大纲视图。采取Stack View对象。

    图片 5BBUI_AL_outlineview_2x.png

  5. 在Attributes检查器中,在Spacing字段键入8。按下回车键。你将注意到顾客分界面成分之间的垂直距离变大,何况栈视图也随着变大。

    图片 6BBUI_AL_stackspaced_2x.png

  6. 在画布底部的右臂,展开Add New Constraints菜单。

    图片 7BBUI_AL_pinmenu_2x.png

  7. 在上头的“Spacing to nearest
    neighbor”,点击八个档期的顺序约束和地点的垂直约束来选中它们。当它们选中的时候会产生灰白。这一个约束表示了与近期紧邻的
    前导、尾巴部分、以及顶端之间的区间。在那个上下文中,近日周围那些术语的意味是最临近客商分界面成分的界限,那一个元素得以是superview,也能够是别的顾客分界面成分,也得以是边缘。因为“Constrain
    to
    margins”复选框被选中,本例中的栈视图将约束到超视图(superview)的左侧边缘。那提供了栈视图和景色边缘之间的长空。另一方面,栈最上端与气象最上部布局引导线是对峙约束关系。假设状态条可知,则怀有的最上端布局带领线都在场合条以下。若无,则它在气象最上部之下。所以,你须求在栈视图和布局携带线之间增添有些空中。

  8. 在左右的框中填入0,在最上部的框中填入20。
  9. 在Update Frame旁边的弹出美食做法中,选拔Item of New
    Constraints。那将导致Interface
    Builder在开立约束是自动更新受影响视图的框架。Add New Constraints
    菜单看上去是这么的:

    图片 8BBUI_AL_stackconstraints_2x.png

  10. 在Add New Constraints菜单中,点击 Add 3
    Constraints按钮。菜的色调场景客商分界面看上去会是如此:

    图片 9BBUI_AL_stackfinal_2x.png

    瞩目现行反革命text 田野还是未有扩充参加景的边缘。加多约束来修改它。

让text 田野同志的上升的幅度适应栈视图

  1. 在storyboard中,选中菜的品性场景中的text 田野(field)。
  2. 在画布尾巴部分的出手,再次展开Add New Constraints菜单。

    图片 10AL_pinmenu_2x.png

  3. 在地点的“Spacing to nearest
    neighbor”,点击侧边水平约束来选中它们。当选中时,它产生灰褐。

  4. 在左侧的框中填入0。
  5. 在Update Frame旁边的弹出美食做法中,选取Item of New Constraints。Add New
    Constraints 菜单看上去是如此的:

    图片 11BBUI_AL_textfieldconstraint_2x.png

  6. 在Add New Constraints菜单中,点击 Add 1
    Constraints开关。菜色场景顾客界面看上去会是如此:

    图片 12BBUI_AL_textfieldfinal_2x.png

检查点:在iOS模拟器中运作应用。通过增选Hardware > Rotate Left 和
Hardware > Rotate Right (或许 Command-Left Arrow 和 Command-Right
Arrow)来旋转模拟器。注意text
田野如何随着设备的主旋律和显示器尺寸的改观而变长和抽水。同临时候也只顾一下状态栏在景点方向的时候会熄灭。

点击text
田野(field)的在那之中,使用荧屏键盘输入文本(要是愿意,也能够经过甄选Hardware >
Keyboard > Connect Hardware Keyboard来行使计算机键盘)。

图片 13BBUI_sim_finalUI_2x.png

预览你的分界面

周期性地预览你的施用能够检查是还是不是负有的事都适合您的预想。你能够动用助编器(assistant
editor)来预览应用分界面,它是显得在主要编辑辑器旁边的多个扶植编辑器。

预览分界面

  1. 点击位于Xcode工具条中近乎Xcode右上角的Assistant按键,来展开助编器。

    图片 14assistant_editor_toggle_2x.png

  2. 假如您想要越来越大的干活空间,点击Xcode工具条中的Navigation和Utilities按键来折叠导航器和实用区(utility
    area)。

    图片 15navigator_utilities_toggle_on_2x.png

    您也得以折叠大纲视图。

  3. 在编辑器选拔器栏中,它出现在帮手工编织辑器的顶上部分,把助编器从Automatic切换来Preview >
    Main.storyboard。

    图片 16BBUI_assistant_editorselectorbar_2x.png图片 17BBUI_assistant_editorselectorbarpreview_2x.png

    正如你在助手工编织辑器中来看的那样,那么些预览看上去和画布差不离同样。但是,那并不代表没有新东西。画布和预览都展现了同样的荧屏尺寸和同等的可行性(肖像,portrait)。假设您想检查分界面是或不是自适应,你须求预览分化的显示屏尺寸和见仁见智方向。

    图片 18BBUI_preview_same_2x.png

  4. 想要预览风景(landscape)方向,点击预览尾部的转动开关。

    图片 19BBUI_preview_rotatebutton_2x.png

    很黯然,事情看起来不太对。Text
    田野(field)、label、以及button还是保持着同一的尺寸,与显示屏左上角的地点关系也从不改变动。那表示text
    田野先生不再从边到边的填充荧屏。

    图片 20BBUI_preview_rotated_2x.png

  5. 想要预览分化的荧屏尺寸,点击助编器尾部的加号开关,选取One plusSE。

    图片 21BBUI_preview_addSE_2x.png

再三回,Text
田野、label、以及button依然保持着雷同的尺码,与显示屏左上角的地方关系也未尝改变。但本次,text
田野先生延伸过了荧屏的左边缘。

图片 22BBUI_preview_small_2x.png

要想创制三个自适应的分界面,你要求实际表达分界面怎么着适应区别的显示屏尺寸。比方,当分界面界面旋转到风景(landscape)方向时,text
田野应该伸长。当界面突显在索爱 SE上时,text
田野同志应该裁减。使用自动布局(Auto
Layout)你可以轻巧的内定那一个项目标分界面准则。

(未完待续……)

总结

在本课中,你熟谙了Xcode
项指标从头到尾的经过,并应用个中的有个别工具来规划和平运动作了iOS
应用。你还创设了二个轻易易行的客户分界面。

固然如此那些类其他景观还一直不完成,可是基本的顾客界面已经有了。确定保证您的布局从一同先就健壮且可增添,这样就有了三个结实的底子。

注意

要想看本课完整的例子项目,下载这些文件并在Xcode中查看。Download File

(营造基础UI结束。前天是新的一章。)

打开Storyboard

您已预备好为利用制作storyboard。Storyboard
是顾客界面包车型大巴可视化描述,呈现有内容的荧屏和显示屏中间的调换。使用storyboard来编排驱动应用的流程或轶事。当创设时您方便的见到你创设的是何等,马上得到什么职业、什么不专门的学业的上报,并立时展现对客户界面包车型客车改观。

要打开storyboard

  • 在project navigator中,选用Main.storyboard。Xcode在Interface
    Builder中张开storyboard,它是可视化分界面编辑。它在编写区域中展现。Storyboard
    的背景是画布。画布是用来充足和摆布顾客分界面成分的。

Storybook 看上去像这些样子:

图片 23BBUI_storyboard_empty_2x.png

这两天,你的storyboard上唯有三个情景,它凸显应用的三个显示屏内容。场景左侧呈将来画布上的箭头表示storyboard的进口,它代表程序运营的时候这些情景会被加载。今后,你在画布上来看的那几个场地富含三个被视图调节器管理的十足视图。非常快你将学习到越来越多关于视图和视图调控器的准则。

当您在摩托罗拉7模拟器上运维你的行使时,这么些场合上的视图就是你在设施荧屏上看看的视图。不过画布上的景况不必然和模拟器显示器的尺寸一样。你能够在画布的最底层采取荧屏的尺码和样子。在这种状态下,画布要被安装为金立7 的画像方向,因为它和模拟器是一律的。

不畏画布彰显特定的设备和大势,但创设多少个自适应的分界面特别关键,叁个能够自动适应的分界面能够在其它设施任何方向上都会显现不错。当你付出分界面时,可以改动画布的视图,看一看分界面怎样适应不一样尺寸的显示器。

检查Auto Layout

只要您未有收获你想要的表现,使用电动布局调节和测量试验功能来扶持您。能够选拔Update
Frames按键和Resolve Auto Layout Issues菜单来寻访那一个成效。

图片 24BBUI_AL_resolvemenu_2x.png

假定接收错放视图的警告,使用Update
Frames按键。这些按键更新选中的视图及其全数子视图的frame。选用场景视图调节器来更新场景中的全体视图。你也足以通过按住Option再点击Update
Frame开关来仅更新选中的视图。

若果布局尚未遵照你的愿意行为,点击Resolve Auto Layout
Issues开关来开采三个调节和测量试验命令菜单。那一个菜单中的命令有三种情势。

一种影响当下相中的视图。另一种影响全数在视图调控器中的视图。纵然全体的授命都变灰,选择场景的视图调控器可能在那之中三个视图然后再另行张开菜单。

分选Reset to Suggested
Constraints让Xcode使用部分列可用的封锁来更新您的分界面。选用Clear
Constraints来移除客商分界面中的全数约束,然后依据后面包车型客车介绍来重新初始化约束。

图片 25BBUI_AL_resolvemenu_small_2x.png

营造基础UI

是时候要创设基础分界面了。你将为场景开端应用客商分界面,向您的伙食追踪应用,FoodTracker,增多新餐。

Xcode提供多少个指标库,那几个目的足以被增加到storyboard文件中。它们中的一局地是足以增进到客户分界面上的因素,比方开关和文件字段(text
田野s)。别的一些,举例视图调节器和手势识别器,定义了利用的行为,不过不会呈现在荧屏上。

在客户分界面上海展览中心示的因素被叫做视图。视图向客户展现内容。它们是创设客商分界面,並且以清晰、优雅、和卓有作用的措施突显内容的零件。视图有五颜六色有用的内建表现,包蕴把温馨浮现在荧屏上,以及对客户的输入作出响应。

iOS
中的全体视图对象都以UIView及其子类类型的。比很多UIView子类在展现和行事上都是可观定制化的。首先增多贰个text
filed(UITextFile), 四个UIView的子类,到你的光景中。Text
田野先生允许你输入同样文本,这么些文件用来命名餐名。

增多text 田野(field)参与景中

  1. 挑选 Editor > Canvas,确认保障Show Bounds
    Rectangle被选中。这些设置使Interface
    Builder给画布中具备的视图绘制了黄铜色的边框。非常多视图和调节器有着透明的背景,非常丑出它们的骨子里尺寸。当系统调动尺寸的时候,布局会生出错误,那会导致视图比你预期的要大还是小。启用那几个装置会赞助你准确的了然在视图层级结构中都时有发生了怎么着。
  2. 张开对象库。对象库位于Xcode左边实用工具区的上面。若是你未曾看出,在采取条上摘取左起第五个开关。(可能选拔,View >
    Utilities > Show Object Library。)

    图片 26object_library_2x.png

    列表呈现了每一种对象的名字、描述、以及可视化表示。

  3. 在指标库中,在过滤字段中输入text 田野先生可以便捷找到Text 菲尔德对象。

  4. 从指标库中拖拽一个Text Field对象到您的场景。

    图片 27BBUI_textfield_drag_2x.png

    如有须求,通过 Editor > Canvas > Zoom 来缩放。

  5. 拖拽text
    田野同志到显示屏的上半部,并和荧屏左缘对齐。当你看来中央和下图一律时停下拖拽:

    图片 28BBUI_textfield_place_2x.png

    葱绿的布局引导线帮忙您一直text
    田野(field)。布局指引线唯有在你拖拽只怕调解目的大小将近它们时才会显得;当你放开text
    filed时它们就未有了。

  6. 如有须求,点击text
    田野同志来展现调解大小的句柄。你通过拖拽客户界面成分的调动大小句柄来调动它的轻重,它们是出新在要素边线上的小的反动星型。通过挑选元平昔体现那个句柄。当前,这么些text
    田野同志已经被增选了,因为大家刚刚休息截至拖拽它。如若看到text
    filed像下图一律,那你就曾经筹算好调度它的尺寸了;若无,那就在画布上入选它。

    图片 29BBUI_textfield_resizehandles_2x.png

  7. 调动text
    田野左侧面缘直到你看看三条纵向的布局指引线:左缘指点线、水平中线指点线、以及右缘指引线。

    图片 30BBUI_textfield_finalsize_2x.png

    即令你有一个text
    田野(field)在万象中,那是尚未向客户表达要在这一个字段里面输入什么。使用text
    filed的占位文本来提醒顾客输入新餐的名字。

安装text filed的占位文本

  1. 保证text 田野同志被入选的情景,在实用工具区域(utility
    area)张开Attributes
    检查器。当您在检查器选择器条上点击左起第多个按键的时候,Attributes
    检查器就应时而生了。它让您编辑在storyboard中的对象属性。

    图片 31BBUI_inspector_attributes_2x.png

  2. 在Attribute检查器中,找到标识为Placeholder的字段,并且键入Enter meal
    name。

进而追究在揭露的利用中,任何能够被顾客看到的字符串(类似于text
田野(field)的占位符文本)都应当是本地化的。越来越多音信查阅 Build Apps for the
World。

  1. 按下回车键让新的占位符文本突显在text
    田野同志中。你的风貌应该看上去是如此的:

    图片 32BBUI_textfield_withplaceholder_2x.png

    当您编辑text 田野的性质的时候,你也足以编写当客商点击text
    田野先生时现身的种类键盘的脾气。

配置text field的键盘

  1. 担保text 田野先生如故被选中。
  2. 在Attribute检查器中,找到标识为Return
    Key的字段,并精选Done。那一个更改将让键盘上暗许的Return键改为Done键,那样会让顾客越来越透亮操作。
  3. 在Attributes检查器中,选用Auto-enable Return
    Key复选框(如有要求,向下滚动)。那几个改造能够使得在text
    田野同志输入文本从前客户不能够点击Done键,确定保障客户永久不会让餐名字为空。Attributes
    检查器未来浮现的键盘设置如下所示:

    图片 33BBUI_keyboardattributes_2x.png

    接下去,在气象的上部扩张贰个标签。标签是不互相的;它只是在客户分界面上静态的现实文本。为了帮扶掌握什么定义客商分界面成分之间的互动,你将安装这些标签展现顾客在text
    田野(field)中输入的文件。那是个好办法,它能够测验text
    filed获取了顾客的输入,并正确的拍卖了它。

增添label到您的现象

  1. 在指标库中,在过滤字段中键入label,飞快找到label对象。
  2. 从目的库中拖拽二个Label对象出席景中。
  3. 拖拽Label让它在text filed的上方,并让其的左边缘和text
    田野的左侧缘对齐。当你见到如下所示时,停止拖拽:

    图片 34BBUI_label_place_2x.png

  4. 双击这一个label,并键入Meal Name。

  5. 按下回车键让文本展现在label上。以往气象应该如下所示:

    图片 35BBUI_label_rename_2x.png

    近来加上二个按键加入景。开关是互为的,所以顾客能够点击它来触发一个你设置的动作。稍后,你将创设二个动作,把label的文本重设为暗中同意值。

累加二个按键加入景

  1. 在目的库中,在过滤字段中输入button来异常快找到Button对象。
  2. 从指标库中拖拽Button对象参预景中。3 拖拽button让它在text
    filed的下方,并让其的左边缘和text
    田野(field)的侧边缘对齐。当看到如下所示时,甘休拖拽:

    图片 36BBUI_button_place_2x.png

  3. 双击button,并键入Set Default Label Text.。

  4. 按下回车键让button突显新的文本。
  5. 输入文本后开关也许会发生位移,如有移动时,重置它。未来,你的气象应该看上去如下所示:

    图片 37BBUI_button_rename_2x.png

    询问您加多的因素是怎么样真切的配置在场合中是有实益的。查看大纲视图,来看什么客商分界面成分已经被抬高加入景中。

查阅大纲视图

  1. 在storyboard中,找到大纲视图开关。

    图片 38BBUI_outlineview_toggle_2x.png

  2. 固然大纲视图是折叠的,就点击开关进行它。供给时,可选择大纲视图按钮来折叠或实行大纲视图。

大纲视图,它出现在画布的侧面,让你见到storyboard中指标的层级表示。

你应该能够看出您刚增加的text
田野同志,label,以及button都列在层级中。不过为啥你加多的顾客分界面成分都嵌套在View之下呢?

视图不仅仅突显在显示屏上并对客商的输入作出反应,它们还能够看做此外视图的器皿。视图被安插在贰个被称为视图层的层级结构中。视图层定义了视图相对于别的视图的布局。在视图层中,视图中包涵的视图被称呼subview,而包蕴了八个视图的父视图被称之为这么些视图的superview。贰个视图能够有四个subviews,但是只可以有三个superview。

图片 39BBUI_outlineview_2x.png

日常,每种场景皆有协和的视图层。各样视图层的顶端都是内容视图(content
view)。在眼下的场所中,内容视图被喻为View,是以此视图调节器的最高层视图。text
filed、label、以及button都以这几个剧情视图的子视图。全部你放置在这几个现象中央广播台图都将是以此剧情视图的子视图(就算它们自个儿也能嵌套子视图)。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图