如何创建一个UIButton支持动态多行文本与图像背景？ [英] How can I create a UIButton supporting dynamic multiline text with image background?
问题描述
我想在iOS上创建一个UI元素，以扩展或收缩，以适应动态，通常是多行文本。我需要在文本下面放置一个看起来很像消息气泡的图像。但是，我只需要在我的整个UI中的一个，所以表视图似乎过分 - 除非合理必要。
我试图使用 UILabel ，但它似乎对背景图片的支持非常有限。我只能得到它来平铺图像，这不是我想要的。
似乎一个 UIButton 是最简单的结构，应该合理地做我想要的，但我不能让它工作。这是一个在另一个空的单一视图应用程序中的代码的转换形式。
- （void）viewDidLoad {
[ super viewDidLoad];
NSString * text = @Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。
UIImage * image = [[UIImage imageNamed：@speak_bubble_solid] resizableImageWithCapInsets：UIEdgeInsetsMake（16，24，30，12）];
UIButton * button = [UIButton buttonWithType：UIButtonTypeCustom];
[button setBackgroundImage：image forState：UIControlStateNormal];
[button setTitle：text forState：UIControlStateNormal];
button.titleLabel.textColor = [UIColor whiteColor];
button.titleLabel.textAlignment = NSTextAlignmentLeft;
button.titleLabel.numberOfLines = 0;
button.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
button.contentEdgeInsets = UIEdgeInsetsMake（16，10，30，10）;
button.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview：button];
[self.view addConstraints：[NSLayoutConstraint constraintsWithVisualFormat：@| - [button] - |
选项：NSLayoutFormatAlignAllTop
metrics：0
views：NSDictionaryOfVariableBindings（button）]];
}
这是我运行应用程序时的样子： / p>
显然，我要找的是按钮来展开以包含其内容。因此，即使初始渲染是错误的，但是当我稍后动态更改文本时，我还需要正确调整大小。
如何创建？我需要在代码中看到答案，因为我还是很新的iOS开发。
是标签和图像。
-
使标签包装，并根据图片视图垂直增长或收缩其内容的大小。
-
使标签背景清晰。
-
将图片视图限制为与其后面的标签相同的位置和大小。
-
确保图片视图的内容模式是
-
为图片视图提供可伸缩的图片，因此图片将始终大小与图片视图的大小完全相同。
这里是我获得的一些屏幕截图当我尝试这个，与不同长度的自包装标签文本：
这似乎非常接近你所处理的事情。在我的实现中，棘手的部分是响应于标签的尺寸的变化来调整图像视图的大小/位置，其响应于其内容而改变其高度。我的工作方式是设置约束从图像视图到标签，使图像视图大于标签，使气球出现在标签的外面;然后，我添加这个代码到我的视图控制器以进一步实时调整图像视图（ iv ）相对于标签的布局（ lab ）：
override func viewDidLayoutSubviews（）{
iv.bounds.size。 height = lab.bounds.size.height + 60
iv.frame.origin.y = lab.frame.origin.y - 20
}
EDIT ：但实际上不需要代码;它可以完全使用约束，我在这个github示例中演示： https://github.com/mattneub/ MessageBubble
I'm trying to create a UI element on iOS that expands or contracts to fit dynamic, often multiline text. I need to put an image underneath the text that looks a lot like a message bubble. However, I only need one of these in my entire UI, so a table view seems overkill - unless reasonably necessary.
I've tried to use a UILabel for this purpose, but it seems to have very limited support for background images. I can only get it to tile the image, which is not what I want.
It seems that a UIButton is the simplest construct that should reasonably do what I'm asking, but I cannot get it to work. Here's a distilled form of the code in an otherwise empty single view app.
- (void)viewDidLoad {
[super viewDidLoad];
NSString *text = @"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
UIImage *image = [[UIImage imageNamed:@"speak_bubble_solid"] resizableImageWithCapInsets:UIEdgeInsetsMake(16, 24, 30, 12)];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setBackgroundImage:image forState:UIControlStateNormal];
[button setTitle:text forState:UIControlStateNormal];
button.titleLabel.textColor = [UIColor whiteColor];
button.titleLabel.textAlignment = NSTextAlignmentLeft;
button.titleLabel.numberOfLines = 0;
button.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;
button.contentEdgeInsets = UIEdgeInsetsMake(16, 10, 30, 10);
button.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:button];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|-[button]-|"
options:NSLayoutFormatAlignAllTop
metrics:0
views:NSDictionaryOfVariableBindings(button)]];
}
This is how it looks when I run the app:
Obviously, what I'm looking for is the button to expand to contain its content. So even the initial render is wrong, but I also need it to be sized correctly when I change the text dynamically later.
How can I create this? I need to see the answer in code, since I'm still very new in iOS development.
Actually what I would use is a label and an image. Not a background image: an image, in an image view.
Make the label wrap, and grow or shrink vertically depending on the size of its contents. That's easy and is a ready, previously solved problem.
Make the label's background clear.
Constrain the image view to the same position and size as the label, behind it.
Make sure the image view's content mode is scale-to-fill, so that the image will be always be sized exactly to the size of the image view.
Give the image view an image that is "stretchable" so that it will look right no matter what size the image view is.
Here are some screen shots of what I got when I tried this, with different lengths of self-wrapping label text:
That seems pretty close to the sort of thing you are after. The tricky part, in my implementation, is adjusting the size / position of the image view in response to changes in the size of the label as it wraps and changes its height in response to its content. The way I worked it out was to set constraints from the image view to the label, making the image view bigger than the label so that the balloon appears around the outside of the label; then, I added this code to my view controller to adjust the image view (iv) further in real time in relation to the layout of the label (lab):
override func viewDidLayoutSubviews() {
iv.bounds.size.height = lab.bounds.size.height + 60
iv.frame.origin.y = lab.frame.origin.y - 20
}
EDIT: But in fact no code is needed; it can be done entirely with constraints, as I demonstrate in this github example: https://github.com/mattneub/MessageBubble
这篇关于如何创建一个UIButton支持动态多行文本与图像背景？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
