IOS：使用Autolayout调整UIButton高度取决于标题文本？

问题描述

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

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.

我可以通过设置身高约束来增加 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

UPDATE

我创建了一个约束高度为 UIButton 的I​​BOutlet，用于将高度更改为 @NSNood 说。$
然后我需要在标题文本中使用 \ n 来分割线。

但我不知道我应该把 \ n 放在哪里？

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

以下是我想要的按钮

Here is the Button that I want in portrait

这是按钮我想要的格局

Here is the Button that I want in landscape

如何确定地点放 \ n ？

请指导我如何用 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中，我按名称按钮创建了按钮的插座：

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\n "
     "A Stop on the Salt Route\n "
     "1000 B.C.\n "
     "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 thatholds 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 processoccurs whenever bounds of the main view change, e.g. due to thechange 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 subclass通过覆盖 layoutSubviews 方法获取布局过程的所有权。这里的基本思想是确定按钮宽度，一旦布局。然后将宽度设置为 preferredMaxLayoutWidth （布局引擎的最大宽度，多线标签应占用的宽度）的子级 titleLabel （保存按钮文本的标签）。最后，根据按钮的 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 时，调用c>并确定其帧大小。在它的第一步，
按钮的渲染宽度被设置为
按钮的 titleLabel 的 preferredMaxLayoutWidth 。


2. 第二步通过调用 [super
layoutSubviews] 重新调用布局引擎，以便按钮 intrinsicContentSize 是
   ，根据它的 titleLabel 's
   重新确定preferredMaxLayoutWidth ，设置为按钮渲染宽度，现在为
   。


3. 在重写 intrinsicContentSize 方法我们返回
   最小拟合大小的按钮完全包装它的
   titleLabel 与 preferredMaxLayoutWidth 设置。我们在按钮的 titleLabel 上使用
   sizeThatFits 拟合方法，而
   只能用作 titleLabel 不遵循基于
   布局的任何约束。

1. The overridden layoutSubviews is called when the button is alreadylayed out and it's frame size is determined. At it's first step,button's rendered width is set as preferredMaxLayoutWidth of thebutton's titleLabel.
2. The second step re-invokes the layouting engine by calling [superlayoutSubviews], so that the buttons intrinsicContentSize isre-determined based on it's titleLabel'spreferredMaxLayoutWidth, which is set to buttons rendered width,by now.
3. In the overridden intrinsicContentSize method we return theminimum fitting size for the button that fully wraps it'stitleLabel with preferredMaxLayoutWidth set. We usesizeThatFits fits method on the button's titleLabel and thatsimply works as titleLabel doesn't follow any constraint basedlayout.

结果应该是你可能需要的东西。

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




请随时告诉我任何其他澄清/关注。

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

谢谢。

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