我正在研究自定义加载指示器,并且CAShapeLayers遇到很多问题。
加载指示器将包含在自定义UIView中,以便任何viewController都可以使用它。
第一期:
子视图的框架与边界不匹配。
使用此代码在框架的每个角上显示一个圆时,圆会以正方形放置,但是离视图不远。 导入UIKit
视图控制器:
class MergingCicles: UIViewController, HolderViewDelegate {
func animateLabel() {
}
var holderView = HolderView(frame: CGRect.zero)
override func viewDidLoad() {
super.viewDidLoad()
}
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
addHolderView()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
func addHolderView() {
let boxSize: CGFloat = 100.0
holderView.frame = CGRect(x: view.bounds.width / 2 - boxSize / 2,
y: view.bounds.height / 2 - boxSize / 2,
width: boxSize,
height: boxSize)
holderView.parentFrame = view.frame
holderView.delegate = self
holderView.center = self.view.center
view.addSubview(holderView)
holderView.addCircleLayer()
}
}
子视图:
Import UIKit
protocol HolderViewDelegate:class {
func animateLabel()
}
class HolderView: UIView {
let initalLayer = InitialLayer()
let triangleLayer = TriangleLayer()
let redRectangleLayer = RectangleLayer()
let blueRectangleLayer = RectangleLayer()
let arcLayer = ArcLayer()
var parentFrame :CGRect = CGRect.zero
weak var delegate:HolderViewDelegate?
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = UIColor.clear
}
required init(coder: NSCoder) {
super.init(coder: coder)!
}
func addCircleLayer() {
var circleLocations = [CGPoint]()
let offset = CircleLayer().maxSize / 2
circleLocations.append(CGPoint(x: self.frame.maxX - offset, y: self.frame.maxY - offset))
circleLocations.append(CGPoint(x: self.frame.minX + offset, y: self.frame.minY + offset))
circleLocations.append(CGPoint(x: self.frame.maxX - offset, y: self.frame.minY + offset))
circleLocations.append(CGPoint(x: self.frame.minX + offset, y: self.frame.maxY - offset))
circleLocations.append(layer.anchorPoint)
for point in circleLocations {
let circle = CircleLayer()
circle.updateLocation(Size: .medium, center: point)
self.layer.addSublayer(circle)
}
self.backgroundColor = .blue
// layer.anchorPoint = CGPoint(x: (self.bounds.maxX + self.bounds.maxX)/2, y: (self.bounds.maxY + self.bounds.minY)/2)
let rotationAnimation: CABasicAnimation = CABasicAnimation(keyPath: "transform.rotation.z")
rotationAnimation.toValue = CGFloat(Double.pi * 2)
rotationAnimation.duration = 0.45
rotationAnimation.isCumulative = true
//rotationAnimation.repeatCount = 1000
//rotationAnimation.isRemovedOnCompletion = true
// layer.add(rotationAnimation, forKey: nil)
}
}
圆圈层:
import Foundation
import UIKit
enum ShapeSize {
case medium
case small
case large
}
class CircleLayer: CAShapeLayer {
let animationDuration: CFTimeInterval = 0.3
let maxSize = CGFloat(50)
override init() {
super.init()
fillColor = UIColor.red.cgColor
}
func updateLocation(Size: ShapeSize, center: CGPoint){
switch Size {
case .medium:
path = UIBezierPath(ovalIn: CGRect(x: center.x, y: center.y, width: maxSize/3, height: maxSize/3)).cgPath
case .small:
path = UIBezierPath(ovalIn: CGRect(x: center.x, y: center.y, width: (2*maxSize)/3, height: (2*maxSize)/3)).cgPath
case .large:
path = UIBezierPath(ovalIn: CGRect(x: center.x, y: center.y, width: maxSize, height: maxSize)).cgPath
}
}
required init(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
结果:
这确实表明框架不在uiView附近。
如果我将addCircleLayer
更改为使用范围,则会得到更接近的结果:
但是圆圈仍然不在角落中(右下角除外,那是正确的)。似乎在视图的左侧和顶部有一些多余的空间,这些空间无法使用self.bounds捕获。
最终目标是也将圆围绕中心旋转360度,但是如左上角的圆所示,图层锚点不在视图中心,我将锚点更改为视图的中心圈了,但屏幕上什么都没出现。
答案 0 :(得分:1)
您在说类似
circleLocations.append(CGPoint(x: self.frame.maxX - offset, y: self.frame.maxY - offset))
但是self.frame
是视图位于其自己的超级视图中的位置。因此,形状层最终从视图偏移的角度与视图从其自身的超级视图偏移的角度一样多。无论您在这里说frame
,是指bounds
。
答案 1 :(得分:0)
我发现问题出在那时,当我使用Testing in demothread2=0
Testing in demothread1=0
Testing in demothread1=1
Testing in demothread2=1
Testing in demothread1=2
Testing in demothread2=2
Testing in demothread1=3
Testing in demothread2=3
Testing in demothread1=4
Testing in demothread2=4
Ending Main program.
绘制圆圈时,该圆圈的左边使用x值。当我更改为UIBezierPath(ovalIn:CGRect, width: CGFloat, height: CGFloat
时,将点用作圆心,并使其完全适合使用self.bounds计算点时所期望的位置。
此后,我不再需要更改锚点,因为默认情况下锚点位于正确的位置。
我没有弄清楚为什么框架处于完全不同的位置,但不再影响项目。