添加多个屏幕-创建格线布局

在上一节中,我们学习了如何使用按钮更改iPhone的屏幕。让我们进一步推动!我们将实现一个CollectionView,我们将能够切换到您想要的壁纸。该的CollectionView将是滚动的水平。

下载多个屏幕

要学习本教程,您需要Xcode 10。您可以下载Final Xcode项目,以帮助您与自己的进度进行比较。

查看控制器

主故事板中,让我们构建我们的集合视图。首先,把视图控制器对象库旁边我们的视图控制器。将其背景颜色更改为Clear,因为我们希望Collection View位于当前View Controller之上。在第二个视图控制器和约束内插入一个UIView:0左,0右和0底(全部相对于superview)。取消选中“ 约束”到边距并将高度设置为380

MultipleScreens01

圆角半径

让我们在收集视图的角落。在Identity Inspector中,单击小+并添加此属性

  • 关键路径:layer.cornerRadius
  • 类型:数字
  • 值:40主故事板中看不到它是正常的,但是,当您运行应用程序时,您将看到它。

MultipleScreens02

转场

让我们将这两个View Controller连接在一起。在第一个图标的顶部,Control +从第一个图标(黄色圆圈)拖动到第二个图标的视图。它将创建一个segue并选择Present Modally。命名segue:HomeToDialog。然后,将演示文稿更改为当前上下文。对于placeScreenButtonTapped,删除代码并调用segue。

performSegue(withIdentifier: "HomeToDialog", sender: nil)

标签 Label

现在,让我们贴上标签!从对象库中拖放标签并将其约束到Container中的水平居中并将顶部设置为30。在Attributes Inspector中,将字体设置为Semibold,将其Color更改为深灰色,将文本更改为CHOOSE A SCREEN

Collection View

对象库中拖放Collection View并将其放在UIView中。(不要与Collection View Controller混淆)。约束Collection View

约束

0点

0点

30点

250点

MultipleScreens03

由于我们创建了一个新的View Controller,我们需要将它与一个新类相关联。通过按住Command + N创建一个新的Cocoa Touch文件,将Subclass更改为UIViewController,将名称更改为DialogViewController。然后,打开主故事板并启用助理编辑器。单击第二个View Controller的顶部,转到Identity Inspector并将其Class更改为DialogViewController。该助理编辑会自动更改为新的类文件。删除已注释的代码块。

MultipleScreens04

委托 Delegate

首先,让我们为CollectionView创建一个IBOutletControl +Collection View ****拖动到swift文件,然后拖到****viewDidLoad上。将其命名为:screensCollectionView。然后,在viewDidLoad中,调用IBOutlet并将其委托给self。这样,我们的ViewController将能够使用我们的Collection View。另外,将数据源设置为self。

screensCollectionView.delegate = self
screensCollectionView.dataSource = self

扩展 Extension

要分离我们的代码,在最后创建一个新的扩展,它将是DialogViewController的扩展类型:UICollectionViewDataSourceUICollectionViewDelegate

extension DialogViewController: UICollectionViewDataSource, UICollectionViewDelegate {
}

设置委托时,尝试运行代码,它会建议您丢失哪种方法。使用Command + R运行代码,然后修复2个错误。它将为您提供运行CollectionView所需的两种方法。

Sections中的项数和 Cell

在第一个函数内部,我们只需返回3。

return 3

在cells函数内,为cell声明一个常量,然后调用CollectionView,它的cell和路径。然后,将cell返回。

let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "screenCell", for: indexPath)

return cell

Cell

转到主故事板,选择集合视图的cell,在Identity Inspector中,您将看到Cell名称的文本持有者,将其命名为:screenCell。现在,选择尺寸检查器,我们将给我们的cell大小:( 宽度:140高度:250)。设置cell的Min Spacing和左侧的Section Insets为20。它会在每个cell之间留出一些空间。改变cell的颜色,因为集合视图也是白色的。

MultipleScreens05

屏幕视图

然后,从对象库中,将Button拖放到cell内。将按钮限制为(顶部:0点,左:0点,右:0点,高:220点)。取消选中边距。选择按钮并选择iPhoneX1作为图像。你会觉得它很有弹性,所以将内容模式改为Aspect Fit。我们在图像下面插入一个标签。文本是iPhone X并将底部约束为0并将容器中的水平中心约束。在“ 属性”检查器中,将“滚动方向”更改为“ 水平”并取消选中“ 显示”指示器。到目前为止,如果您运行该应用程序,您将看到3个类似的cell,并且它是可滚动的。问题是它现在做的不多。

MultipleScreens06

手机数据

让我们声明一组具有不同屏幕的手机,这样我们就可以将数据注入我们的Collection View。转到DialogViewController,为屏幕声明一个常量并枚举它们:iPhoneX1,iPhoneX2和iPhoneX3。

let screens = ["iPhoneX1", "iPhoneX2", "iPhoneX3"]

Cell 类

