CODEWITHSUNDEEP
iosxcodeswiftuilabel
user1127093
user1127093

Reputation: 85

Swift UILabel with horizontal lines on both sides

I am trying to create a UILabel that has 2 horizontal lines on the left and right side like this:

enter image description here

Does anyone know the best approach for doing this in Swift? The content text in the center will change so I want to make sure it can adapt. I'd really like to create some kind of reusable UIView class but I'm not sure where to start?

Thank you!

Upvotes: 4

Views: 3351

Answers (6)

Mike Miller
Mike Miller

Reputation: 3507

As others have mentioned, you can achieve this using three views:

example image

Add a View to your scene to use as a container. I called this view "Lined Label Holder."

To that container, add two Views, one to produce the line on either side of the label.

Add the label in between the two views, and give it some text. Due to the "height = Test.height" constraint on the Lined Label Holder, The intrinsic height of this label is used to calculate the container's height.

The label is allowed to grow with added text and the lines will always start 5px away from the edges of the text and extended to the edges of the container, whose width can be set independently.

This image shows the required constraints:

constraints

Upvotes: 1

Saurabh Rane
Saurabh Rane

Reputation: 126

You can use an extension on UILabel

public extension UILabel {
    func drawLineOnBothSides(labelWidth: CGFloat, color: UIColor) {

        let fontAttributes = [NSFontAttributeName: self.font]
        let size = self.text?.size(attributes: fontAttributes)
        let widthOfString = size!.width

        let width = CGFloat(1)

        let leftLine = UIView(frame: CGRect(x: 0, y: self.frame.height/2 - width/2, width: labelWidth/2 - widthOfString/2 - 10, height: width))
        leftLine.backgroundColor = color
        self.addSubview(leftLine)

        let rightLine = UIView(frame: CGRect(x: labelWidth/2 + widthOfString/2 + 10, y: self.frame.height/2 - width/2, width: labelWidth/2 - widthOfString/2 - 10, height: width))
        rightLine.backgroundColor = color
        self.addSubview(rightLine)
    }
}

This will add a horizontal line of width of 1.0 on the both side of your label. If you don't add text for your label, it will show two horizontal lines through center with some spaces in between them.

Upvotes: 1

UdayM
UdayM

Reputation: 1783

Not necessary 2 UIView's.

Take 1 UIView and give background black color.Add the constraints necessary with: height=2.

place 1 label on the center and give required constraints

Upvotes: 0

Abhishek Sharma
Abhishek Sharma

Reputation: 3283

Take one UIView with height of 2. Set leading & Trailing according to Super View.

Now take one UILabel with background color white and put Vertically Center to line view.

Make both Center same.

Your work done.

For more help please refer below image.

enter image description here

Upvotes: 1

gvuksic
gvuksic

Reputation: 3023

Use one UIView with black background and height of 1px, set label background to white, align its text to center and align UILabel to center of UIView (there is no need for 2 views since label white background will cover UIView).

Upvotes: 0

Ketan Parmar
Ketan Parmar

Reputation: 27448

You can take two UIview of height 1 or 2 pixels of both side of the label. so it's look likes line!!

And you should set background color to black of that view!

Hope this will help :)

Upvotes: 3

Related Questions