第一章

在第一章中,我们会创建一个Quiz的例子。在这个例子中,用户可以看到一个问题,当用户点击show answer的时候会显示答案,
当用户点击show question的时候会显示下一个问题;


几乎每一个ios应用都需要回答2个基本问题:
1,如何创建对象,并进行合理地配置
2,如果处理用户交互


创建一个xcode项目
点击file菜单中New -> Project..., 选择Empty Application;
You are using the Empty Application template because it generates the least amount of boilerplate code.
Too much boilerplate gets in the way of learning how things work.
使用Empty Application的原因是它会生成最少的模板代码。


This book was created for Xcode 5.0.2. The names of these templates may change with new Xcode
releases. If you do not see an Empty Application template, use the simplest-sounding template. Or visit
the Big Nerd Ranch forum for this book at forums.bignerdranch.com for help working with newer
versions of Xcode.
这本书基于xcode 5.0.2,如果有更新的版本,那么就使用看上去最简单的模板。


Click Next and, in the next sheet, enter Quiz for the Product Name (Figure 1.3). The organization name
and company identifier are required to continue. You can use Big Nerd Ranch and com.bignerdranch.
Or use your company name and com.yourcompanynamehere.
在下一个表格中,设置项目的名字为Quiz,设置组织的名字和公司的别名;


In the Class Prefix field, enter BNR and, from the pop-up menu labeled Devices, choose iPhone. Make
sure that the Use Core Data checkbox is unchecked.
设置类前缀的名字为BNR,


点击下一步创建该项目。


Take a look at the lefthand side of the workspace window. This area is called the navigator area, and
it displays different navigators – tools that show you different parts of your project. You can choose
which navigator to use by selecting one of the icons in the navigator selector, which is the bar just
above the navigator area.
让我们看下工作区左边区域,它被称为导航区,导航区的上部的导航栏可以选择不同的导航项目。


The navigator currently open is the project navigator. The project navigator shows you the files that
make up your project (Figure 1.5). You can select a file to open it in the editor area to the right of the
navigator area.
目前打开的导航项目是项目导航,它显示了项目中的所有文件,可以单击其中一个文件,它会在编辑区域被打开


The files in the project navigator can be grouped into folders to help you organize your project. A few
groups have been created by the template for you; you can rename them whatever you want or add new
ones. The groups are purely for the organization of files and do not correlate to the filesystem in any
way.
项目导航里的文件可以grouped into不同的文件夹中;一些文件夹已经在模板中创建了,你可以根据需要修改这些
文件夹的名字或者创建新的。这些文件夹仅仅用于组织文件,并不会修改底层文件系统。


Figure 1.5 Quiz application’s files in the project navigator




In the project navigator, find the files named BNRAppDelegate.h and BNRAppDelegate.m. These are the
files for a class named BNRAppDelegate. The Empty Application template created this class for you.
在导航区域,你可以找到BNRAppDelegate.h和BNRAppDelegate.m,它们是BNRAppDelegate类相关的文件;
Empty Application项目模板创建了这些文件。


A class describes a kind of object. iOS development is object-oriented, and an iOS application consists
primarily of a set of objects working together. When the Quiz application is launched, an object of
the BNRAppDelegate kind will be created. We refer to a BNRAppDelegate object as an instance of the
BNRAppDelegate class.


ios开发基于object-c,它是一种面向对象的语言。


You will learn much more about how classes and objects work in Chapter 2. Right now, you are going
to move on to some application design theory and then dive into development.


Model-View-Controller
Model-View-Controller, or MVC, is a design pattern used in iOS development. In MVC, every object
is either a model object, a view object, or a controller object.
ios编程是基于mvc设计模式,在mvc中,所有的对象是model,view或者controller中的一种;


• View objects are visible to the user. Examples of view objects are buttons, text fields, and sliders.
View objects make up an application’s user interface. In Quiz, the labels showing the question and
answer and the buttons beneath them are view objects.
view对象负责显示,比如button、text filed、slider;


