1. Xcode是苹果软件开发的集成开发环境,可以开发所有苹果系统平台上的软件产品包括iOS应用,本文讲述如何通过Xcode快速开发一个具有基本界面的iOS应用,学习的内容如下:
1) 在Xcode创建一个iOS应用项目
2) 了解使用Xcode项目模版所自动生成的主要代码文件和相关函数
3) 在模拟器上运行APP
4) 在界面资源文件storyboard上增加、移动界面元素和改变其大小
5) 在界面资源文件storyboard上通过属性管理器编辑界面元素的属性
6) 使用预览助手预览一个storyboard界面
7) 使用自动布局排布界面自动适配用户设备的尺寸
2. 创建一个新iOS应用项目
打开Xcode选择创建一个Xcode项目(Create a new Xcode project),选择iOS->Application,右侧会看到有5个模版选项,如下图。
1) Master-Detail应用是主从架构的应用模版
2) Page-Based应用是基于书页的应用模版
3) Single-View应用是单视图的应用模版
4) Tabbed标签板应用模版
5) 游戏应用模版
2.1 本文选择单视图应用模版,开始创建一个简单界面的iOS应用。在单视图模版上可以修改和增加更多视图从而创建更复杂的导航架构(Navigation)、主从架构(Master-Detail)和Tabbar架构的界面组合。
2.2 点击“Next”按钮,选择新项目的存放目录后,Xcode自动生成新项目的文件和资源,如下图
2.3 在Xcode左上方选择模拟器类型
2.4 点击Xcode左上方的运行按钮
2.5 改变模拟器的显示尺寸
2.6 模拟器显示的iOS应用
3. 选择单视图模版创建iOS应用,Xcode自动生成了两个swift文件:AppDelegate.swift、ViewController.swift和两个storyboard文件:Main.storyboard、LaunchScreen.storyboard。
swift文件的扩展名是swift,它是swift的源码文件。storyboard文件的扩展名是storyboard,它是一种可视化界面资源文件,允许包含一个以上视图界面。
3.1 AppDelegate.swift文件
提供了两个主要功能:1)iOS应用的程序入口点:使用@UIApplciationMain的声明,创建一个程序应用对象负责管理整个应用程序的生命周期和一个应用程序代理对象(app delegate);2)定义AppDelegate类,指定实现应用程序代理对象的协议函数:
1)应用程序启动完成函数
func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool
2)应用程序即将进入不活跃状态函数
func applicationWillResignActive(application: UIApplication)
3)应用程序进入后台运行函数
func applicationDidEnterBackground(application: UIApplication)
4)应用程序进入前端运行函数
func applicationWillEnterForeground(application: UIApplication)
5)应用程序进入活跃状态函数
func applicationDidBecomeActive(application: UIApplication)
6)应用程序即将终止函数
func applicationWillTerminate(application: UIApplication)
3.2 ViewController.swift文件
单视图模版创建一个UIViewController的子类ViewController,其源码文件前缀名与类名相同(含有大小写)。iOS应用开发采用MVC设计模式,UIViewController类对应于Controller,管理View和调用Model的方法。ViewController重写了基类的视图加载方法viewDidLoad(),
3.3 LaunchScreen.storyboard
应用程序的启动界面文件,应用启动加载时调用该资源文件。
3.4 Main.storyboard
应用程序的主界面文件,Xcode缺省创建的主界面文件,用户可以创建并指定其他名称的主界面文件。本项目是单视图模版,在Main.storyboard上显示的与ViewController绑定的界面。图中的箭头表示指向的视图界面是这个storyboard文件的入口点,是加载storyboard资源时第一个加载的视图。
4. 创建基本界面
在ViewController视图上添加按钮和文字输入框。iOS中所有视图对象都是UIView类或者其子类,文本输入框UITextField是UIView的子类。
4.1 在界面上添加一个文本输入框
1)打开对象选择面板,在搜索框输入“text field”;
2)选中文本输入框(Text Field)将其拖到ViewController界面上,调整其大小使其左右边距在左右蓝色界线上;
3)在属性编辑面板上修改文本输入框的信息,在Placeholder处改为“输入菜名”;
4)确定在选中文本输入框状态下,在属性编辑面板上“Return Key”处选择“Done”;
5)在属性编辑面板上“Auto-enable Return Key”处选中打勾。
4.2 在界面上添加一个Label标签
1)打开对象选择面板,在搜索框输入“label”;
2)选中Label标签将其拖到文本输入框上方,左对齐于文本输入框;
3)双击Label标签,输入文字“菜名”。
4.3 在界面上添加一个按钮
1)打开对象选择面板,在搜索框输入“button”;
2)选中按钮对象将其拖到文本输入框下方,左对齐于文本输入框;
3)双击按钮,输入文字“设置缺省标签文字”。
5. 预览视图界面
使用助手编辑器预览视图界面
5.1 点击右上角的助手编辑器(Assistant editor)
5.2 点击编辑器选择器,选中预览Preview。
在预览视图发现视图没有适配不同尺寸的设备(iPhone和iPad),使用自动布局Auto Layout来建立适配不同尺寸设备的视图。
6. 采用自动布局Auto Layout
自动布局是一个高效的布局引擎帮助轻松地设计适配的布局,使用约束 (constraints)
来描述界面元素的位置以及与其它元素之间的相对位置。类似堆栈式视图(UIStackView)的工具可以帮助更有效地实现自动布局,堆栈式视图可以提供直线式接口用于每一列或者每一行的视图集合的布局。
6.1 增加自动布局约束
6.1.1 按住Shift键的同时选中文本输入框、标签和按钮;
6.1.2 点击底部右侧的Stack按钮
6.1.3 选中StackView控件,在属性编辑器修改Spacing为12
6.1.4 点击Pin按钮;
6.1.5 按照图示设置约束,点击最下方按钮添加3个约束。
6.2 调整文本输入框的约束
6.2.1 选中文本输入框
6.2.2 点击Pin按钮
6.2.3 设置文本输入框约束
6.2.4 在选中文本输入框同时,在尺寸面板上选择Intrinsic Size为PlaceHolder。
6.3 最后的预览效果