当实际中心看起来不在时,将 UILabel 视觉居中到它的超级视图
Visually centering a UILabel to it's superview when the actual center looks off
我有一个容器 UIView
和一个 UILabel
。设置容器视图大小,然后我将文本添加到 UILabel
,在标签上调用 sizeToFit
,并将标签添加为容器视图的子视图。
然后我使用以下代码使标签在容器视图中居中:
viewCountLabel.frame = CGRectMake(viewCountContainer.frame.size.width/2 - viewCountLabel.frame.size.width/2, viewCountContainer.frame.size.height/2 - viewCountLabel.frame.size.height/2, viewCountLabel.frame.size.width, viewCountLabel.frame.size.height);
这是非常标准的代码,可以将某些内容置于 superview/container 的中心,而且它总是运行良好。
但是,现在我遇到了一个小问题。这个标签的文本是一个简单的数字。可以是 1、9、15、22 等
我的问题是,当我将所有内容居中时,有些数字看起来偏离了中心,即使它们在技术上是完美居中的。
这是一张带有容器和标签边框的示例图片,因此您可以看到它们完美居中:
但这是没有边框的样子:
15
看起来不像是居中的,尽管它在技术上是居中的。看起来有点偏右了。如果我从 x 值中减去 2 或 3,它会在视觉上显示为居中,但看到这就是问题所在。
如何为这样的标签设置 "visually center" 各种值的逻辑?我觉得根据文本值设置一堆 if
语句有点矫枉过正,只能对问题应用创可贴。
我也尝试过使用 NSTextAlignmentCenter
,这并没有什么不同。我不确定我是否使用 NSTextAlignmentCenter
不正确,或者 sizeToFit
是否存在潜在问题。
您会注意到该标签的蓝色边框在所有边上都有额外的 space,但对于这个问题最重要的是它在左右两侧都有额外的 space。我觉得这可能是造成这个问题的原因,但我不确定如何解决这个问题,或者这是否就是问题所在。
这是我的代码:
// Setup view count label container
UIView *viewCountContainer = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 95, 95)];
viewCountContainer.frame = CGRectMake(self.view.frame.size.width/2 - viewCountContainer.frame.size.width/2, 87, viewCountContainer.frame.size.width, viewCountContainer.frame.size.height);
// Setup + add number label to container
UILabel *viewCountLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, self.pushModal.frame.size.width, 95)];
viewCountLabel.textAlignment = NSTextAlignmentCenter;
viewCountLabel.font = [UIFont fontWithName:@"HelveticaNeue-Light" size:72];
viewCountLabel.textColor = [UIColor colorWithRed:0.278 green:0.278 blue:0.278 alpha:1];
viewCountLabel.text = [NSString stringWithFormat:@"%d", viewCount];
[viewCountLabel sizeToFit];
// Center the label to it's super view (viewCountContainer)
viewCountLabel.frame = CGRectMake(viewCountContainer.frame.size.width/2 - viewCountLabel.frame.size.width/2, viewCountContainer.frame.size.height/2 - viewCountLabel.frame.size.height/2, viewCountLabel.frame.size.width, viewCountLabel.frame.size.height);
[viewCountContainer addSubview:viewCountLabel];
[self.view addSubview:viewCountContainer];
遗憾的是,没有 "perfect" 方法可以做到这一点。我已经为标签添加了字符间距,尝试将其宽度设置为超级视图的宽度和居中等。但是您永远无法动态地执行此操作并以这种方式使其完美。
我每次都认为这是完美的唯一方法是先制作 UILabel,然后以编程方式围绕它画一个圆,然后将标签居中。
或者为每个数字添加逻辑并以这种方式在视觉上居中的困难方法。
可以通过结合使用 monospacedDigitSystemFont(ofSize:weight:)
和 textAlignment = .center
来使数字居中
我有一个容器 UIView
和一个 UILabel
。设置容器视图大小,然后我将文本添加到 UILabel
,在标签上调用 sizeToFit
,并将标签添加为容器视图的子视图。
然后我使用以下代码使标签在容器视图中居中:
viewCountLabel.frame = CGRectMake(viewCountContainer.frame.size.width/2 - viewCountLabel.frame.size.width/2, viewCountContainer.frame.size.height/2 - viewCountLabel.frame.size.height/2, viewCountLabel.frame.size.width, viewCountLabel.frame.size.height);
这是非常标准的代码,可以将某些内容置于 superview/container 的中心,而且它总是运行良好。
但是,现在我遇到了一个小问题。这个标签的文本是一个简单的数字。可以是 1、9、15、22 等
我的问题是,当我将所有内容居中时,有些数字看起来偏离了中心,即使它们在技术上是完美居中的。
这是一张带有容器和标签边框的示例图片,因此您可以看到它们完美居中:
但这是没有边框的样子:
15
看起来不像是居中的,尽管它在技术上是居中的。看起来有点偏右了。如果我从 x 值中减去 2 或 3,它会在视觉上显示为居中,但看到这就是问题所在。
如何为这样的标签设置 "visually center" 各种值的逻辑?我觉得根据文本值设置一堆 if
语句有点矫枉过正,只能对问题应用创可贴。
我也尝试过使用 NSTextAlignmentCenter
,这并没有什么不同。我不确定我是否使用 NSTextAlignmentCenter
不正确,或者 sizeToFit
是否存在潜在问题。
您会注意到该标签的蓝色边框在所有边上都有额外的 space,但对于这个问题最重要的是它在左右两侧都有额外的 space。我觉得这可能是造成这个问题的原因,但我不确定如何解决这个问题,或者这是否就是问题所在。
这是我的代码:
// Setup view count label container
UIView *viewCountContainer = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 95, 95)];
viewCountContainer.frame = CGRectMake(self.view.frame.size.width/2 - viewCountContainer.frame.size.width/2, 87, viewCountContainer.frame.size.width, viewCountContainer.frame.size.height);
// Setup + add number label to container
UILabel *viewCountLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, self.pushModal.frame.size.width, 95)];
viewCountLabel.textAlignment = NSTextAlignmentCenter;
viewCountLabel.font = [UIFont fontWithName:@"HelveticaNeue-Light" size:72];
viewCountLabel.textColor = [UIColor colorWithRed:0.278 green:0.278 blue:0.278 alpha:1];
viewCountLabel.text = [NSString stringWithFormat:@"%d", viewCount];
[viewCountLabel sizeToFit];
// Center the label to it's super view (viewCountContainer)
viewCountLabel.frame = CGRectMake(viewCountContainer.frame.size.width/2 - viewCountLabel.frame.size.width/2, viewCountContainer.frame.size.height/2 - viewCountLabel.frame.size.height/2, viewCountLabel.frame.size.width, viewCountLabel.frame.size.height);
[viewCountContainer addSubview:viewCountLabel];
[self.view addSubview:viewCountContainer];
遗憾的是,没有 "perfect" 方法可以做到这一点。我已经为标签添加了字符间距,尝试将其宽度设置为超级视图的宽度和居中等。但是您永远无法动态地执行此操作并以这种方式使其完美。
我每次都认为这是完美的唯一方法是先制作 UILabel,然后以编程方式围绕它画一个圆,然后将标签居中。
或者为每个数字添加逻辑并以这种方式在视觉上居中的困难方法。
可以通过结合使用 monospacedDigitSystemFont(ofSize:weight:)
和 textAlignment = .center