首页 >iOS开发

让不懂编程的人爱上iPhone开发(2017秋iOS11+Swift4+Xcode9版)-第14篇

2017-11-24 16:29 编辑: 枣泥布丁 分类:iOS开发 来源:

v2-e62699bf2cf0897c415bc857767f2581_r.jpg

上一篇的内容比较简单,只不过是修修补补而已。而这一篇我们将会把游戏从单一界面拓展到多界面。还记得游戏界面中的i 按钮吗?现在点击这个按钮是没有反应的,接下来我们要解决这一问题。

现在开始吧。

游戏的主体已经基本建立了,作为一个艺术家,最自豪的事情就是在作品上署上自己的大名。作为产品的开发者也不例外,虽然创作的是软件产品,但仍然可以归为创作家的系列。而且,我们还需要给玩家提供一些简单的帮助,让他们知道如何进行游戏。

所以我们将要添加一个about界面,这个新的about 界面中包含了传说中的text view(文本视图),里面放了一堆说明文字当然还有一个用来关闭当前界面的按钮。

我们可以通过触碰游戏主界面右下角的(i)按钮进入这个界面。

v2-4e0643b2044483c833f1bb27c3d18a66_hd.jpg

当然,上面的界面不是最终的,很快我们就会对其美化~

绝大多数的iOS应用或游戏中都不止有一个界面,即便是最简单的游戏也是如此,因此我们需要学习如何在应用中添加多个界面。

还记得我之前说过的吗?iOS应用中的每个界面都对应一个独立的视图控制器。当你看到“界面”的时候,就应该想到“视图控制器”。

Xcode已经为我们自动创建了ViewController这个视图控制器,但这个新的关于界面的视图控制器则需要我们自己手动来创建。

下面的东西可是全新的,不要眨眼啊。

在Xcode中,点击顶部菜单栏中的File,然后选中New File...在弹出的窗口中选中Cocoa Touch Class。

v2-bd8d2803fde69f9b0735f48e424d52c8_hd.jpg

点击Next,看到类似下面的界面:

v2-0925d5d926a463c081cae609c18f71d1_hd.jpg

照着上面输入相关信息:

  • Class: AboutViewController

  • Subclass of: UIViewController

  • Also create XIB file: 不选择

  • Language:Swift

点击Next,Xcode会让你选择保存这个新视图控制器的地方,不要想太多,直接默认Create就好了。不过要记得勾选Targets后面的那个选框。

v2-6c56204cbc42b75e8386a9958bb422b4_hd.jpg

此时会看到在Xcode的项目导航部分出现了一个新的文件,名为AboutViewController.swift。

如下图所示:

v2-5788a4ac1df50a61c59a00eb48672733_hd.jpg

为了设计这个全新的视图控制器,我们需要再次切换到内置的Interface Builder。

在Xcode的左侧导航部分点击打开Main.storyboard。目前里面并没有关于界面的视图控制器,因此我们需要手动创建一个新的。

从Xcode右下方的Object Library中拖出一个View Controller到画布上,放在之前的视图控制器的右侧。

v2-c7a097642558f013a543afb67b2e5100_hd.jpg

此时两个视图控制器可能重叠到一起了,为了看起来顺眼,不妨手动拖动调整它们的位置。Interface Builder貌似不是处女座的。

接下来在Xcode右下角的面板中切换到Object Library,找到 Button,把它拖动到视图上,把它改名为“Close”,然后放在视图底部的中央位置。

然后找到Text View,用鼠标拖动到白色的视图上,然后让它覆盖按钮之上的大部分空间。

注意这里还有一个Text Field,不过它是用来输入单行文本的(比如用户名和密码)。

Text View(文本视图)里面则可以放置多行文本。

最后我们得到的是类似下面的东西:

v2-7fbf0334002f9eb5dbd03b1430377025_hd.jpg

