使用Swift编程语言开发iOS应用(二)

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  最后的预览效果

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,794评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,050评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,587评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,861评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,901评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,898评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,832评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,617评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,077评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,349评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,483评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,199评论 5 341
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,824评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,442评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,632评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,474评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,393评论 2 352

推荐阅读更多精彩内容