iOS组件及应用.pptx

1、iOS基本组件及应用程序,开发环境及开发工具 创建第一个iOS应用程序UIView与视图视图“始祖”UIView 标签控件和按钮控件TextField 控件和 TextView 控件开关控件、滑块控件和分段控件,iOS基本组件及应用程序,iOS基本组件及应用程序,UIView与视图网页控件 WebView 屏幕滚动控件 ScrollView 等待相关的控件与进度条 警告框和操作表 工具栏和导航栏 选择器 表视图,开发环境及开发工具,iOS开发工具主要是Xcode。自从Xcode 3.1发布以后,Xcode就成为iPhone软件开发工具包的开发环境。Xcode 可以开发Mac OS X和iOS应

2、用程序,其版本是与SDK相互对应的。例如,Xcode 3.2.5与iOS SDK 4.2对应,Xcode 4.1 与iOS SDK 4.3对应,Xcode 4.2与iOS SDK 5对应,Xcode 4.5和Xcode 4.6与iOS SDK 6对应,Xcode 5与iOS SDK 7 对应,Xcode 6与iOS SDK 8 对应。,开发环境及开发工具,在Xcode 4.1之前,还有一个配套使用的工具Interface Builder,它是Xcode套件的一部分,用来设计窗体和视图,通过它可以“所见即所得”地拖曳控件并定义事件等,其数据以XML的形式被存储在xib文件中。在Xcode 4.1

3、 之后,Interface Builder成为了Xcode的一部分,与Xcode集成在一起。,开发环境及开发工具,打开Xcode 5工具,看到的主界面如图1所示。该界面主要分成3个区域,1号区域是工具栏,其中的按钮可以完成大部分工作。2号区域是导航栏,主要 是对工作空间中的内容进行导航。在导航栏上面还有一排按钮,默认选中的是“文件”导航面板。关于各按钮的具体用法,我们会在以后用到的时候详细介绍。,开发环境及开发工具,开发环境及开发工具,在选中导航面板时,导航栏下面也有一排按钮。这是辅助按钮,它们的功能都与该导航面板的 内容相关。对于不同的导航面板,这些按钮也是不同的。图1所示的3号区域是代码编

4、辑区,我们的编码工作就是在这里完成的。其背景颜色可以在Xcode的使用偏好(该功能可以在下图所示菜单栏中的苹果图标中找到)中设置。,第一个iOS应用程序,在学习之初,我们有必要对使用Xcode创建iOS工程做一个整体概览,这里我们通过创建一个基于故事板的 HelloWorld iPhone工程来详述其中涉及的知识点。实现HelloWorld应用后,会在界面上展示字符串Hello World(效果如图2-1所示),其中主要包含Label(标签)控件和ImageView(图片视图)。,第一个iOS应用程序,启动Xcode,然后点击FileNewProject菜单,在打开的Choose a temp

5、late for your new project界面中选择Single View Application工程模板(如图2-2所示)。接着点击Next按钮,随即出现图2-3所示的界面。,第一个iOS应用程序,第一个iOS应用程序,第一个iOS应用程序,这里我们可以按照提示并结合自己的实际情况和需要输入相关内容。下面简要说明图2-3中的选项。Product Name。工程名字。Organization Name。组织名字。Company Identifier。公司标识(很重要)。一般情况下,这里输入的是公司的域名(如com.51work6),这类似于Java中的包命名。Bundle Identi

6、fier。捆绑标识符(很重要)。该标识符由Product Name+Company Identifier构成。因为在App Store发布应用的时候会用到它,所以它的命名不可重复。Class Prefix。类的前缀。为生成的类加前缀(如XZYViewController)。,第一个iOS应用程序,Devices。选择设备。可以构建基于iPhone或iPad的工程,也可以构建通用工程。通用工程是指一个工程在 iPhone和iPad上都可以正常运行。设置完相关的工程选项后,点击Next按钮,进入下一级界面。根据提示选择存放文件的位置,然后点击Create 按钮,将出现如图2-4所示的界面。,第一个

7、iOS应用程序,第一个iOS应用程序,在右下角的对象库中选择Label控件,将其拖曳到View设计界面上并调整其位置。双击Label控件,使其处于编辑状态(也可以通过控件的属性来设置),在其中输入Hello World,如图2-5所示。,第一个iOS应用程序,第一个iOS应用程序,接下来我们添加ImageView到View的设计界面,从右下角的对象库中选择Image View控件,将其拖曳到View 上,如图2-6所示。ImageView是图片的容器,它的大小应该跟原始图片是一样的,否则都会比率失调或者失真,因此我们需要设置它的尺寸,在View设计视图中选择ImageVew,然后再选中右边的尺

8、寸检查器,按照如图2-7所示的尺寸设置,其中X和Y代表坐标,Width和Height代表宽和高。,第一个iOS应用程序,第一个iOS应用程序,第一个iOS应用程序,设置好ImageView尺寸后,本例可以设置它所关联的图片,但是现在你的工程中是没有图片的,因此需要通 过Xcode将图片添加到工程中。具体步骤如图2-8所示,右键选择Supporting Files组,选择菜单中的Add Files to“HelloWorld”.,弹出选择文件对话框,如图2-9所示,在Destination中选中Copy items into destination groups folder(if needed

9、),这样可以将文件复制到我们的工程目录中,在Add to targets中选择HelloWorld。,第一个iOS应用程序,第一个iOS应用程序,把图片文件添加到工程后,我们再选择Image View,然后打开右边的属性检查器,在Image ViewImage下的列表中选择图片文件(icon-152.png),如图2-10所示。,第一个iOS应用程序,第一个iOS应用程序,至此,整个工程创建完毕。如图2-11所示,选择运行的模拟器或设备,然后点击左上角的运行按钮,即可 看到运行结果。我们在没有输入任何代码的情况下,就已经利用Xcode工具的Single View Application模板创建