• Model objects hold data and know nothing about the user interface. In Quiz, the model objects
will be two ordered lists of strings: one for questions and another for answers.
Usually, the model objects are modeling real things from the world of the user. For example, when
you write an app for an insurance company, you will almost certainly end up with a custom model
class called InsurancePolicy.
Model对象用户保存数据,它并不需要关心用户界面。model也可以是真实的事物,比如一个保险公司的程序,
它的数据模型可以是保险单。


• Controller objects are the managers of an application. Controllers configure the views that the
user sees and make sure that the view and model objects keep in sync.
controller是应用的管理者;它用于配置视图,并且同步视图和数据模型。


In general, controllers typically handle “And then?” questions. For example, when the user selects
an item from a list, the controller determines what that user sees next.
Notice that the models and views do not talk to each other directly; controllers sit squarely in the
middle of everything, receiving messages from some objects and dispatching instructions to others.
controller是视图和模型的中介。(但有些情况下,并不是一定要创建controller对象?)


Figure 1.6 shows the flow of control in an application in response to user input, such as the user
tapping a button.
Figure 1.6 MVC pattern


Designing Quiz
You are going to write the Quiz application using the MVC pattern. Here is a break down of the objects
you will be creating and working with:
• 4 view objects: two instances of UILabel and two instances of UIButton
• 2 controller objects: an instance of BNRAppDelegate and an instance of BNRQuizViewController
• 2 model objects: two instances of NSMutableArray
使用mvc的方式创建Quiz对象:
1,view:UILabel和UIButton
2, controller:BNRAppDelegate和BNRQuizViewController
3, model:2个NSMutableArray实例


These objects and their relationships are laid out in the object diagram for Quiz shown in Figure 1.7.


Creating a View Controller
The BNRAppDelegate class was created for you by the Empty Application template, but you will have to
create the BNRQuizViewController class. We will talk more about classes in Chapter 2 and more about
view controllers in Chapter 6. For now, just follow along.
From the File menu, select New → File.... A sheet will slide down asking what type of file you would
like to create. On the lefthand side under the iOS section, select Cocoa Touch. Then choose Objective-C
Class and click Next.
New->file...,选择Cocoa Touch -> Object-C -> next 创建一个controller对象;


Building an Interface
In the project navigator, find the class files for BNRQuizViewController. When you created this class,
you checked the box for With XIB for user interface, so BNRQuizViewController came with a third
class file: BNRQuizViewController.xib. Find and select BNRQuizViewController.xib in the project
navigator to open it in the editor area.
在我们创建BNRQuizViewController的时候,选择了XIB方式创建视图,所以会新创建一个BNRQuizViewController.xib
的文件。点击这个文件在编辑区域打开;


When Xcode opens a XIB (pronounced “zib”) file, it opens it with Interface Builder, a visual tool where
you can add and arrange objects to create a graphical user interface. In fact, XIB stands for XML
Interface Builder.
xib文件会在Interface Builder中打开;xib的全称为xml Interface Builder;


In many GUI builders on other platforms, you describe what you want an application to look like and
then press a button to generate a bunch of code. Interface Builder is different. It is an object editor: you
create and configure objects, like buttons and labels, and then save them into an archive. The archive is
the XIB file.
Interface Builder其实就是xml编辑器,类似于android中的布局构造器。


Interface Builder divided the editor area into two sections: the dock is on the lefthand side and the
canvas is on the right.
interface builder分为2个区域:dock和canvas;


The dock lists the objects in the XIB file either as icons (icon view) or in words (outline view). The
icon view is useful when screen real estate is running low. However, for learning purposes, it is easier
to see what is going on in the outline view.


If the dock is in icon view, click the disclosure button in the bottom lefthand corner of the canvas to
reveal the outline view (Figure 1.11).
dock区域可以以outline/icon的方式显示所有的view对象,在dock的左下的按钮可以进行2者之间的切换;




