在视图控制器中画线代替 x 轴答案

【问题标题】：draw line in place of x axis in view controller在视图控制器中画线代替 x 轴
【发布时间】：2020-10-24 16:18:23
【问题描述】：

我希望我的 swift 代码画一条线，就像 x 轴的位置一样。因此，无论对象显示在何种屏幕尺寸中，这条线都位于屏幕的中心。我下面的代码会生成一条线，但它不考虑设备尺寸。我下面的图片显示了一条黑线，这是我当前的代码生成的，橙色线是所需的输出。

Pic

    import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        let lineView = UIView(frame: CGRect(x: 0, y: 100, width: 320, height: 1.0))
        lineView.layer.borderWidth = 1.0
        lineView.layer.borderColor = UIColor.black.cgColor
        self.view.addSubview(lineView)
    }


}

【问题讨论】：

为什么你不继承 UIView 并重写它的 draw() 方法来在你想要的地方画你的线？ UIBezierPath 可以绘制各种形状 - 尝试 moveTo() 和 lineTo() 绘制一条线，并研究 UIBezierPath 绘制示例。 developer.apple.com/documentation/uikit/uiview/1622529-draw developer.apple.com/documentation/uikit/drawing

标签： swift uiview constraints center layer

【解决方案1】：

要在屏幕中间画一条线，只需将Line.swift 文件分配给要在其上画线的 UIView。

Line.swift文件

class Line:UIView {

var line =  UIBezierPath()

func drawLine() {
    line.move(to: CGPoint(x: 0, y: bounds.height / 2))
    line.addLine(to: CGPoint(x: (bounds.width) , y: bounds.height / 2))
    UIColor.black.setStroke()
    line.lineWidth = 0.1
    line.stroke()

}

override func draw(_ rect: CGRect) {
         drawLine()
       }
    }

要将其分配给您的UIView，请打开main.storyboard 并单击要在其中绘制线条的视图。然后，进入看起来像这样的右上角的标签

您可以在class 字段内看到一个名为“UIView”的占位符。在那里输入Line 并回车，然后运行项目。您将能够看到视图中间的线条。无需声明或调用任何函数。只需分配这个类并运行项目。

【讨论】：

我如何在类视图控制器视图中调用这个函数，加载 Line() 不起作用。

【解决方案2】：

如果你想用视图的宽度来响应，你可以使用约束：

override func viewDidLoad() {
    super.viewDidLoad()
    
    let lineView = UIView()
    lineView.translatesAutoresizingMaskIntoConstraints = false
    lineView.layer.borderWidth = 1
    lineView.layer.borderColor = UIColor.black.cgColor
    view.addSubview(lineView)
    
    NSLayoutConstraint.activate([
        lineView.leftAnchor.constraint(equalTo: view.leftAnchor),
        lineView.rightAnchor.constraint(equalTo: view.rightAnchor),
        lineView.topAnchor.constraint(equalTo: view.topAnchor, constant: 100),
        lineView.heightAnchor.constraint(equalToConstant: 1)
    ])
}

为了它的价值，我将定义一个UIBezierPath 并将其用于CAShapeLayer 的路径，而不是使用视图的边框绘制线条：

@IBDesignable
class GraphView: UIView {
    let shapeLayer: CAShapeLayer = {
        let shapeLayer = CAShapeLayer()
        shapeLayer.lineWidth = 2
        shapeLayer.strokeColor = UIColor.black.cgColor
        shapeLayer.fillColor = UIColor.clear.cgColor
        return shapeLayer
    }()
    
    override init(frame: CGRect = .zero) {
        super.init(frame: frame)
        layer.addSublayer(shapeLayer)
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        layer.addSublayer(shapeLayer)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()

        let path = UIBezierPath()
        path.move(to: CGPoint(x: bounds.minX, y: 100))
        path.addLine(to: CGPoint(x: bounds.maxX, y: 100))
        shapeLayer.path = path.cgPath
    }
}

然后您可以将此视图添加到您的视图层次结构中，如上图所示，或者直接在 Interface Builder 中添加（显然，也在 IB 中定义约束）。

【讨论】：