Multiline balance UILabel
When I create UILabel
with textAlignement
set to NSTextAlignmentCenter
, lineBreakMode
to NSLineBreakByWordWrapping
and long text, it breaks like this:
+------------------------------------+
| Text that does not fit on a single |
| line |
+------------------------------------+
But I really want something like this:
+------------------------------------+
| Text that does not fit |
| on a single line |
+------------------------------------+
Of course I don't want to handle the line break manually. I want the label to automatically balance the lines so that their lengths are as close as possible.
source to share
I had the same problem and inspired by this question, I found a solution by simply overriding
- (void)drawTextInRect:(CGRect)rect
You can see it in this GitHub project
The method itself, if you just want to copy / read it, here
- (void)drawTextInRect:(CGRect)rect {
if (self.textAlignment == NSTextAlignmentCenter) {
CGRect oneLineRect = [self textRectForBounds:CGRectInfinite limitedToNumberOfLines:1];
NSInteger numberOfLines = ceil(oneLineRect.size.width / self.bounds.size.width);
CGFloat betterWidth = (oneLineRect.size.width / numberOfLines);
if (betterWidth < rect.size.width) {
CGRect check = CGRectZero;
do {
betterWidth *= 1.1;
CGRect b = CGRectMake(0, 0, betterWidth, CGRectInfinite.size.height);
check = [self textRectForBounds:b limitedToNumberOfLines:0];
} while (check.size.height > rect.size.height && betterWidth < rect.size.width);
if (betterWidth < rect.size.width) {
CGFloat difference = rect.size.width - betterWidth;
rect = CGRectMake(rect.origin.x + difference/2.0, rect.origin.y, betterWidth, rect.size.height);
}
}
}
[super drawTextInRect:rect];
}
PR, forks, comments are welcome!
source to share
I'm working in Swift 3 (iOS 10), so I've converted dev_jac's answer for those who need it:
override func drawText(in rect: CGRect) {
var newRect = rect
if (textAlignment == .center) {
let oneLineRect = self.textRect(forBounds: CGRect.infinite, limitedToNumberOfLines: 1)
let numLines = ceil(oneLineRect.size.width / self.bounds.size.width)
var betterWidth : CGFloat = oneLineRect.size.width / numLines
if (betterWidth < rect.size.width) {
var check = CGRect.zero
repeat {
betterWidth *= 1.1
let b = CGRect(x: 0, y: 0, width: betterWidth, height: CGRect.infinite.size.height)
check = self.textRect(forBounds: b, limitedToNumberOfLines: 0)
} while (check.size.height > rect.size.height && betterWidth < rect.size.width)
if betterWidth < rect.size.width {
let difference : CGFloat = rect.size.width - betterWidth
newRect = CGRect(x: rect.origin.x + difference/2, y: rect.origin.y, width: betterWidth, height: rect.size.height)
}
}
}
super.drawText(in: newRect)
}
source to share
There is no built-in support for what you need. You will need to do your own calculations with NSString boundingRectWithSize:options:attributes:context:
. You will need to go through different sizes to find the best width to get two filled lines. Then use that width for the size UILabel
.
source to share
If you are using automatic layout, the UILabel property preferredMaxLayoutWidth
might come in handy.
source to share