像这里的许多读者一样,我观看了WWDC 2017大会,讨论了iOS 11.x中可用的新拖放方法,并悄悄地反映了我对我可以构建什么样的简单应用程序进行实践体验的兴趣。这些新方法。
正是在和儿子下象棋的时候,我有了尤里卡的时刻。 我知道我以为我写了一个简单的国际象棋在线游戏,这个应用程序需要我在屏幕上拖动图像,在这种情况下是棋子。 因此,在周日下午,我整理了一下,并认为我会在此过程中分享您的故事。
让我们从一张图片开始,这是我的目标。 如果您也设法遵循此简短教程,则将是最终结果。

边缘有些粗糙,但重要的是概念/代码。 当然,从该图像中看不出来,但是您可以在棋盘上拖放棋子。
要构建它,您首先需要创建一个单视图应用程序并获取一些图像。 我最喜欢这种事情的网站之一是https://thenounproject.com,在该网站上他们声称有“适用于一切的图标”。我找到并下载了jhonythomasang@gmail.com制作的国际象棋棋盘,然后从那里去了,这是他的您在上图中看到的棋子。
我将图像复制到Assets.xcassets中,并在viewDidLoad中创建一个简单的循环以构建一个板并将其放置在其中。 代码看起来像这样。
var image2M:UIImageView!
var image2A:[UIImageView] = []
var sourceIndex:整数!
var objectIndex:整数!
let cpieces = [0:“ wCastle”,1:“ wKnight”,2:“ wBishop”,3:“ wQueen”,4:“ wKing”,5:“ wBishop”,6:“ wKnight”,7:“ wCastle ”,8:“ wPawn”,9:“ wPawn”,10:“ wPawn”,11:“ wPawn”,12:“ wPawn”,13:“ wPawn”,14:“ wPawn”,15:“ wPawn”, 48:“ bPawn”,49:“ bPawn”,50:“ bPawn”,51:“ bPawn”,52:“ bPawn”,53:“ bPawn”,54:“ bPawn”,55:“ bPawn”,56: ” bCastle”,57:“ bKnight”,58:“ bBishop”,59:“ bQueen”,60:“ bKing”,61:“ bBishop”,62:“ bKnight”,63:“ bCastle”]
var imageIndex = 0
让midX = self.view.bounds.midX-(8 * 64)/ 2
让midY = self.view.bounds.midY-(8 * 64)/ 2
对于Xloop in 0 .. <8 {
对于Yloop in 0 .. <8 {
let image2D = UIImageView(帧:CGRect(x:Int(midX + CGFloat(Xloop)* 64),y:Int(midY + CGFloat(Yloop)* 64),宽度:64,高度:64))
image2D.layer.borderColor = UIColor.black.cgColor
image2D.layer.borderWidth = 1
image2D.isUserInteractionEnabled = true
image2D.tag = imageIndex
如果cpieces [imageIndex]!= nil {
image2D.image = UIImage(命名为:cpieces [imageIndex]!)
}
imageIndex = imageIndex +1
self.view.addSubview(image2D)
image2A.append(image2D)
}
}
我希望板子在屏幕的中央,因此是view.bounds线,并且我想尽可能快速,轻松地创建板子,因此我只需向其添加64个带有边框的UIImageViews即可。 字典很好地帮助了我放置棋子。 随着我们的前进,对数组和标签的要求将更加明显。
有趣的是,如果将这段代码复制并粘贴到ViewController中,您将只剩下一个静态棋盘。 为了使其具有交互性,我需要将UIDropInteractionDelegate和UIDragInteractionDelegate都添加到VC。
完成后,您需要在上面显示的image2D循环中添加这四行。
让dragInteraction = UIDragInteraction(delegate:self)
image2D.addInteraction(dragInteraction)
让dropInteraction = UIDropInteraction(代表:自我)
image2D.addInteraction(dropInteraction)
然后添加您的拖放方法。
func dragInteraction(_交互:UIDragInteraction,itemsForBeginning会话:UIDragSession)-> [UIDragItem] {
image2M = interact.view为? UIImageView
sourceIndex = image2M.tag
让image = image2M.image
让provider = NSItemProvider(对象:图像!)
让item = UIDragItem(itemProvider:提供程序)
item.localObject =图片
打印(“ sourceIndex \(sourceIndex)”)
归还物品]
}
这将捕获所选择的图像以及当前位于其上的正方形,并且imageView的标签保存了它所在的UIImageArray的索引。
我们还需要添加另外两种方法来捕获放置动作。
func dropInteraction(_交互:UIDropInteraction,performDrop会话:UIDropSession){
session.loadObjects(ofClass:UIImage.self){imageItems in
让images = imageItems作为! [UIImage]
让dropLocation:CGPoint = session.location(in:self.view)
用于self.image2A中的image2X {
如果(image2X.frame.contains(dropLocation)){
image2X.image = images.first
self.objectIndex = image2X.tag
打印(“ objectIndex \(self.objectIndex)”)
self.image2M.image =无
}
}
}
}
这将获取您拖动到的图像以及需要放置它的dropLocation。 然后,它使用其正方形数组来查找对放置图像的引用,然后再将图像放到该位置,并再次注意您移动的图像索引号。
func dropInteraction(_交互:UIDropInteraction,
sessionDidUpdate会话:UIDropSession)-> UIDropProposal {
返回UIDropProposal(操作:.move)
}
这将我们带到了最后……如果您将此代码复制并粘贴到一个新项目中,则应该以一个非常简单的国际象棋游戏结束。 如果您喜欢此帖子,请查看第二部分。