1.4 实现简单的按钮交互实例
前面章节介绍了Xcode的基本内容,这节我们以一个简单的实例介绍下与用户的交互,本节将编写一个稍微简单的应用(看似简单,但本章知识点是相当多的),它由两个按钮(UIButton)和一个文本框(UILabel)构成如图1-4-1,当点击按钮文本会发生相应的变化.
图 1-4-1 本章节的实例应用实例,两个按钮和一个文本框
1.4.1 创建项目
现在开始创建工程名为"1.4-Button And Label"的实例工程,我们选择的模板是1.1章节所提到的Single View Application(单视图应用程序),对相应参数进行设置如图1-4-2, 本节我们要使用自动布局来创建一个可以在所有iOS设备上运行的应用程序,所以要在Devices下拉菜单中选择Universal.
图 1-4-2 创建工程配置选项(Swift版)
点击Next,Xcode会提示你选择项目的保存位置.按下Create之后项目就创建完成了.
1.4.2 视图控制器(View Controller.swift)和应用代理方法(AppDelegate.swift)
终于要开始编写代码了,在编写之前我们先看看已经创建好的文件.如图1-4-3
图1-4-3 项目模板自动创建的类文件
"1.4-Button And Label"文件夹包含了.swift的两个文件/两个storyboard文件/一个.xcassets文件(存放应用程序所需要的全部图片)和一个Info.plist文件(它包含了应用程序的重要信息,例如程序名称,bundle id,对运行的设备规格是否有要求,等等)
视图控制器(View Controller.swift):负责管理应用程序的视图,这个类是一个视图控制器,点击ViewController.swift,查看文件内容如图1-4-4
图 1-4-4 ViewController.swift 内容
ViewController是UIViewController的子类,UIviewController是一个通用控制器,是UIKit的一部分,通过继承这个类,可以获得大量的功能.
应用程序代理(AppDelegate.swift):是整个APP的事件代理类,是负责为其他对象处理特定任务的对象,在应用程序执行过程中的某些特定时间点UIApplication调用特定的代理方法,例如:如果需要在程序退出时触发一段代码,可以在应用程序代理实现applicationTerminate方法,在这个方法内编写想要的代码即可.如图1-4-5各个方法会在什么时候被调用.
图1-4-5 AppDelegate.swift 内容
1.4.3 添加控件到视图并进行自动布局
我们了解了视图控制器(View Controller.swift)和应用代理方法(AppDelegate.swift)之后,就开始将两个按钮和一个文本框加入到view中去.如图1-4-6
图 1-4-6 添加控件到View Controller控制的View上
我们双击拖进视图的控件,就可以修改默认的文字.好了,我们可以运行下程序(快捷键为command + R),运行结果如图1-4-7
图 1-4-7 加入控件直接运行在模拟器上
我们看到"右边按钮"消失了,只有"左边按钮"是正确的,这个时候不要担心,我们还要进行下一步操作,就是自动布局.让我们的程序在任何设备上可以正常显示.
在本实例中我们想达到如下效果:
A.文本框应该水平居中,并且位于屏幕顶端的下方
B.左边按钮应该垂直居中并且靠近屏幕左侧
C.右边按钮应该垂直居中并且靠近屏幕右侧
每个要求都包含两条约束:一条是水平约束,另一条是垂直约束.如果我们对这三个控件采用这些约束,自动布局就能在任意屏幕上保持视图处于正确的位置,下面首先对左边按钮进行约束如图1-4-8和图1-4-9
图 1-4-8 添加左边按钮垂直居中
图 1-4-9 左边按钮添加靠左约束,和固定宽高
这样左边的按钮就约束好了.下面进行右边按钮的约束.如图1-4-10和图1-4-11
图 1-4-10 添加右边按钮垂直居中
图 1-4-11 右边按钮添加靠右约束,和固定宽高
这样右边按钮自动布局也OK,下面还有文本框的约束如图1-4-12和图1-4-13
图 1-4-12 文本框约束水平位置
图 1-4-13 文本框添加靠顶部约束,和固定宽高
OK,大功告成,我们command + R运行下:如图1-4-14和1-4-15
图 1-4-14 竖屏正常
图 1-4-15 横屏正常
OK,自动布局就这样愉快的解决了,当然在Ipad运行也是OK的,因为我们已经做好了适配.
下面简单的介绍下在布局中Align(对齐)/Pin(固定)/Resolve Auto Layout Issues(解决自动布局问题)
Align(对齐):可以将你选中的视图与另一个视图对齐.如果现在点击这个按钮,将会看到一个包含多个选项的悬浮框.其中一个Horizontal Center in Container(容器中水平居中),上面已经使用了这个约束.
Pin(固定):点击按钮会弹出一个面板,通过上面的控件可以设定某个视图与另一个视图的相对位置并且使用尺寸约束,以上的例子当中就设定了左右按钮分别有视图的左边和右边距离.
Resolve Auto Layout Issues(解决自动布局问题):按钮可以纠正布局问题,可以推测遗漏了那些约束并补上,以及调整视图在运行时的布局,如果你在上面的例子中遇到警告,就可以用Update Frames来改变控件在视图中的准确位置.
1.4.4 布局预览功能
想要看适配后的效果,我们必须要运行到每一个模拟器上吗,不是的.Xcode为我们提供了强大的预览功能,可以选择不同设备同时预览,下面将介绍预览的位置,以及怎样添加不同设备到预览中去.
图1-4-16 找到Automatic
图1-4-17 点击Automatic后的下拉菜单,点击Preview就会出现预览视图
图1-4-18 预览图
图1-4-19 点击加号就可以添加预览的设备了
1.4.5 添加按钮的事件/文本框的属性和编辑逻辑代码
以上小节已经完成了控件的添加以及自动布局适配,下面我们就开始编写代码了.
第一步:先将视图中的按钮添加方法到ViewController.swift中,并将文本框添加属性到ViewController中.如图:1-4-20
第二步:进行代码逻辑的编写.如图:1-4-24
图1-4-20将两个按钮的事件和文本框属性拖到ViewController.swift中
选中按钮,按住Ctrl键并用鼠标左键拖出一条线到ViewController,主要按钮的Connection需要改为Action并把方法名命名为btnClick,如图1-4-21
图1-4-21 设置按钮方法名以及修改Connection为Action
右边按钮就直接把它拖到刚生成的方法中即可如图1-4-22
图1-4-22 添加右边按钮的事件方法
添加文本属性到ViewController.swift中如图1-4-23
图 1-4-23 文本框属性添加Connection改为Outlet
最后一步就是代码的逻辑操作:如图1-4-24
图 1-4-24 代码的逻辑编写
到这里就可以运行下程序就大功告成了,不妨点击下两个按钮观察文本框的变化吧,其中sender.titleForState(.Normal) 就是获取两个按钮在正常状态下的文本信息.
欢迎加入Swift QQ交流群:513653400