我们需要将这个数组放入我们的cell中,但是,我们的问题是这些数据都没有连接到cell。让我们为Cell Class创建一个新文件。单击Command + N并为子类选择UICollectionViewCell,其名称为:DialogCollectionViewCell。然后,转到主故事板并选择cell,将其类更改为DialogCollectionViewCell。启用Assistant Editor并选择DialogCollectionViewCell。现在,我们可以创建IBOutlet按住Ctrl并拖动按钮并将其命名为:screenImageButton。对标签重复相同的步骤并将其命名为:screenLabel

MultipleScreens07

DialogCollectionViewCell

转到DialogViewController,在cell声明的末尾,将cell指定为我们刚刚创建的新类。

let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "screenCell", for: indexPath) as! DialogCollectionViewCell

屏幕数组

小区现在已连接到DialogCollectionViewCell用正确的IBOulet。让我们调用cellscreenImageButton并通过调用其索引路径来注入数据数组。

cell.screenImageButton.setImage(UIImage(named: screens[indexPath.row]), for: .normal)

如果您运行该应用程序,您将看到cell图像不同!

标题数组

让我们应用相同的技术来更改screenLabel。首先,为标签声明第二个数组,然后调用screenLabel并注入新数据。

let titles = ["Wallpaper", "Home", "Chapters"]

cell.screenLabel.text = titles[indexPath.row]

如果您运行该应用程序,您将看到cell标签不同!

关闭 Collection View

当我们点击按钮时,我们想要关闭Collection View。转到主故事板,启用Assistant Editor,从按钮创建IBAction。将其命名为:screenImageButtonTapped。我们遇到的问题是按钮位于cell中,但操作发生在DialogCollectionView中。我们必须设立委托。委托将允许我们向View Controller发送消息。在最后,声明一个协议并命名它:DialogCollectionViewCellDelegate。然后,为按钮声明一个动作。

protocol DialogCollectionViewCellDelegate {
    func screenImageButtonTapped()
}

为了能够调用该委托,我们也需要声明它。

var delegate: DialogCollectionViewCellDelegate?

然后,在screenImageButtonTapped内部,调用其委托。

delegate?.screenImageButtonTapped()

委托

现在返回DialogViewController,创建一个新扩展并调用委托。然后,尝试运行代码,它会自动为您提供缺少的方法。

extension DialogViewController: DialogCollectionViewCellDelegate {
    func screenImageButtonTapped() {
    }
}

DialogViewContrroller

每当你创建一个委托时,你需要将它附加到segue或我们这里,cell本身。在返回cell的上方,将委托设置为self。这样,您将cell附加到DialogViewController

cell.delegate = self

Dismiss

现在,在screenImageButtonTapped中调用dismiss ,它应该删除CollectionView

dismiss(animation: true, completion: nil)

在手机上运行该应用,点击任何手机,它应该会关闭您的CollectionView

DialogViewController协议

我们需要设置另一个协议,以便能够通过segue 将委托发送给View Controller。在DialogViewController中,在最后声明一个协议并命名它:DialogViewControllerDelegate并声明函数:screenImageButtonTapped

protocol DialogViewControllerDelegate {
    func screenImageButtonTapped()
}

然后,声明它。

var delegate: DialogViewControllerDelegate?

screenImageButtonTapped中调用委托。

delegate?.screenImageButtonTapped()

查看控制器协议

现在我们已经设置了委托,转到View Controller,最后为DialogViewControllerDelegate创建一个新的扩展。运行该应用程序以修复缺少的方法。

extension ViewController: DialogViewControllerDelegate {
    func screenImageButtonTapped() {
    }
}

准备转场

我们需要一个segue来执行这两者之间的连接。使用segue的名称声明一个if语句。这样,您确定在调用此segue时,我们将执行操作。将委托设置为self。我们需要使用委托来指定我们正在调用,否则,View Controller不知道。

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    if segue.identifier == "HomeToDialog" {
        let toVC = segue.destination as! DialogViewController
        toVC.delegate = self
    }
}

Index path

我们需要发送索引的信息才能检索信息。在 Cell 文件中,为索引声明一个变量并使其为0.然后,在screenImageButtonTapped的值内,调用索引及其类型Int。因此,它上面的代理将具有相同的值,它将返回一个索引。转至DialogViewController,放型的指数诠释的价值里面screenImageButton。在返回cell之上,将cell的索引更改为索引路径行。

cell.index = indexPath.row

返回UIImage

当我们点击按钮时,它将在函数中返回UIImage类型的图像。为ARScreen的图像声明一个新数组。在委托中,返回:

delegate?.screenImageButtonTapped(image: UIImage(named: images[index])!)

材质

ViewController中,在函数内部,更改3D模型的材质。在括号内,声明图像是UIImage

iPhoneXNode.geometry?.firstMaterial?.diffuse.contents = image

结论

祝贺完成本课程!这部分是一个非常漫长而艰难的部分。我们学到了很多关于如何实现Collection View的知识。我们还学会了如何委派。这是ARKit 2扩展的结束,我们已经走了很长的路!我希望你喜欢这门课程!

原文: https://designcode.io/arkit-multiple-screens

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券