Your first iOS app(4)——Designing a User Interface

发布时间:2020-08-10 21:09:09 作者:三无青年
来源:网络 阅读:320

Designing a User Interface

设计一个用户界面


视图(Views)是构建你的用户界面的构建块。理解如何使用视图来清晰、优雅和有效的来呈现你的内容是非常重要的。创建一个能有效地展示你的app的内容的用户界面是构建成功的app至关重要的。在本章中,你将学到在故事板中创建和管理视图来定义的你界面。



The View Hierarchy

视图层次结构

视图不仅是在屏幕上显示自己并对用户的输入做出反应,他们也作为其他视图的容器。因此,app中的视图通过层次结构进行排列,叫做视图的层次结构。视图的层次结构定义了相对于其他视图的布局视图。在这个结构层次中,视图实例封装了另一个视图被称为子视图,且俯视图封装的视图被称为父视图。及时一个视图实例能有多个子视图,但它只能有一个父视图。

视图层次结构的最顶层是窗口对象。代表的是 UIWindow 类的实例,一个窗口是作为基本内容的容器,基本内容使你添加的要显示在屏幕上的试图对象。本身来说,窗口不能显示任何内容。想要显示内容,你要添加内容视图(它的子视图层次)。

内容视图和它的子视图对于用户是可见的,内容视图必须插入到窗口视图的层次结构中。。当你使用故事板,这个位置是自动为你配置的。应用程序对象加载故事板,创建相关的视图控制器类的对象,为每个视图控制器的视图层次内容进行解码,然后将初始化的视图控制器的内容视图添加到窗口中。你将在下一章学习到更多关于管理视图控制器的知识。现在,你将关注如何在故事板中创建一个单一的视图控制器的层次结构。



Building an Interface Using Views

使用视图构建一个界面

当你设计app的时候,知道要达到某种目标需要使用何种视图是非常重要的。举个例子,如果想要看到用户输入的文本的视图,例如文本字段,你想要使用显示静态文本,例如标签。App使用UIKit视图来绘制是非常容易创建的,因为你能快速的组装基本界面。UIKit视图对象是UIView类的实例对象,或其子类的实例对象。UIKIt框架提供很多类型的视图来帮助呈现和组织数据。

虽然每个视图有他自己独特的功能,UIKit视图可以分为七个通用的类:


类别

目的

例子


内容

显示一个特定类型的内容,比如图像或文本。

图像视图,标签

集合

显示集合或一组视图

集合视图、表格视图

控制

执行操作或显示信息

按钮、滑块、开关

工具条

导航,或执行操作

工具条、导航条、选项条

输入

接收用户输入的文本

搜索条,文本视图

Containers容器

作为其他视图的容器

View, scroll view视图、滚动视图


模态

中断app的正常流程来执行用户的某种操作。

动作表、警告视图


你可以使用界面构建器(Interface Builder,IB)来灵活的装配视图。IB提供一个具有标准视图、控制、以及其他对象的库,以便你在构建界面时使用。在从库里拖拽这些对象到画布中,然后在你想要的任意位置释放他们。接下来,在故事板上保存它们之前使用检查器来设置这些对象。你可以立刻看到结果,不需要编写任何代码,勾结并运行app。

UIKit框架提供多种标准视图来显示多种类型的内容,但你也可以通过子类化UIView(或者它的子类)自己定义视图。一个自定义的视图是UIView类的子视图,你要自己来处理所有绘制和事件处理任务。在本教程中,你将用不到自定义视图,但是你能够在View Programming Guide for iOS中的“Defining a Custom View”学习到更多关于实现自定义视图的内容。


Use Storyboards to Lay Out Views

使用故事板来展示视图

在图形环境中,你使用故事板来展示你的视图层次。故事板提供一个直观、可视化的方式来操作视图并且构建你的界面。

如你在第一个教程中看到的,故事板是由场景组成的,并且每个场景有关联的视图层次。你拖拽一个对象库里的视图并安防在故事板的场景中来为场景视图层次自动添加视图。视图的在视图层次中位置是有你放置它的位置决定的。在你添加一个视图到你的场景中后,你能够可以在画布中调整、操作、配置和移动它。

画布上还显示在你的界面上的视图对象接口的大纲视图。大纲(outline view)——出现在画布的左侧——让你看到你的故事板中的对象的层次表示。


你在可视化故事板场景中创建的视图层次是一组灵活的收缩包装(shrink wrapped)的Objective-C对象。在运行的时候,这些收缩包装的对象是解开的。最终得到一个相关类的实例的层次,这些层次通过使用在工具区里的各类检查器来设置可视化属性。


Use Inspectors to Configure Views

使用检查器来配置视图

When working with views in a storyboard, the inspector pane is an essential tool. 当你在故事板中操作视图的时候,检查器嵌板( inspector pane)是必不可少的工具。检查器嵌板出现在工具区对象库的上面。


每个检查器为你的界面元素提供重要的配置选项。当你在故事板中选择一个对象的时候,比如视图,你可以使用任何一个检查器来为对象定制不同的属性。

文件. 允许你指定关于故事板的通用信息。

快速帮助。提供关于对象的有用的文档。

标识. 允许你为对象指定自定义类和指定它可访问的属性。

属性. 允许你自定义对象可视化的属性。

Size尺寸.允许你指定一个对象的尺寸和自动布局属性。

Connections链接.允许你在你的界面和源代码之间建立链接。


在第一个教程中你已经开始使用属性检查来工作了。在接下来的教程中你将继续使用这些检查器来设置视图和故事板中的其他对象。特别是,你将使用属性检查器来配置你的视图,标识检查器用来配置你的视图控制器,还有连接检查器来创建视图和视图控制器之间的链接。


Use Auto Layout to Position Views

使用自动布局来定位视图

当你开始在你的故事板中定位视图的时候,你需要考虑各种各样的情况。iOS应用程序运行在多种不同的设备上,不同的屏幕大小、不同的放下以及不同的语言。作为设计静态界面的替代,你需要它是动态的,且无缝的相应设备屏幕、设备方向、本地化以及度量(metrics)的改变。

为了帮助你使用视图来创建通用的界面,Xcode提供了一个称为自动布局(Auto Layout)的工具。自动布局是一个表示视图和app用户界面之间关系的系统。自动布局让你依照独特视图的约束或视图集合之间来定义这些关系。

自动布局菜单,它在你画布右下角区域,有四个部分。你使用这个菜单在画布上添加各种视图的约束类型,、解决布局的问题、并确定确定约束修改行为。


你将在第二个教程简单的使用自动布局来添加对ToDoList应用程序对横屏的支持。

App Development Process

Defining the Interaction

Copyright 2014 Apple Inc. All rights reserved. Terms of Use | Privacy Policy | Updated: 2013-10-22



推荐阅读:
  1. Your Second iOS App(3)—Designing the Model Layer
  2. Your Second iOS App(1)—Introduce

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

ios 帮助文档 pp ce

上一篇:宝付敲写Java怎么自学找工作

下一篇:JavaScript 之 有关判断的方法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》