Home / Questions / 153173
Accepted
Bruno Sosa Fast Tag
Asked: 2020-04-06 04:24:36 +0800 CST 2020-04-06 04:24:36 +0800 CST

How to make a hairline in swift

  • 772

Laying out a little in Swift I find that I don't know what the control is to be able to make the following type of modelenter image description here

enter image description here

so far i have

enter image description here

My question would be how to imitate the image above

Add as you told me a view of 1 height but the view is far below

enter image description here

enter image description here It is the first of all that the background is blank

but the line appears at the bottom

Apart from this, the color of the edittext appears to me, any way to eliminate it?

swift

2 Answers

  1. Best Answer

    It's simple to add a subview to act as a line. Here is an example guide:

    Swift 4

     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)

    Objective C

    UIView * lineview = [[UIView alloc] initWithFrame:CGRectMake(0, 100,320,1)];
lineview.layer.borderColor = [UIColor blackColor].CGColor;
lineview.layer.borderWidth = 1.0;
[self.view addSubview:lineview];

    Or you can check this link to add CALayer or draw a view

    how do you programmatically draw a line from a view controller? (Info in English).

    • 6

  2. Use this UIView extension

      public enum UIButtonBorderSide {
     case Top, Bottom, Left, Right, All
  }
extension UIView {

       public func addBorder(side: UIButtonBorderSide, color: UIColor,     width: CGFloat) {
    let border = CALayer()
    border.name = "border"
    border.backgroundColor = color.cgColor

    switch side {
    case .Top:
        border.frame = CGRect(x: 0, y: 0, width: frame.size.width, height: width)
        self.layer.addSublayer(border)
    case .Bottom:
        border.frame = CGRect(x: 0, y: self.frame.size.height - width, width: self.frame.size.width, height: width)
        self.layer.addSublayer(border)
    case .Left:
        border.frame = CGRect(x: 0, y: 0, width: width, height: self.frame.size.height)
        self.layer.addSublayer(border)
    case .Right:
        border.frame = CGRect(x: self.frame.size.width - width, y: 0, width: width, height: self.frame.size.height)

        self.layer.addSublayer(border)
    case .All:
        let topBorder = CALayer()
        let bottomBorder = CALayer()
        let rightBorder = CALayer()
        let leftBorder = CALayer()

        topBorder.frame = CGRect(x: 0, y: 0, width: frame.size.width, height: width)
        topBorder.backgroundColor = color.cgColor

        bottomBorder.frame = CGRect(x: 0, y: self.frame.size.height - width, width: self.frame.size.width, height: width)
        bottomBorder.backgroundColor = color.cgColor

        leftBorder.frame = CGRect(x: 0, y: 0, width: width, height: self.frame.size.height)
        leftBorder.backgroundColor = color.cgColor

        rightBorder.frame = CGRect(x: self.frame.size.width - width, y: 0, width: width, height: self.frame.size.height)
        rightBorder.backgroundColor = color.cgColor


        self.layer.addSublayer(topBorder)
        self.layer.addSublayer(bottomBorder)
        self.layer.addSublayer(leftBorder)
        self.layer.addSublayer(rightBorder)

    }


  }

}

    And you use it this way

    miTextField.addBorder(side: .Bottom, color: UIColor.blue, width: 2.0)
    • 1