First iOS App_Configuring the View

视图配置Configuring the View

Xcode.app 提供一个所有对象的资源库，你可以添加到 storyboard 文件。其中一部分是属于一个视图的用户交互元素，比如：按钮、文本区。其他是更高一级的对象，比如：控制器、触摸手势。Xcode provides a library of objects that you can add to a storyboard file. Some of these are user interface elements that belong in a view, such as buttons and text fields. Others are higher-level objects, such as view controllers and gesture recognizers.

Hello World View Controller 场景已经包含了一个视图。现在，需要添加一个按钮、一个标签和一个文本区。然后，让它们和视图控制器进行关联，这样以来，这些元素就可以提供你想要的行为/功能。The Hello World View Controller scene already contains a view. Now you need to add a button, a label, and a text field. Then, you make connections between these elements and the view controller class so that the elements provide the behavior you want.

 

添加用户接口元素Add the User Interface Elements

你可以从资源库拖拽 UI元素 到帆布上的一个视图。之后，这些元素就会包含在视图中，你可以将它们移动位置或者改变尺寸等操作，使它们符合你的需求。You add user interface (UI) elements by dragging them from the object library to a view on the canvas. After the UI elements are in a view, you can move and resize them as appropriate.

To add the UI elements to the view and lay them out appropriately

等将文本区、标签、按钮元素添加好后，如果改变托付图层，你的项目会看起来像这样：After you add the text field, label, and button UI elements and make the recommended layout changes, your project should look similar to this:

你可能注意到当你添加这些元素到背景视图时， Xcode.app 插入项目到轮廓视图，并且被命名为约束（Constraints）。 Cocoa Touch 以一个自动图层系统为特色，是你可以对用户接口元素定义图层约束。约束代表了用户接口元素之间的关系，当其他视图被重设尺寸或者有一个定向的变化时，这些关系会影响到元素的位置和几何特性。不要对你添加了用户接口的视图的默认约束做改变。You probably noticed that when you added the text field, label, and button to the background view, Xcode inserted items in the outline view named Constraints. Cocoa Touch features an Auto Layout system that lets you define layout constraints for user-interface elements. Constraints represent relationships between user interface elements that affect how they alter their position and geometry when other views are resized or when there is an orientation change. You do not change the default constraints for the views you added to the user interface.

文本区还可以有一小部分其它改变，可以让它更贴近用户预期。第一，因为用户要输入它们的名字，你可以确保iOS建议用户键入的每个单词的大小写。第二，你可以确保键盘和用户文本区的配置是关联的，比如要输入姓名时不会数字键盘，而且键盘要有完成（Done） 按钮。There are a few other changes you can make to the text field so that it behaves as users expect. First, because users will be entering their names, you can ensure that iOS suggests capitalization for each word they type. Second, you can make sure that the keyboard associated with the text field is configured for entering names (rather than numbers, for example) and that the keyboard displays a Done button.

这是这些改变背后的原理：因为你在设计应用时已经明确文本区的信息类型，可以提前对其进行配置，这样，在运行时就会出现适当的键盘类型来适应用户的不同人物。你可以在属性检查器中改变这些配置。This is the principle behind these changes: Because you know at design time what type of information a text field will contain, you can configure it so that its runtime appearance and behavior are well suited to the user’s task. You make all of these configuration changes in the Attributes inspector.

To configure the text field

运行程序，确保你添加的 UI元素 和你预期的一致。如果你点击 Hello按钮，按钮会变成高亮的，如果你点击文本区内部，键盘会出现。此刻，虽然按钮没有做什么动作，标签还是空的，而且文本区键盘出现后却无法解除。要完成这些功能，需要在 UI元素 和视图控制器之间做适当的链接。这些链接接下来会讲到。Run your app in Simulator to make sure that the UI elements you added look the way you expect them to. If you click the Hello button, it should become highlighted, and if you click inside the text field, the keyboard should appear. At the moment, though, the button doesn’t do anything, the label remains empty, and there’s no way to dismiss the keyboard after it appears. To add this functionality, you need to make the appropriate connections between the UI elements and the view controller. These connections are described next.

Note: 因为你在模拟器运行应用，而不是在一个设备上，你可以通过点击元素灵活控制它们，正如在真机上用手触摸一样。Because you’re running the app in Simulator, and not on a device, you activate controls by clicking them instead of tapping them.

 

