IOS:调整 UIButton 高度取决于使用 Autolayout 的标题文本? [英] IOS: Adjust UIButton height depend on title text using Autolayout?

问题描述

我有一个 UIButton，它可以在运行时更改标题.因此，我想增加 UIButton 高度取决于标题文本，以使用 AutoLayout 显示全文.

I have a UIButton and it can change the title at the runtime. Therefore, I want to increase the UIButton height depend on the title text for display full text by using AutoLayout.

我可以通过将 height 约束 设置为大于或等于"来增加 UILabel 的高度，但它不适用于 UIButton.
我使用了 [myButton sizeToFit] 但它只会增加 UIButon 宽度(不增加高度).

I can increase the UILabel height by set the height constraint to "Greater than or Equal" but it not work with UIButton.
I have used [myButton sizeToFit] but it only increase the UIButon width (not increase height).

我当前的 UIButton 属性现在是
- 约束高度:30- 领先:15- 尾随:15- 前5- 字体大小:12

My current UIButton properties now is
- constraint height: 30 - leading : 15 - trailing: 15 - top: 5 - fontsize: 12

更新
我为 UIButton 的约束高度创建了一个 IBOutlet，用于更改 @NSNood 所说的高度.
然后我需要在标题文本中使用 来分割行.
但我不知道应该把 放在哪里?

UPDATE
I created an IBOutlet for constraint height of UIButton for changing the height as @NSNood said.
Then I need to use in title text to split line.
But I don't know where should I put the ?

这是我想要的纵向按钮

这是我想要的横向 Button

如何确定放置 的位置?

How can I determine the place to put ?

请指导我如何使用 AutoLayout 来实现它.任何帮助，将不胜感激.

Please guide me how to achieve it with AutoLayout. Any help would be appreciated.

推荐答案

抱歉，我最近没有关注帖子，因此我想出了一个真正迟到的解决方案.我仍然在写答案作为参考，如果将来有人会发现它有用的话.

Sorry that I didn't follow the post, lately and thus am coming up with a real late solution. Still I'm writing the answer as a reference, if someone might find it useful in future.

首先让我们展示按钮的情节提要配置.如下图所示:

First of all let's show the storyboard configuration for the button. Those are depicted in the following pictures:

图片显示我只为按钮添加了左、上和右约束，没有其他任何东西.这允许按钮有一些 intrinsicContentSize 作为它的高度，但它的宽度仍然由它的左右约束决定.

The picture shows that I have added only left, top and right constraints for the button and nothing else. This allows the button to have some intrinsicContentSize for it's height but it's width is still determined by it's left and right constraints.

下一个阶段是编写一些包含按钮的 ViewController 类.在我的 VC 中，我为按钮创建了一个名为 button 的插座:

The next phase is to write some ViewController class that shall contain the button. In my VC, I have created an outlet for the button by name button:

@property(nonatomic,weak) IBOutlet UIButton* button;

并将其附加到情节提要按钮上.现在我已经重写了两个方法，即 viewDidLoad 和 viewWillLayoutSubviews 如下所示:

and has attached it to the storyboard button. Now I have overridden two methods, namely, viewDidLoad and viewWillLayoutSubviews like below:

-(void)viewDidLoad {
    [super viewDidLoad];

    self.button.titleLabel.numberOfLines = 0;
    self.button.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
}
-(void)viewWillLayoutSubviews {
    [super viewWillLayoutSubviews];

    [self.button setTitle:@"Chapter One
 "
     "A Stop on the Salt Route
 "
     "1000 B.C.
 "
     "As they rounded a bend in the path that ran beside the river, Lara recognized the silhouette of a fig tree atop a nearby hill. The weather was hot and the days were long. The fig tree was in full leaf, but not yet bearing fruit." forState:UIControlStateNormal];
}

1. viewDidLoad 方法确保 titleLabel(标签保存按钮文本)是多行的，如果出现一些大文本，它通过换行来换行文本.
2. viewWillLayoutSubviews 方法确保按钮布局过程每当主视图的边界发生变化时发生，例如因为改变界面方向.

