RyJ
RyJ

Reputation: 4025

iOS: Aligning two UILabels (left/right) and connecting with dots?

enter image description here

The above image was taken from an Android app. I am looking to do the same thing on iOS. I know how to do it using a background image for the dots, but it doesn't look like the Android developer used an image for the dots. Anyone know how this can be done?

Upvotes: 2

Views: 764

Answers (3)

Ruslan Mansurov
Ruslan Mansurov

Reputation: 1301

I've found the way to do it with content hugging/compression resistance. Here is the interface builder solution: UILabel filled with dots

Left label has a phrase and lots of dots with line breaking = truncate tail. Content hugging/compression resistance do the rest of job.

Upvotes: 2

rdelmar
rdelmar

Reputation: 104082

I think you can do this without any code. Just use two labels with their baselines aligned, and with a horizontal spacing constraint of 0. The left label would have its text left aligned with say 10 dots added to the end of the string, and the line break mode set to "clips". The right label would also be left aligned, so its text would always be right up against the dots.

After Edit: I couldn't get this to work in IB. It may be possible in code using constraints, but I haven't tried that. It seems like you should be able to do it with 3 labels, with the two outside ones pinned to the edges of the view, and a flexible label in the middle whose text would be dots.

Upvotes: 1

Anoop Vaidya
Anoop Vaidya

Reputation: 46543

You can use NSAttributedString to format in that way.

Use two colors in two ranges, even bold font for 2nd part.

And calculate the total width (length of your text) and fill dots (.) in between those.

An idea to fill dots:

lets say you have 30 characters space.

str1 contains 10, str2 contains 6, then use 30-(10+6) then in a loop

for(30-(10+6) times) {
    [mainString appendString:@"."]
}

Upvotes: 0

Related Questions