为按钮创建一个动作Create an Action for the Button

当用户激活一个 UI元素时，这个元素可以传递一个动作消息到一个对象，该对象知道如何表现相应的动作方法/类函数（例如：添加这个接触到用户接触列表）。这个交互是 目标-动作机制（）的一部分，是另一种 可可触摸（Cocoa Touch） 设计模式。When the user activates a UI element, the element can send an action message to an object that knows how to perform the corresponding action method (such as “add this contact to the user’s list of contacts”). This interaction is part of the target-action mechanism, which is another Cocoa Touch design pattern.

这次指导，当用户点击 Hello按钮时，你希望它发送一个 “改变问候语” 的消息到管理按钮的视图控制器（此时消息是动作，视图控制器是目标）。视图控制器响应这个消息，改变它管理的字符串（及时模型对象）。然后，视图控制器更新标签中的文本/文字来反射模型对象的取值的改变。In this tutorial, when the user taps the Hello button, you want it to send a “change the greeting” message (the action) to the view controller (the target). The view controller responds to this message by changing the string (that is, the model object) that it manages. Then, the view controller updates the text that’s displayed in the label to reflect the change in the model object’s value.

使用 Xcode.app ，你可以为 UI元素 添加动作，设置它的相应的动作方法，通过从帆布上的元素到源文件的属性部分控制拖拽（典型的，在一个视图控制器的实现文件中的类扩展）。 storyboard 会将你通过这种方式建立的连接进行存档。接下来，当应用加载 storyboard 时，连接就会恢复。Using Xcode, you can add an action to a UI element and set up its corresponding action method by Control-dragging from the element on the canvas to the appropriate part of a source file (typically, a class extension in a view controller’s implementation file). The storyboard archives the connections that you create in this way. Later, when the app loads the storyboard, the connections are restored.

To add an action for the button

 

当你从 Hello按钮 控制拖拽到 HelloWorldViewController.m 文件的类的扩展，你会完成两件事：通过 Xcode.app，你会添加相应的代码到视图控制器类（在 HelloWorldViewController.m）；建立一个按钮到视图控制器的连接。When you Control-dragged from the Hello button to the class extension in HelloWorldViewController.m file and configured the resulting action, you accomplished two things: You added, through Xcode, the appropriate code to the view controller class (in HelloWorldViewController.m), and you created a connection between the button and the view controller. Specifically, Xcode did the following things:

• 对于 HelloWorldViewController.m ，添加了如下动作方法的声明到类的扩展：To HelloWorldViewController.m, it added the following action method declaration to the class extension:

  - (IBAction)changeGreeting:(id)sender;

  并且添加了如下存根方法到实现区：and added the following stub method to the implementation area:

  - (IBAction)changeGreeting:(id)sender {

  }

  
  

  Note: IBAction 是一个特殊关键字，用于告诉 Xcode.app 将方法看成一个目标-电脑工作连接的动作方法。默认是 void 。IBAction is a special keyword that is used to tell Xcode to treat a method as an action for target-action connections. IBAction is defined to void.

  传递的参数 sender 在动作方法中对应到传递动作消息的对象。（本次指导中， sender　代表按钮实例对象）。The sender parameter in the action method refers to the object that is sending the action message (in this tutorial, the sender is the button).

• 它在按钮和视图控制器之间创建了一个连接。It created a connection between the button and the view controller.

接下来，你会创建视图控制器和其它两个 UI元素 的连接（就是说，标签、文本区与视图控制器的连接）。Next, you create connections between the view controller and the two remaining UI elements (that is, the label and the text field).

 

为文本区和标签创建出口Create Outlets for the Text Field and the Label

一个出口描述两个对象之间的链接。当你需要一个对象和另一个对象（这个对象包含如：文本区）交流时，你会把第二个对象设计成一个出口。当应用运行时，你在 Xcode.app 创建的出口会恢复，允许对象之间在运行状态进行交流。An outlet describes a connection between two objects. When you want an object (such as the view controller) to communicate with an object that it contains (such as the text field), you designate the contained object as an outlet. When the app runs, the outlet you create in Xcode is restored, allowing the objects to communicate with each other at runtime.