1. The viewDidLoad method ensures the titleLabel (the label that holds button text) is multiline and if some large text comes to it, it wraps the text by wrapping words.
2. The viewWillLayoutSubviews method ensures button layouting process occurs whenever bounds of the main view change, e.g. due to the change of interface orientation.

最后也是最有效的部分是手动处理按钮的布局过程.为此，我们需要继承 UIButton.我编写了一个名为 MyButton 的子类，它继承自 UIButton，您可以使用任何您喜欢的名称.将此设置为 Identity Inspector 中按钮的自定义类.

The final and the most effective part is to manually handle the layout process for the button. For this purpose, we need to subclass UIButton. I have written a subclass named MyButton that inherits from UIButton and you might use whatever name you like. Set this as the custom class for the button in Identity Inspector.

子类重写了两个方法，分别是intrinsicContentSize和layoutSubviews.类主体如下所示:

The subclass overrides two methods, namely, intrinsicContentSize and layoutSubviews. The class body looks something like the following:

#import "MyButton.h"

@implementation MyButton

-(CGSize)intrinsicContentSize {
    return [self.titleLabel sizeThatFits:CGSizeMake(self.titleLabel.preferredMaxLayoutWidth, CGFLOAT_MAX)];;
}
-(void)layoutSubviews {
    self.titleLabel.preferredMaxLayoutWidth = self.frame.size.width;
    [super layoutSubviews];
}
@end

UIButon 子类通过重写 layoutSubviews 方法获得布局过程的所有权.这里的基本思想是确定按钮宽度，一旦它已经布局.然后将宽度设置为其子 titleLabel (保存按钮文本的标签)的 preferredMaxLayoutWidth (布局引擎的最大宽度，多行标签应占据的宽度).最后，根据 titleLabel 的大小为按钮返回一个 intrinsicContentSize，以便按钮完全包裹它的 titleLabel.

The UIButon subclass takes the ownership of the layout process by overriding layoutSubviews method. The basic idea here is to determine the button width, once it has been layout. Then setting the width as preferredMaxLayoutWidth (the maximum width for layouting engine, that a multiline label should occupy) of it's child titleLabel (the label that holds button text). Finally, returning an intrinsicContentSize for the button based on it's titleLabel's size, so that the button fully wraps it's titleLabel.

1. 当按钮已经存在时调用被覆盖的 layoutSubviews布局并确定其框架大小.在它的第一步，按钮的渲染宽度设置为 preferredMaxLayoutWidth 的按钮的titleLabel.
2. 第二步通过调用[super重新调用布局引擎layoutSubviews]，所以按钮 intrinsicContentSize 是根据它的 titleLabel 重新确定preferredMaxLayoutWidth，设置为按钮渲染宽度，到现在为止.
3. 在重写的 intrinsicContentSize 方法中，我们返回完全包裹它的按钮的最小尺寸titleLabel 与 preferredMaxLayoutWidth 设置.我们用sizeThatFits 适合按钮的 titleLabel 方法，并且只是作为 titleLabel 不遵循任何基于约束的布局.

1. The overridden layoutSubviews is called when the button is already layed out and it's frame size is determined. At it's first step, button's rendered width is set as preferredMaxLayoutWidth of the button's titleLabel.
2. The second step re-invokes the layouting engine by calling [super layoutSubviews], so that the buttons intrinsicContentSize is re-determined based on it's titleLabel's preferredMaxLayoutWidth, which is set to buttons rendered width, by now.
3. In the overridden intrinsicContentSize method we return the minimum fitting size for the button that fully wraps it's titleLabel with preferredMaxLayoutWidth set. We use sizeThatFits fits method on the button's titleLabel and that simply works as titleLabel doesn't follow any constraint based layout.

结果应该类似于您可能需要的结果.

The outcome should be something similar to that you might have required.

如有任何其他澄清/疑虑，请随时告诉我.

Feel free to let me know about any other clarification/concern.

谢谢.

这篇关于IOS:调整 UIButton 高度取决于使用 Autolayout 的标题文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！