The outline view tells you that BNRQuizViewController.xib contains three objects: two placeholders
and a View. Ignore the placeholders for now; you will learn about them later.




The View object is an instance of UIView. This object forms the foundation of your user interface and
you can see it displayed on the canvas. The canvas shows how your user interface will appear in the
application.
在outline中显示的view对象是构成用户界面的基础,你可以直接在canvas中看到结果(所见即所得)


Click on the View object in the document outline to select it in the canvas. You can move the view by
dragging it around. Note that moving the view does not change anything about the actual object; it just
re-organizes the canvas. You can also close the view by clicking the x in its top left corner. Again, this
does not delete the view; it just removes it from the canvas. You can get it back by selecting it in the
outline view.
view对象可以从canvas中移除,但对程序没有任何影响(view对象不会被删除)


Right now, your interface consists solely of this view object. You need to add four additional view
objects for Quiz: two labels and two buttons.
现在可以在view中添加buttons和labels了。


Creating view objects
To add these view objects, you need to get to the object library in the utility area.
为了添加视图对象,你需要在utility区域得到对象库;


The utility area is to the right of the editor area and has two sections: the inspector and the library. The
top section is the inspector, which contains settings for the file or object that is selected in the editor
area. The bottom section is the library, which lists items that you can add to a file or project.
utility区域分为inspector和library区域,inspector拥有编辑区域里面对象或者文件的设置,library区域有可以添加到
文件和项目中的item;


At the top of each section is a selector for different types of inspectors and libraries (Figure 1.13).
From the library selector, select the tab to reveal the object library.
每个区域的上部都有一个selector,用于选择不同类型的inspector和library;现在选择object library;


The object library contains the objects that you can add to a XIB file to compose your interface.


Find the Label object. (It may be right at the top; if not, scroll down the list or use the search bar
at the bottom of the library.) Select this object in the library and drag it onto the view object on the
canvas. Position this label in the center of the view, near the top. Drag a second label onto the view and
position it in the center, closer to the bottom.


Next, find Button in the object library and drag two buttons onto the view. Position one below each
label.


You have now created four view objects and added them to BNRQuizViewController’s user interface.
Confirm this in the document outline.
从object library中选择button和label对象。


Configuring view objects
Now that you have created the view objects, you can configure their attributes. Some attributes, like
size, position, and text, can be changed directly on the canvas. Others must be changed in the attributes
inspector, a tool that you will use shortly.
现在你可以配置view对象的属性,一些属性你可以直接在canvas中修改,比如size、position、text; 一些对象就需要
在对象的attributes inspector中修改。


You can resize an object by selecting it on the canvas or in the outline view and then dragging its
corners and edges in the canvas. Resize all four of your view objects to span most of the window.
你也可以在inspector中设置button的背景,label的文字对齐方式。




NIB files
At this point, you may be wondering how these objects are brought to life when the application is run.
When you build an application that uses a XIB file, the XIB file is compiled into a NIB file that is
smaller and easier for the application to parse. Then the NIB file is copied into the application’s
bundle. The bundle is a directory containing the application’s executable and any resources the
executable uses.
你现在可能想知道应用是如何显示在xib中创建的对象的。当程序编译的时候,xib文件会被编译成NIB类型的
文件,它更小以及更容易被程序解析。 然后NIB文件会被拷贝到程序的bundle中,bundle是一个目录用于保存
程序的executable以及executable所使用的资源。


At runtime, the application will read in, or load, the NIB file when its interface is needed. Quiz only
has one XIB file and thus will have only one NIB file in its bundle. Quiz’s single NIB file will be
loaded when the application first launches. A complex application, however, will have many NIB files
that are loaded as they are needed. You will learn more about how NIB files are loaded in Chapter 6.
在程序运行时,应用会在界面需要显示的时候读取并加载对应的NIB文件;Quiz仅仅只有一个xib,所以仅仅只有一个
NIB文件放在bundle中。Quiz的唯一NIB文件会在程序第一次启动的时候被加载。在更复杂的应用中,NIB文件仅仅会在
需要显示的时候被加载。