这次的指导，你希望视图控制器获得用户在文本区中输入的文本，然后将输入的内容显示在标签中。为了确保视图控制器可以与这些对象进行交流，你可以创建一个出口链接它们（文本区与视图控制器、标签与视图控制器的链接）。In this tutorial, you want the view controller to get the user’s text from the text field and then display the text in the label. To ensure that the view controller can communicate with these objects, you create outlet connections between them.

你为文本区和标签添加出口的步骤是和为按钮添加动作方法的步骤是类似的。在你开始前，确保 main sotryboard 文件是可以在帆布中看到的，并且 HelloWorldViewController.m 也是在助理编辑器中打开的。The steps you take to add outlets for the text field and label are very similar to the steps you took when you added the button’s action. Before you start, make sure that the main storyboard file is still visible on the canvas and that HelloWorldViewController.m is still open in the assistant editor.

To add an outlet for the text field

通过给文本区添加出口，可以完成两件事。通过这个程序：You accomplished two things by adding an outlet for the text field. Through this procedure:

• Xcode.app 添加相对应的代码到视图控制器的类 HellWorldViewController.m 文件。Xcode added appropriate code to the implementation file (HelloWorldViewController.m) of the view controller class.

  特别的，添加如下声明到类的扩展：Specifically, it added the following declaration to the class extension:

  @property (weak, nonatomic) IBOutlet UITextField *textField;

  
  

  Note: IBOutlet 是一个特殊关键字，用于告诉 Xcode.app 把此对象看成一个出口。实际上什么都没有定义，所以编译时没有作用。IBOutlet is a special keyword that is used only to tell Xcode to treat the object as an outlet. It’s actually defined as nothing so it has no effect at compile time.

• Xcode.app 建立一个从视图控制器到文本区的连接。Xcode established a connection from the view controller to the text field.

  通过建立连接，用户输入到文本区的文字就可以传到视图控制器。当 Xcode.app 处理 changeGreeting 方法的声明，文本区属性的声明的左边的圆圈会变成实心的，表明连接已经被建立。By establishing the connection between the view controller and the text field, the text that the user enters can be passed to the view controller. As Xcode did with the changeGreeting: method declaration, it indicates that the connection has been made by displaying a filled-in circle to the left of the text field declaration.

Note: Xcode.app 早前的版本需要在类的实现块中为每个你声明的属性添加 @synthesize ，实用的是控制-拖拽方式。因为编译器石洞同步了方法的入口，现在不需要做这一步了。你可以安全的删除它们。Earlier versions of Xcode add an @synthesize directive in the implementation block for each property you declare using the Control-drag approach. Because the compiler automatically synthesizes accessor methods, these directives are unnecessary. You may safely delete them.

现在，为标签添加一个出口并配置它的连接。建立一个标签和视图控制器之间的连接，允许视图控制器用一个字符串改标签的内容。步骤和为文本区添加出口是一样的，但是需要适当改变配置（确保 HelloWorldViewController.m 在助理编辑器中可见）。Now add an outlet for the label and configure the connection. Establishing a connection between the view controller and the label allows the view controller to update the label with a string that contains the user’s text. The steps you follow for this task are the same as the ones you followed to add the outlet for the text field, but with appropriate changes to the configuration. (Make sure that HelloWorldViewController.m is still visible in the assistant editor.)

To add an outlet for the label

到现在，你创建了总共 3 个连接到视图控制器：At this point in the tutorial, you’ve created a total of three connections to your view controller:

• 一个按钮的动作连接An action connection for the button

• 一个文本区的出口连接An outlet connection for the text field

• 一个标签的出口连接An outlet connection for the label

你可以在连接检查器中对这些连接做改变。You can verify these connections in the Connections inspector.

To open the Connections inspector for the view controller

选中一个对象，Xcode 会把与它相关的连接都显示在连接检查器里（此例中，选中的对象可以是视图控制器）。在你的工作空间窗口，你可以看到如下情况：In the Connections inspector, Xcode displays the connections for the selected object (in this case, the view controller). In your workspace window, you should see something like this:

你会看到一个视图控制器和它的视图之间的连接，除此之外，还有你刚刚建立的 3 个连接。Xcode.app 会自动创建视图控制器和它的视图之间的连接；你不需要对它做存取。You’ll see a connection between the view controller and its view, in addition to the three connections you created. Xcode provides this default connection between the view controller and its view; you do not have to access it in any way.

 

做文本区的代理的连接Make the Text Field’s Delegate Connection

