将TVML和UIKit组合为Apple TV

如许多iOS开发人员所知,UIKit提供了强大的API,可创建可自定义的交互式应用程序。 当来自iOS背景时,使用UIKit创建您的AppleTV应用程序似乎不费吹灰之力…

但是,TVML模板是一个非常有用的工具,可以简化UI并显着减少开发时间。 让我们看一些好处:

  1. TVML模板为用户提供了熟悉的体验。 您是否注意到许多AppleTV应用程序具有类似的浏览,预览,搜索,播放等方式? 这是因为它们中的许多人都使用TVML模板,这些模板对他们而言具有独特的外观。 这大大减少了设计时间。
  2. 即使很少的JavaScript经验,模板也非常易于实现。 自动版式会为您处理。 延迟加载图像会自动发生。 苹果已经解决了屏幕上每个UI元素的行为。
  3. 模板结构化且可自定义。 模板是即插即用的,但是您仍然可以自定义UI元素的某些方面样式和属性
  4. 您可以在网络服务器上托管TVML / TVJS文件。 这使您可以对应用程序进行更改,而无需用户将更新下载到应用程序。 这意味着您无需等待3天即可让Apple批准您的UI更改!

那么,如何选择使用UIKit或TVML开发tvOS应用程序呢? 好消息-您不必! UIKit和TVML模板可以在同一项目中混合在一起 。 这意味着您可以利用UIKit自定义功能,而无需为TVML自动提供的一切重新设计轮子!

在这篇文章中,我将演示如何完成两个框架的结合。


首先在Xcode中创建一个新的TVML App项目,或者打开现有项目。

确保托管application.js文件进行测试,以便显示TVML模板。 要创建用于测试的本地服务器,请在终端应用程序的项目文件夹中使用以下命令:

  python -m SimpleHTTPServer 9001 

显示TVML模板要求您使用控制JavaScript上下文的对象: TVApplicationController 。 创建新项目时,将在AppDelegate.swift中为您创建该对象。

将UIViewController添加到堆栈堆栈很容易:

这使您可以将自定义UIViewController推入导航堆栈。 如果要返回,只需像往常一样将viewController从导航堆栈中弹出即可。

现在我们可以在项目中同时显示TVML模板和自定义UIViewControllers,现在该学习如何在两个世界之间进行通信了。

我们可以从Swift代码库中调用托管JavaScript代码库中的方法。 为此,我们创建了一个方法,该方法告诉我们appController中的JavaScript上下文我们想调用JavaScript方法。 这是一个例子:

此示例假设我们的JavaScript代码库中有一个名为pushAlert()的方法 。 在Swift中调用pushAlertJS()将在我们的JavaScript代码库中调用pushAlert()方法(也许您可以在application.js中创建pushAlert()作为测试)。 这意味着您可以在用户按下UIViewController上的按钮后显示TVML模板。 很酷

有时,当用户与TVML模板进行交互时,您可能想在Swift中调用方法。 为此,我们需要向JavaScript上下文中注入一些自定义的Swift代码。 这是一个例子:

createSwiftPrint()将代码注入JavaScript上下文; 因此,需要在运行JavaScript代码之前调用它。 确保在应用程序安装过程中调用这些注入方法。

本质上,我们已经创建了一个利用Swift块的JavaScript方法。 因此,当在application.js中调用swiftPrint(str)时,字符串参数将传递给swiftPrintBlock,该块将被调用, 我们可以在该块中运行我们想要的任何Swift代码。 在这种情况下,我们只打印字符串,但可能性是无限的。

您可以轻松地注入一个方法,该方法允许您将自定义UIViewController推入堆栈:

现在我们可以将UIViewControllers推送到TVApplicationController上,从那些视图控制器推送TVML模板,并在Swift和Javascript之间进行通信! 现在,您可以利用UIKit的自定义视图的功能,并将它们与简化的TVML模板进行互换,以实现令人难以置信的优化开发体验。

如有任何疑问,请与我联系; 我很高兴进一步阐述。 联系信息可以在我的网站lastlevelstudios.com上找到。 谢谢阅读!