iOS 9应用开发教程之编辑界面与编写代码
iOS 9应用开发教程之编辑界面与编写代码
编辑界面
在1.2.2小节中提到过编辑界面(Interface builder),编辑界面是用来设计用户界面的,单击打开Main.storyboard文件就打开了编辑界面。在Xcode 5.0以后中,编辑界面直接使用的是故事板。本小节将对编辑界面进行介绍
1.界面的构成
单击Main.storyboard打开编辑界面后,可以看到编辑界面会有4部分组成,如图1.23所示。
编号为1的部分为dock。
编号为2的部分为画布:用于设计用户界面的地方,在画布中用箭头指向的区域就是设计界面,在画布中可以有多个设计界面,一般将设计界面称为场景或者说是主视图。
编号为3的部分为工具窗格的检查器:用于编辑当前选择的对象的属性。
编号为4的部分为工具窗格的库:如果选择的是Objects,里边存放了很多的视图。
图1.23 编辑界面构成
在画布的的设计界面下方有一个小的dock,它是一个文件管理器的缩减版。dock展示场景中第一级的控件,每个场景至少有一个ViewController、一个FirstReponder和一个Exit。但是也可以有其他的控件,dock还用来简单的连接控件,如图1.24所示。
图1.24 dock
2.设置主视图尺寸
在图1.23中看到主视图的尺寸并非是手机的尺寸,其实这个主视图是可以进行调节的。为了让开发者在设计手机界面时可以更加的方便准确,我们可以将其视图尺寸调节成合适的大小。以下是将主视图的尺寸调整为iPhone 6手机的尺寸,具体的操作步骤如下:
(1)选择主视图上方dock中的View Controller。
(2)在右边的工具窗格的检查器中,选择Show the Attributes inspector即属性检查器,在出现的属性检查器面板中将Size设置为iPhone 4.7-inch,如图1.25所示。
图1.25 设置设计界面的尺寸
注意:在属性检查器面板中除了可以设置主视图的尺寸外,可以设置方向、状态栏等。
对Size进行设置后,画布的效果如图1.26所示。
图1.26 画布的效果
3.添加视图对象
如果想要在iOS模拟器上显示一个文本框,就要为主视图添加对象。单击工具窗格库中的Show the Object Library即视图库窗口,在里面找到Text Field文本框对象将其拖动到画布的主视图中,如图1.27所示
图1.27 添加视图对象
此时运行程序,会看到如图1.28所示的效果。轻拍模拟器中的文本框就会出现键盘,可以通过键盘来实现字符串的输入,如图1.29所示。
图1.28 运行效果 图1.29 运行效果
编写ios9代码
代码就是用来实现某一特定的功能,而用计算机语言编写的命令序列的集合。现在就来通过代码在文本框中实现显示“Hello,World”字符串的功能,具体的操作步骤如下:
(1)使用设置编辑器的三个视图方式的图标,如图1.30所示,将Xcode的界面调整为如图1.31所示的效果。
图1.30 编辑器的三个视图方式的图标
图1.31 调整界面
(2)按住Ctrl键拖动主视图中的文本框对象,这时会出现一个蓝色的线条,将这个蓝色的线条拖动到ViewController.swift文件中,如图1.32所示。
图1.32 出现蓝色的线条
(3)松开鼠标后,会弹出一个对话框,如图1.33所示。
图1.33 弹出对话框
(4)弹出的对话框中,找到Name这一项,在其中输入名称tf,如图1.34所示。
图1.34 输入名称
注意:Name这一项输入的名称是任意的。
(5)选择Connect按钮,关闭对话框,这时在ViewController.swift文件中自动生成一行代码,如图1.35所示。
图1.35 操作变量
注意:生成的代码叫做插座变量,插座变量其实就是为关联的对象起了一个别名。开发者就可以对此插座变量进行操作,从而对关联的对象进行操作。以上这一种方式是插座变量声明和关联一起进行的,还有一种先声明动作后关联的方式。具体操作步骤如下:
首先,打开ViewController.swift文件,使用IBOutlet关键字对文本框的插座变量进行声明,其代码如图1.36所示。
图1.36 声明插座变量
注意:声明好的插座变量会在代码的前面出现一个空心的小圆圈。此小圆圈表示该插座变量还未进行关联。
其次,使用设置编辑器的三个视图方式的图标,将Xcode的界面进行调整,将其调整为和图1.31一样的效果。
然后,按住Ctrl键拖动主视图中的文本框对象,这时会出现一个蓝色的线条,将这个蓝色的线条和文件ViewController.swift文件中的插座变量进行关联,如图1.37所示。
图1.37 关联插座变量
最后松开鼠标后,文本框对象就与插座变量成功的关联在一起了,此时插座变量前面的空心小圆圈就变为了实心的小圆圈,它表示此插座变量已被关联。
(6)打开ViewController.swift文件,编写代码,此代码实现的功能是在文本框中显示字符串Hello,World。代码如下:
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var tf: UITextField!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
tf.text="Hello,World" //设置文本内容
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
注意:为了方便开发者更好的理解代码,本书会将多余的代码省去,使用“……”省略号表示,以上的代码就会变为如下的代码:
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var tf: UITextField!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
tf.text="Hello,World" //设置文本内容
}
……
}
此时运行程序,会看到如图1.38所示的效果。
图1.38 运行效果
本文选自:iOS 9应用开发基础教程大学霸内部资料,转载请注明出处,尊重技术尊重IT人!
iOS 9应用开发教程之编辑界面与编写代码相关推荐
- iOS 9应用开发教程之显示编辑文本标签文本框
iOS 9应用开发教程之显示编辑文本标签文本框 ios9显示.编辑文本 在iOS,经常会看到一些文本的显示.文字就是这些不会说话的设备的嘴巴.通过这些文字,可以很清楚的指定这些设备要表达的信息.本节将 ...
- Xamarin iOS教程之编辑界面编写代码
Xamarin iOS教程之编辑界面编写代码 Xamarin iOS的Interface Builder Interface Builder被称为编辑界面.它是一个虚拟的图形化设计工具,用来为iOS应 ...
- iOS 9应用开发教程之使用代码添加按钮美化按钮
iOS 9应用开发教程之使用代码添加按钮美化按钮 丰富的用户界面 在iOS9中提供了很多的控件以及视图来丰富用户界面,对于这些视图以及控件我们在上一章中做了简单的介绍.本章我们将详细讲解这些视图. i ...
- iOS 9应用开发教程之创建iOS 9项目与模拟器介绍
iOS 9应用开发教程之创建iOS 9项目与模拟器介绍 编写第一个iOS 9应用 本节将以一个iOS 9应用程序为例,为开发者讲解如何使用Xcode 7.0去创建项目,以及iOS模拟器的一些功能.编辑 ...
- iOS 9应用开发教程之使用开关滑块控件以及滚动部署视图
iOS 9应用开发教程之使用开关滑块控件以及滚动部署视图 使用ios9中的开关.滑块控件 开关和滑块也是用于和用户进行交互的控件.本节将主要讲解这两种控件. ios9开关 开关控件常用来控制某个功能的 ...
- iOS 9应用开发教程之定制应用程序图标以及真机测试
iOS 9应用开发教程之定制应用程序图标以及真机测试 定制ios9应用程序图标 在图1.12中可以看到应用程序的图标是网状白色图像,它是iOS模拟器上的应用程序默认的图标.这个图标是可以进行改变的.以 ...
- iOS 9应用开发教程之多行读写文本ios9文本视图
iOS 9应用开发教程之多行读写文本ios9文本视图 多行读写文本--ios9文本视图 文本视图也是输入控件,与文本框不同的是,文本视图可以让用户输入多行,如图2.23所示.在此图中字符串" ...
- Xamarin ios C#苹果应用开发第二讲配置环境和编写代码
Xamarin ios C#苹果应用开发第二讲配置环境和编写代码 Xamarin ios C#苹果应用开发第二讲配置环境和编写代码 观看地址://v.youku.com/v_show/id_XNzE1 ...
- Vaadin Web应用开发教程(37):可视化界面编辑插件
前面基本介绍了Vaadin提供的各种UI组件和布局,所以界面都是通过代码来完成的.安装Vaadin的Eclipse插件后,可以通过拖拉的方式来开始话设计用户界面.设计出的界面为CustomCompon ...
最新文章
- TurnipBit:可以带着孩子一起玩编程的MicroPython开发板!
- SAP CRM BSPWDApplication.do
- 动态调用对象的属性和方法——性能和灵活性兼备的方法
- 将下图的nfa确定化为dfa_「线性代数」根据特征值,将二次型化为标准形、规范形...
- .net core连接MongoDB
- zen of python什么意思_如何理解「The Zen of Python」?
- linux ntfs硬盘自动挂,linux下查看所有硬盘分区+挂接NTFS磁盘/硬盘+自动挂接硬盘方法...
- Windows Notepad 居然要迎来大更新了!
- guava 的重试机制 guava-retrying 使用
- dev-cpp的安装教程
- 苹果开发者公司账号注册流程注册新的苹果Apple Id并双重验证步骤
- PyAutoGUI库-模拟鼠标键盘操作
- 终于有人把前端鉴权讲明白了
- 小米笔记本 wifi linux,被小米笔记本的WiFi坑了一道
- 程序猿,你关心过自己的健康吗?
- NIST的安全内容自动化协议(SCAP)以及SCAP中文社区简介
- oss图片上传api_怎么上传图片到OSS
- 3GPP TS 23501-g51 中英文对照 | 5.2.4 Authorisation
- blender-GIS安装教程
- channel error; protocol method: #method<channel.close>(reply-code=404, reply-text=NOT_FOUND - no
热门文章
- C++中使用Json的方法
- Doctype文档类型学习小结
- POJ 2388 Who's in the Middle
- Cortex-M3 异常中断向量表
- MathWorks.MATLAB.NET.Arrays.MWArray”的类型初始值设定项引发异常 解决方法
- MYSQL连接一段时间不操作后出现异常的解决方案
- SDWebImage的使用及图片不改变问题的解决
- 解决异常:“The last packet sent successfully to the server was 0 milliseconds ago. ”的办法
- 微信扫码支付模式二【无法回调】解决方案
- 如何在python中找到两个日期时间对象之间的时差?