Swift:遮罩对齐+自动布局约束
Swift: Mask Alignment + Auto-Layout Constraints
我有这个 PNG 文件,我想将其用作 UIView
的蒙版。
视图必须是:
- 每边 20 pixels/points
- 完美正方形
- 垂直居中
我设置了以下约束来完成此操作:
但是,这些限制似乎不适用于面具。设置这些约束和 mask
属性 后,我得到以下信息:
但我希望视图看起来像上面的遮罩,除了橙色(这里的 backgroundColor
只是为了简单起见——我稍后添加需要遮罩的子视图。)
然而,当没有设置约束时,mask
似乎可以正常工作,我得到了这样的结果(borderColor
添加仅用于视觉目的):
这是我的代码(viewForLayer
是我在故事板中制作的 UIView):
viewForLayer.layer.borderColor = UIColor.redColor().CGColor
viewForLayer.layer.borderWidth = 10
var mask = CALayer()
mask.contents = UIImage(named: "TopBump")!.CGImage
mask.frame = CGRect(x: 0, y: 0, width: viewForLayer.bounds.width, height: viewForLayer.bounds.height)
mask.position = CGPoint(x: viewForLayer.bounds.width/2, y: viewForLayer.bounds.height/2)
viewForLayer.layer.mask = mask
viewForLayer.backgroundColor = UIColor.orangeColor()
但问题是,现在视图的大小或位置不正确 — 它不遵循上述规则 — "The view must be: "。 如何让 mask
正常工作,同时设置自动布局约束?
我自己试过了。减去 'let mask = CALayer()' 上的挑剔(它是对可更新对象的不可变引用),更改嵌入式视图的自动布局约束显示掩码已正确对齐。
NSLog("\(viewForLayer.bounds.width), \(viewForLayer.bounds.height)")
returns 375.0,iPhone 6 屏幕上的 667.0。你得到了什么?
我找到了解决方法。不确定这是否是最好的方法,但我们开始吧...
只需确保在情节提要检查器中也更改了 UIView class 的名称。显然,诀窍是为每个 layoutSubviews 调用设置遮罩框架。
class MaskView : UIView {
override func layoutSubviews() {
super.layoutSubviews()
if let mask = self.layer.mask {
mask.frame = self.bounds
}
}
}
class ViewController: UIViewController {
@IBOutlet weak var viewForLayer: MaskView!
override func viewDidLoad() {
super.viewDidLoad()
let image = UIImage(named: "TopBump")!.CGImage!
let maskLayer = CALayer()
maskLayer.contents = image
maskLayer.frame = viewForLayer.bounds
viewForLayer.layer.mask = maskLayer
viewForLayer.backgroundColor = UIColor.orangeColor()
// Do any additional setup after loading the view, typically from a nib.
viewForLayer.layer.borderColor = UIColor.redColor().CGColor
viewForLayer.layer.borderWidth = 10
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
我有这个 PNG 文件,我想将其用作 UIView
的蒙版。
视图必须是:
- 每边 20 pixels/points
- 完美正方形
- 垂直居中
我设置了以下约束来完成此操作:
但是,这些限制似乎不适用于面具。设置这些约束和 mask
属性 后,我得到以下信息:
但我希望视图看起来像上面的遮罩,除了橙色(这里的 backgroundColor
只是为了简单起见——我稍后添加需要遮罩的子视图。)
然而,当没有设置约束时,mask
似乎可以正常工作,我得到了这样的结果(borderColor
添加仅用于视觉目的):
这是我的代码(viewForLayer
是我在故事板中制作的 UIView):
viewForLayer.layer.borderColor = UIColor.redColor().CGColor
viewForLayer.layer.borderWidth = 10
var mask = CALayer()
mask.contents = UIImage(named: "TopBump")!.CGImage
mask.frame = CGRect(x: 0, y: 0, width: viewForLayer.bounds.width, height: viewForLayer.bounds.height)
mask.position = CGPoint(x: viewForLayer.bounds.width/2, y: viewForLayer.bounds.height/2)
viewForLayer.layer.mask = mask
viewForLayer.backgroundColor = UIColor.orangeColor()
但问题是,现在视图的大小或位置不正确 — 它不遵循上述规则 — "The view must be: "。 如何让 mask
正常工作,同时设置自动布局约束?
我自己试过了。减去 'let mask = CALayer()' 上的挑剔(它是对可更新对象的不可变引用),更改嵌入式视图的自动布局约束显示掩码已正确对齐。
NSLog("\(viewForLayer.bounds.width), \(viewForLayer.bounds.height)")
returns 375.0,iPhone 6 屏幕上的 667.0。你得到了什么?
我找到了解决方法。不确定这是否是最好的方法,但我们开始吧...
只需确保在情节提要检查器中也更改了 UIView class 的名称。显然,诀窍是为每个 layoutSubviews 调用设置遮罩框架。
class MaskView : UIView {
override func layoutSubviews() {
super.layoutSubviews()
if let mask = self.layer.mask {
mask.frame = self.bounds
}
}
}
class ViewController: UIViewController {
@IBOutlet weak var viewForLayer: MaskView!
override func viewDidLoad() {
super.viewDidLoad()
let image = UIImage(named: "TopBump")!.CGImage!
let maskLayer = CALayer()
maskLayer.contents = image
maskLayer.frame = viewForLayer.bounds
viewForLayer.layer.mask = maskLayer
viewForLayer.backgroundColor = UIColor.orangeColor()
// Do any additional setup after loading the view, typically from a nib.
viewForLayer.layer.borderColor = UIColor.redColor().CGColor
viewForLayer.layer.borderWidth = 10
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}