默认情况下,文本视图里面包含了一大堆拉丁语占位文字(也就是传说中的”Lorem Ipsum”,如果你恰好懂得拉丁语,或许会感到很幸福,无人爱苦,亦无人寻之欲之,乃因其苦… 参考http://baike.baidu.com/view/2339924.html)。

双击文本视图,然后修改其中的文字,随便你用怎么样的文字都可以。

如果你想偷懒,可以直接用下面的这些文字(或者随便什么文字都行)。

*** 王者打靶 ***

欢迎体验由笨猫帝国为您打造的王者打靶游戏!游戏方式很简单,你只需要拖动界面中的滑动条就好了。

你的目标是让滑动条的结点尽可能接近预设的分数,越接近表示你的好运指数越高。

连续5次获得完美得分的玩家可以免费吃鸡!

你也可以直接把文字拷贝粘贴到text view的Attributes inspector中。

别忘了在右侧面板的Attributes Inspector选项中取消选中Editable,否则玩家就可以自己输入文本了。在我们这款游戏里面,暂时不想搞这些东西。

v2-49895616ca7654fbb7129c58e2183278_hd.jpg

好了,关于界面的界面设置就是这样了。

那么我们如何让用户触碰(i)按钮时打开新的关于界面呢?Storyboards里面提供了一个很简单的方法:segue(你可以发音seg-way,是的,就是那个土掉渣但又屌炸天的电动平衡车。

v2-5ea187147b8a417e1ee2bfd0711507b9_hd.jpg

一个segue其实就是从一个界面切换到另一个界面的过渡中枢。

在Xcode中切换到Main.storyboard,然后选中(i)这个按钮,按住Ctrl键,按住鼠标左键拖出一条线到关于界面上。

v2-e7446875b1ea4df79f2f26f481d3f51e_hd.jpg

松开鼠标,可以看到一个弹出菜单,从其中选择modal。

v2-f45a6eb7c30c8cd7091b7de8c34f7b79_hd.jpg

此时在两个界面之间会出现一个箭头,这个箭头就代表一个segue。

v2-3f15e5527ddfa3fa852375069611ed29_hd.jpg

点击这个箭头选中它,segue也有自己的属性。在Xcode右侧面板中切换到Attributes inspector,选择Transition,Flip Horizontal。这样UIKit将在两个界面之间切换时使用这样的一个动画特效。

v2-306a4ddb46879096c78193050238293b_hd.jpg

现在你可以尝试编译运行应用,触碰(i)按钮看看效果。

你会看到一个简单的翻转动画效果。

不过似乎还有点小问题,如果我们触碰关于界面中的关闭按钮,什么也不会发生。

一旦玩家进入关于界面,他就被锁定在这个空间了。想想卡布里卡里面的虚拟人,被长期关闭在一个单独的空间里面暗无天日,是多么的残忍。

为什么会发生这种事情呢?因为segue虽然是界面切换的利器,遗憾的是它们都是单向的。为了让虚拟世界和现实世界中的人都能开心起来,我们必须让关闭按钮和某个动作方法关联在一起。

不过和之前不同的是,这次我们需要让动作方法和AboutViewController中的界面元素关联在一起,而非ViewController,因为关闭按钮是关于界面的一部分,而不是主界面的组成部分。

打开AboutViewController.swift,然后使用以下代码替代其中的内容。

import UIKit
class AboutViewController: UIViewController {

override func viewDidLoad() {
super.viewDidLoad()

// Do any additional setup after loading the view.
}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
@IBAction func close(){
dismiss(animated: true, completion: nil)
}

}

close()这个动作方法的作用就是通知UIKit用动画效果关闭关于界面。

如果上面的那行长代码更改为dismiss(false,…),那么就不会有任何翻转效果,主界面会立即呈现出来。

为了让用户体验更好,显然使用某种精巧的动画特效要比较贴近人心。

最后就是在界面元素和动作方法之间创建关联了。

在Xcode中打开Main.storyboard,然后选中关闭按钮,按住Ctrl键,用鼠标拖出一条线到关于界面的View Controller。

不对,在弹出式菜单中没有出现我们期待的close动作方法,实际上我们会看到类似下面的弹出菜单。

v2-54ee12f1664f52970443d2024981c3a7_hd.jpg

思考:

想想看究竟哪里出错了。非常常见而又让人头大的错误。

问题其实很简单,storyboard中的界面不知道自己其实代表着AboutViewController(因为没人告诉它)。

我们在前面的操作中只是添加了AboutViewController.Swift的源文件,同时往storyboard中拖入一个新的视图控制器,但是我们没有告诉storyboard这个新的视图控制器实际上是AboutViewController(这就是为什么你在outline 面板中看到的名称是View Controller,而不是About View Controller。)

好在这个问题不难解决。在Interface Builder中选中这个关于界面的视图控制器,然后在Xcode右侧面板切换到Identity inspector。

在Custom Class下面,将Class后面的类型选择为AboutViewController

v2-141989c038f15c1ac908c1161aefb458_hd.jpg

现在我们终于可以把关闭按钮和动作方法关联在一起了。

按住Ctrl键,有鼠标从关闭按钮拖一条线到About View Controller,这件事情你应该已经轻车熟路了。此时你会看到弹出菜单中有一个选项是close动作方法,选中它,关联就创立了。

再次编译运行,现在你可以很轻松的从关于界面返回游戏主界面了。

好吧,我们的游戏似乎已经完工了。所有的功能都具备了,而且也没有什么bug。现在的问题是-界面太难看!如果你现在把这款应用提交给App Store,百分百会被拒掉!

苹果官方提供了一个iOS 产品设计的人机交互指南,无论是程序猿,产品经理,还是设计人员,都应该反复仔细阅读。

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html#//apple_ref/doc/uid/TP40006556

即便你以后不打算做iOS开发,想做android,网页或者桌面开发,了解iOS的人机交互指南也是非常重要的。毕竟,苹果可是设计领域当之无愧的神级公司!

对于关于界面,我们做一个小小的修改吧,更改其背景图片为之前主界面的图片即可,具体怎么操作就不再赘述了。

好了,今天的学习先到此结束吧,这一篇的内容可能对新手有点吃力,不过我们也学到了更多有用的东西。

v2-d7e04c1e4864aa63b82f1868a9426f23_hd.jpg

老习惯,福利一张。

乔帮主座驾奔驰SL55AMG

v2-2be19bae2106fc09343e38b7100dc978_hd.jpg

v2-ed16911eee556d4f447bdf03f459f800_hd.jpg

未完待续~

搜索CocoaChina微信公众号:CocoaChina
微信扫一扫
订阅每日移动开发及APP推广热点资讯
公众号:
CocoaChina
我要投稿   收藏文章
上一篇:iOS 手势识别的工作原理及简单应用
我来说两句
发表评论
您还没有登录!请登录注册
所有评论(0

综合评论

相关帖子

sina weixin mail 回到顶部