你有不只一个连接：你需要连接文本区到一个你指定作为它的代理/委托的对象。这次指导，你用视图控制器作为文本区的代理/委托。You have one more connection to make in your app: You need to connect the text field to an object that you specify as its delegate. In this tutorial, you use the view controller for the text field’s delegate.

你需要一个指定的文本区的代理对象。因为当用户点击键盘的 Done 按钮，文本区发送一个消息到它的委托（回想一下，代理是一个对象，对另一个对象的利益/对象起作用）。接下来，用响应的代理方法结合这个消息解除键盘。You need to specify a delegate object for the text field. This is because the text field sends a message to its delegate when the user taps the Done button in the keyboard (recall that a delegate is an object that acts on the behalf of another object). In a later step, you’ll use the method associated with this message to dismiss the keyboard.

确保 storyboard 文件时在帆布打开的。Make sure that the storyboard file is open on the canvas. If it’s not, select MainStoryboard.storyboard in the project navigator.

To set the text field’s delegate

 

准备好应用是可用的/可接近的Prepare the App for Accessibility

iOS 操作系统提供一个主功能，是应用对所有用户都是可用的，包括那些视觉、听觉、肢体残疾的人。通过使你的应用可用，你将应用开给更多人，否则，就不会被用了。The iOS operating system provides a host of features that help make apps accessible to all users, including those with visual, auditory, and physical disabilities. By making your app accessible, you open it up to millions of people who would otherwise not be able to use it.

一个主要的可用的特征是画外音，苹果公司是 屏幕-阅读 技术的创始。用户不看屏幕，也可以导航和控制应用程序的一大部分（功能和逻辑操作）。通过触摸一个控制或者其它对象在用户接口，可以明白都有些什么，可以做什么，会发生什么变化。A major accessibility feature is VoiceOver, Apple’s innovate screen-reading technology. With VoiceOver, users can navigate and control the parts of an app without having to see the screen. By touching a control or other object in the user interface, users can learn where they are, what they can do, and what will happen if they do something.

你可以在你的用户接口添加若干可能的属性到任意视图。这些属性包括当前视图的属性值（如：文本区的文字）、标签、暗示/线索、数字特点等。对于这个应用，你将会添加一个线索/暗示到文本区。You can add several accessibility attributes to any view in your user interface. These attributes include the current value of the view (such as the text in a text field), its label, a hint, and a number of traits. For the HelloWorld app, you are going to add a hint to the text field.

Note: 任何你添加的可用的文字都需要做本地化。在应用设计（App Design）中的 Internationalize Your App 会告诉你怎么做。Any accessibility text that you add should be localized. To learn how to do this, see Internationalize Your App in App Design.

To add an accessibility hint

 

测试应用Test the App

点击运行，测试应用。Click Run to test your app.

你可以看到点击按钮时按钮会变成高亮状态。点击文本区内部，键盘会出现，并且可以输入文字。然而，没有办法解除键盘。要做到解除键盘，需要完成相关的代理方法。下一章会学到。现在退出模拟器。You should find that the Hello button becomes highlighted when you click it. You should also find that if you click in the text field, the keyboard appears and you can enter text. However, there’s still no way to dismiss the keyboard. To do that, you have to implement the relevant delegate method. You’ll do that in the next chapter. For now, quit Simulator.

 

扼要重述Recap

当你创建帆布上的视图控制器和助理编辑器中的类扩展（在实现文件中，例如本例的 HelloWorldViewController.m ）之间的对应的应用连接时，还要修改实现文件，支持出口和动作方法的具体方法。When you created the appropriate connections between the view controller on the canvas and the class extension in the implementation file (that is, HelloWorldViewController.m) in the assistant editor, you also updated the implementation file to support the outlets and the action.

你不需要用 Xcode 的功能，当你通过 控制-拖拽 创建连接时，会自动添加代码。取而代之，你可以在类的扩展中手写属性和方法声明的代码，或者在头文件中添加公共的属性和方法，然后做连接。典型的，当所有交给 Xcode.app 完成，你有很少（并且几乎没有敲代码）。You don’t have to use the Xcode feature that automatically adds code when you establish a connection by Control-dragging from the canvas to a source file. Instead, you can write the property and method declarations in the class extension or (for public properties and methods) the header file yourself, and then make the connections as you did with the text field’s delegate. Typically, though, you make fewer mistakes (and have less typing to do) when you let Xcode do as much of the work as it can.