Your application’s interface now looks like it should. But to begin making it functional, you need to
make some connections between these view objects and the BNRQuizViewController that will be
running the show.
需要在view对象和BNRQuizViewController之间建立连接。


Making connections
A connection lets one object know where another object is in memory so that the two objects can
communicate. There are two kinds of connections that you can make in Interface Builder: outlets and
actions. An outlet points to an object. (If you are not familiar with “pointers,” you will learn about
them in Chapter 2.) An action is a method that gets triggered by a button or some other view that the
user can interact with, like a slider or a picker.
可以建立2种对象之间的连接:action和outlet; outlet指向另外一个对象,action用于响应view的操作。
(NIB文件就是编译好的2进行文件,UIViewObject的loadView会默认调用相关的NIB文件并创建view的实例。)


Let’s start by creating outlets that point to the instances of UILabel. Time to leave Interface Builder
briefly and write some code.


Declaring outlets
In the project navigator, find and select the file named BNRQuizViewController.m. The editor area will
change from Interface Builder to Xcode’s code editor.


In BNRQuizViewController.m, delete any code that the template added between the @implementation
and @end directives so that the file looks like this:


#import "BNRQuizViewController.h"
@interface BNRQuizViewController ()
@end


@implementation BNRQuizViewController
@end




Next, add the following code. Do not worry about understanding it right now; just get it in.


#import "BNRQuizViewController.h"
@interface BNRQuizViewController ()
@property (nonatomic, weak) IBOutlet UILabel *questionLabel;
@property (nonatomic, weak) IBOutlet UILabel *answerLabel;
@end
@implementation
@end


Notice the bold type? In this book, code that you need to type in is always bold; the code that is not
bold provides context for where to add the new stuff.
在本书中,所有需要格外输入代码的都以加粗的方法显示。


In this new code, you declared two properties. You will learn about properties in Chapter 3. For now,
focus on the second half of the first line.


@property (nonatomic, weak) IBOutlet UILabel *questionLabel;
This code gives every instance of BNRViewController an outlet named questionLabel, which it can
use to point to a UILabel object. The IBOutlet keyword tells Xcode that you will set this outlet using
Interface Builder.
定义的property会在所有的BNRViewController实例中创建一个名为questionLabel的outlet, 用于指向一个UILabel对象。
IBOutlet关键字告诉Xcode需要使用interface Builder设置outlet。


Setting outlets
In the project navigator, select BNRQuizViewController.xib to reopen Interface Builder.
You want the questionLabel outlet to point to the instance of UILabel at the top of the user interface.
在项目导航区,选择BNRQuizViewController.xib在interface builder中打开;
你想要将questionLabel这个outlet指向interface builder中的UILabel,以使得它们建立关联。(findViewById)


In the dock, find the Placeholders section and the File's Owner object. A placeholder stands in for
another object in the running application. In your case, the File's Owner stands in for an instance
of BNRQuizViewController, which is the object responsible for managing the interface defined in
BNRQuizViewController.xib.
BNRQuizViewController会成为xib文件的file owner, 负责管理在xib文件中定义的接口。


In the dock, right-click or Control-click on the File's Owner to bring up the connections panel
(Figure 1.17). Then drag from the circle beside questionLabel to the UILabel. When the label is
highlighted, release the mouse button, and the outlet will be set.


















1, 在新版本的xcode中,前缀名字是否无法设置
2,为什么不使用User Core Data;
3, 修改导航区的文件夹名字不会改动底层的文件系统
4,UIViewController是属于mvc中的controller吗?
5,程序启动过程分析 main -> uiApplication -> appDelegate -> kick off message -> selector in delegate
6,android加载一个xml文件的过程分析;
7,ios初始化outlet的方法; findViewById in android
8,使用NIB时,view初始化视图的方法,setContentView in android

你可能感兴趣的:(第一章)