10、了一个工程,并成功运行,Xcode之强大可见一斑。,第一个iOS应用程序,UIView与视图,视图和控件是应用的基本元素。在学习iOS之初,我们要掌握一些常用的视图和控件的特点及它们的使用方式。,a)视图“始祖”UIView,在Objective-C中,NSObject是所有类的“根”类。同样,在UIKit框架中,也存在一个如此神奇的类UIView。从继承关系上看,UIView是所有视图的根,我们形象地称其为“始祖”。UIView“家族”大体分为“控件”和“视图”两类,二者均继承于UIView。UIView类的继承层次如图3-1 所示。,a)视图“始祖”UIView,iOS应用界面是由若干个视

11、图构建而成的,这些视图对象采用树形构建,如图3-4所示是一个应用界面的构建 层次图,该应用有一个UIWindow,其中包含一个UIView根视图。根视图下又有3个子视图Button1、Label2 和UIView(View2),其中子视图UIView(View2)中存在一个按钮Button3。一般情况下,应用中只包含一个UIWindow。从视图构建层次上讲,UIWindow包含了一个根视图UIView。根视图一般也只有一个,放于UIWindow中。根视图的类型决定了应用程序的类型。图3-4中各对象间的关系如图 3-5所示。,a)视图“始祖”UIView,b)标签控件和按钮控件,标签控件和按钮控

12、件是两个常用的控件,下面我们通过一个具备用户交互功能的工程进一步学习这两个控件。另外,鉴于用户交互涉及动作和输出口,本节也将简单介绍动作和输出口的用法。该案例的设计原型草图如图3-7所示,其中包含一个标签和一个按钮,当点击按钮的时候,标签文本会从初始的Label1替换为HelloWorld。,b)标签控件和按钮控件,b)标签控件和按钮控件 标签控件,使用Single View Application模板创建一个名为Label_ButtonSample的工程。打开Main.storyboard文件,从对象库中拖曳一个Label控件(其属性检查器如图3-8所示),双击该控件,将其文本设 置为Lab

13、el1。由图3-8可以看出,标签的属性检查器包括Label和View两个组。Label组主要是文本相关的属性,而View组主 要是从视图的角度对控件进行设置。前文提到过,我们可以通过双击或者属性来实现Label控件的文本输入,这里的属性指的就是Label下的Text 属性。当然,我们也可以用代码来实现文本的编辑。需要说明的是,对象库中包含了控制器、基本控件、高级控件和手势等很多对象。随着版本的升级,对象库 还在不断扩充和完善,短时间内可能无法找到指定的控件,此时我们可以借助对象库下方的搜索栏来查找,b)标签控件和按钮控件,b)标签控件和按钮控件按扭控件,从对象库中拖曳一个Button控件并将其

14、摆放到标签的正下方,如图3-10所示。双击按钮,输入文本“OK”。现在按钮的状态是默认状态,我们可以运行一下,看看效果。为了美观,往往还要通过属性检查器优化一下按钮。打开其属性检查器,单击Type下拉列表,其中各选项的含义如下所示。Custom。自定义类型。如果我们不喜欢圆角按钮,可以使用该类型。System。系统默认属性,表示该按钮没有边框,在iOS 7之前按钮默认为圆角矩形。,b)标签控件和按钮控件按扭控件,Detail Disclosure。细节展示按钮,主要用于表视图中的细节展示。Info Light和Info Dark。这两个是信息按钮(样式与细节展示按钮一样),表示有一些信息需要展

15、示,或者可以设置内容。Add Contact。添加联系人按钮。State Config下拉列表中有4种状态,分别是Default(默认)状态、Highlighted(高亮)状态、Selected(选择)状态和Disabled(不可用)状态。选择不同的State Config选项,可以设置不同状态下的属性。,b)标签控件和按钮控件动作和输出口,动作是为了响应一个控件的事件而定义的方法,返回值类型为IBAction。此处列举一个动作的代码:-(IBAction)onClick:(id)sender 该方法的返回类型是IBAction,说明这个方法是一个动作。sender是参数,是事件源,是发出事件

16、的控件对象,可以省略如下:-(IBAction)onClick 为了使控件的某个事件与定义的动作关联在一起,我们可以通过Interface Builder或者代码建立关联。为了能访问控件,我们需要为其定义输出口,关键字为IBOutlet。输出口可以在声明控件变量时声明,也 可以在定义控件属性时声明。,b)标签控件和按钮控件动作和输出口,在声明控件变量时声明输出口的代码如下:interface ViewController:IBOutlet UILabel*label;在定义控件属性时声明输出口的代码如下:property(weak,nonatomic)IBOutlet UILabel*Label1;跟动作一样,我们也需要为输出口和控件建立联系,这也可以通过Interface Builder或者代码来实现。,c)TextField控件和TextView 控件,与Label控件一样,TextField和TextView控件也是文本类控件,是可以编辑文本内容的。在编辑方面,三者都可以利用代码、双击控件和属性检查器中的Text属性来实现,但是TextField和TextView 比Label多