How to align UIButton to the left with UILabel on the right. Like instagram's comments

Question

I am trying to have the username on the right and then a UIlabel with some text to the left of the button.

Here is an example of what I am after:

I am just not sure how I can get the constraints to do that, especially the part where the UILabel text continues on the next line below the button...?!

If anyone has any ideas, any help is appreciated!

Regards.

I believe it is a custom control contains text area and a button. Please see http://stackoverflow.com/questions/23107948/add-button-inside-a-text-view. Actually I was able to start something basic by using that idea. It might help. — smozgur, May 19 '16 at 14:42
@smozgur thanks for that, I'll have a look...But if you have any kind of example that would be nice and helpful! :) — , May 19 '16 at 14:44
I am actually playing with it since I saw your question. I have a basic working sample so far but trying to improve it to learn how to achieve this. Perhaps other programmers knows better, let's see if we'll get something working. — smozgur, May 19 '16 at 14:47
@smozgur Ok great! I'm trying something now, I'll let you know — , May 19 '16 at 14:49
I got this so far: http://batcoder.com/img/button-inside-textview.png — smozgur, May 19 '16 at 15:01
@smozgur I'm at the point of trying to get the uitextview to fit the button in on the left — , May 19 '16 at 15:05
button.frame = CGRectMake(0, 0, 0, 0) button.setTitle("somelongtitle", forState: UIControlState.Normal) button.sizeToFit() — smozgur, May 19 '16 at 15:08
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/112419/discussion-between-smozgur-and-jack). — smozgur, May 19 '16 at 15:19
@Jack I uploaded a modification. It is better now, however need to figure out insets of the button. It looks that it will work. — smozgur, May 19 '16 at 16:38
@smozgur looks great! If you post it as a answer below I'll mark it correct..! — , May 19 '16 at 18:57

smozgur · Accepted Answer · 2016-05-19T22:36:01.337

2

Please see the sample I created on my UIButton inside UITextView idea: https://github.com/smozgur/UIButton-inside-UITextView I am still playing with it but it results fine so far.

edited May 19 '16 at 22:36

answered May 19 '16 at 19:00

smozgur

1,772
1
15
23

score 1 · Answer 2 · edited May 23 '17 at 12:01

I think the best approach would be to do it all with one label. You could set the text styling using an attributed string (code below). Then create a UIButton that is laid on top of the label (the size of the UIButton can be adjusted based on length of username).

This is the approach I used when creating a disclaimer label on a signup screen as shown below

Here's the code to create the attributed string:

let disclaimerAttributedString = NSMutableAttributedString(string: disclaimerLabel.text!, attributes: [NSKernAttributeName: -0.4])
disclaimerAttributedString.addAttributes([NSForegroundColorAttributeName: UIColor.whiteColor(), NSUnderlineStyleAttributeName: NSUnderlineStyle.StyleSingle.rawValue], range: NSMakeRange(38, 12))
disclaimerAttributedString.addAttributes([NSForegroundColorAttributeName: UIColor.whiteColor(), NSUnderlineStyleAttributeName: NSUnderlineStyle.StyleSingle.rawValue], range: NSMakeRange(55, 14))
disclaimerLabel.attributedText = disclaimerAttributedString

My situation is slightly different because I am applying it to static text. For you, you can either create the button in code based on the length of the username or you may just be able to approximate it by pinning the button to the top left of the UILabel.

You could figure out the length of the attributed string that the username would occupy by using the String extension in this SO answer

I thought of this way, but how would I get the legnth of the username? — , May 19 '16 at 14:56

How to align UIButton to the left with UILabel on the right. Like instagram's comments

2 Answers2