调整 UILabel 以对齐屏幕右侧

Posted

技术标签:

【中文标题】调整 UILabel 以对齐屏幕右侧【英文标题】:Adjust UILabel to align to right of screen 【发布时间】:2017-08-07 18:53:41 【问题描述】:

目前我正在尝试在应用程序中创建消息传递功能。

我正在尝试将 UILabel 与用户发送到屏幕右侧的消息对齐。随着文本宽度内容的增加,我希望它伸展到屏幕的左侧,然后在达到最大宽度后换行。

如您所见,我的文本行正确中断,但我无法让文本正确地出现在屏幕上。

我对该问题的解决方案是以编程方式调整 UILabel 的宽度,但是我无法让它从自定义传出消息单元格的 xib 文件中的固定大小改变

有人可以建议如何做到这一点吗?

编辑:

我在 UILabel 的当前边界上绘制了框以显示它当前正在做什么

这是移动的文本和重绘的 UILabel 绑定以解释我正在尝试做什么。

应用截图

【问题讨论】:

您是否应用了文本对齐方式? developer.apple.com/documentation/uikit/uilabel/… @paulvs 我进行了一些编辑以更好地解释我遇到的问题。我的文本正确对齐,这是我的错误。问题是 UILabel 的大小我不确定如何更改 那么您想缩小标签以适应其内容吗?您是否使用约束或框架来定位标签? @paulvs 我正在使用约束。 【参考方案1】:

在这里,您应该根据文本长度计算标签的宽度。 试试这个 API 来根据文本输入获取标签的大小。

CGSize yourLabelSize = [yourLabel.text sizeWithAttributes:@NSFontAttributeName : [UIFont fontWithName:yourLabel.font size:yourLabel.fontSize]];

我不在下面会在你的情况下工作。不过你可以试一试。

在 Xcode 中创建一个标签,使用自动布局来设置填充(通常是 4 点在尾随和灵活的前导空间 > 4 点)。确保将行数设置为“0”并将文本右对齐。此处不要为宽度设置固定大小

【讨论】:

不幸的是,我正在寻求的解决方案是不对文本进行右对齐。【参考方案2】:

您可以通过测量文本的长度并调用大小以适合标签来实现所需的效果。然后将标签的框架(或周围的 superView,如果需要)偏移到屏幕的左侧或右侧。

这是一个快速的方法(最好在别处声明变量 maxWidth 和 padding)。请注意,“w”是屏幕宽度的变量。

-(UIView *)bubbleWithText:(NSString *)text atOffset:(float)yOff isLeftAligned:(bool)leftAligned 

    float maxWidth = 200.0f;
    float intraCellPadding = 5.0f;

    UILabel * label = [UILabel new];
    label.frame = CGRectMake(intraCellPadding, intraCellPadding, maxWidth, 0);
    label.textColor = (leftAligned) ? [UIColor blackColor] : [UIColor whiteColor];
    label.text = text;
    label.numberOfLines = 0;
    [label sizeToFit];

    float width = label.frame.size.width;
    float height = label.frame.size.height;
    float xOff = (leftAligned) ? intraCellPadding : w-3*intraCellPadding-width;

    UIView * bubble = [UIView new];
    bubble.frame = CGRectMake(xOff, yOff, width + 2 * intraCellPadding, height + 2 * intraCellPadding);
    bubble.backgroundColor = (leftAligned) ? [UIColor greenColor] : [UIColor blueColor];
    bubble.layer.cornerRadius = intraCellPadding;
    [bubble addSubview:label];

    return bubble;


你会用这样的方式调用上面的代码:

float interCellPadding = 10.0f;
float yOff = 20.0f;
bool previousWasLeft = false;

NSArray * texts = @[@"Bacon ipsum dolor amet kevin swine ham hock, leberkas porchetta salami bacon picanha shoulder pig strip steak sirloin.",
                    @"Short loin hamburger meatloaf jowl, sirloin swine pork belly tail t-bone venison.",
                    @"Flank meatloaf prosciutto ball tip strip steak rump.",
                    @"Short piggy.",
                    @"Tri-tip ribeye drumstick andouille leberkas bacon pork chop meatball pork spare ribs chicken.",
                    @"Strip steak filet mignon tri-tip sausage, cow frankfurter bacon ribeye cupim burgdoggen shank pork belly fatback ham hock."];

for (NSString * text in texts)

    //random assignment left / right
    //by creating a random number, either one or zero
    //this doubles up as a boolean
    bool alignLeft = arc4random_uniform(2);

    //here we increment the offset
    //depending on whether the previous bubble
    //was on the same side or not, giving a
    //bit more space for alternating bubbles.
    yOff += (previousWasLeft != alignLeft) ? interCellPadding : interCellPadding/2.0f;
    previousWasLeft = alignLeft;

    //create the bubble and add
    UIView * bubble = [self bubbleWithText:text atOffset:yOff isLeftAligned:alignLeft];
    [self.view addSubview:bubble]; //or scrollView whatever

    //incrmeent the offset
    yOff += bubble.frame.size.height;


这是快速而肮脏的,但显示了如何实现您所需要的。对于很多单元格(这可能是您想要的),如果您要使用自定义路线,则必须注意从内存中释放它们。调整 UICollectionView 单元格并简单地对齐其中的内容可能会更容易。

【讨论】:

以上是关于调整 UILabel 以对齐屏幕右侧的主要内容,如果未能解决你的问题,请参考以下文章

如何将 UIButton 与右侧的 UILabel 对齐。喜欢 instagram 的评论

UILabel 不调整高度以适合文本

swift中UILabel的彩色动画

使用 SnapKit 自动调整 UILabel 大小

在使用视图 iOS 滚动 uilabel 时保持标签文本与屏幕中心对齐?

使用 Autolayout 将 UILabel 沿其父视图的底部对齐