您的位置:首页 > 产品设计 > UI/UE

Xcode在playground的quick look框中显示对象自定义视图

2016-08-25 09:40 344 查看
对于一般对象,playground中默认的quick look显示已经够用,比如简单的字符串,Int,或简单的自定义Class等等.

不过对于有些情况,我们需要自定义对象在playground中的显示,比如图形化显示.

Xcode对于在playground中自定义显示对象给予了特殊的支持,我们可以通过在自定义类中完成特殊的debugQuickLookObject方法来达到此目的.

以下例子代码摘自互联网,本猫做了修改.

我们先创建一个自定义类名为CheckersBoard,需要继承自NSObject:

class CheckersBoard:NSObject{

}


在该类中再定义一个表示棋盘方格状态的枚举:

enum BoardSpace{
case FREE,WHITE,BLACK
}


下面是一些必要属性的定义:

var board = [[BoardSpace]](repeating:[BoardSpace](repeating:.FREE,count:8),count:8)
let squareSize = 24


末了,让我们来完成最为关键的方法debugQuickLookObject:

func debugQuickLookObject()->AnyObject?{
UIGraphicsBeginImageContext(CGSize(width: CGFloat(squareSize*8), height: CGFloat(squareSize*8)))
for row in 0...7{
for col in 0...7{
let offsetX = CGFloat(col * squareSize)
let offsetY = CGFloat(row * squareSize)

if col % 2 == row % 2{
UIColor.gray.setFill()
}else{
UIColor.black.setFill()
}

var bezier = UIBezierPath(rect: CGRect(x: offsetX, y: offsetY, width: CGFloat(squareSize), height: CGFloat(squareSize)))
bezier.fill()

switch board[row][col]{
case .WHITE:
UIColor.white.setFill()
case .BLACK:
UIColor.brown.setFill()
default:
continue
}
bezier = UIBezierPath(arcCenter: CGPoint(x:offsetX+CGFloat(squareSize/2), y:offsetY + CGFloat(squareSize/2)), radius: CGFloat(squareSize/3), startAngle: CGFloat(0.0), endAngle: CGFloat(360), clockwise: true)
bezier.close()
bezier.fill()

}
}

let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image
}


貌似很长,不过内容却很简单,主要做了以下这些事:

1.首先建立图片图形上下文,同时设置了它的大小为 (squareSize*8)^2

2.然后遍历绘制每个棋盘方格

3.根据需要绘制特定棋盘方格中的棋子

4.最后完成图形上下文的创建,并返回绘制完成的图片

我们需要在playground中实际创建一个棋盘来观察自定义视图的样子:

var board = CheckersBoard()

for i in 0..<8{
for j in 0..<8{
let x = arc4random_uniform(3)
var boardVal:CheckersBoard.BoardSpace = .FREE
switch x{
case 0:
boardVal = .WHITE
case 1:
boardVal = .BLACK
case 2:
boardVal = .FREE
default:
continue
}

board.board[i][j] = boardVal
}
}

board


以上代码随机设置棋盘中棋子的位置和颜色,最后一行代码仅仅是用来显示该棋盘,以下是在playground中实际显示的效果:



注意上图右下角quick look弹出的自定义显示的视图,这就是我们想要的效果!

我们可以按照自己的实际需求来显示自定义视图,这在playground快速原型开发中的确是开发利器!!!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