How can I achieve this layout in iOS? - ios

I'm trying to achieve a layout similar to this:
I'm puzzled as to how this can be achieved. The new features in iOS 6, container cells and autolayout, perhaps should be of help, but the application I saw this in is quite old and they implemented that without those new features.
What I want to achieve is a label, a textfield, and then another label which may have text long enough that it has to wrap to the following line, like in the image I attached.
A possible way to achieve this is to put a label with two lines, and put for example the underscore character repeated and then measure somehow where the underscores start and end and overlay the textfield in that area. But this is difficult and seems quite cumbersome.
How can I achieve that?

I actually think your underscore idea isn't exactly a bad one and might not be as hard as you think.
There are probably cleaner (though maybe slower) ways to do this, but the easiest that comes to mind is setting a delimiter in your string that you can use to break the string into components like this:
Why ^________^ you late to work this morning?
From here, [[myString componentsSeparatedByString:#"^"] objectAtIndex:1]; will give you your underscores.
Next step is getting the size, like this [underscoreString sizeWithFont:[UIFont fontWithName:#"<your font>" size:<your size>]];
Now you have the size of your underscore string which you can use to overlay your UITextField. Be sure to consider the width of your delimiters in your underscoreString, either append them or adjust the width of the UITextField accordingly. Bear in mind, there are still other things to consider here (what happens if the underscore string word wraps for example), but hopefully this answers your immediate question.

This will not be a best solution.
But I think this can be easily achieved with the help of autolayout.
First put a label on the custom cell on right of that put a textField and on right of that a label again.
Label --> TextField --> Label
Here the first label should be filled with the words prior to textField (How) on the other label you need to fill the remaining portion.
And set the relative position of textfield with first and last label. So that if first label content is much more bigger it'll move to right side

Related

iOS, fast way to generate clickable, multicoloured text

I need to generate a text container that contains something like this:
This is some random text
where a few of the words are
coloured and clickable
The clickable words should have different actions bound to them and should be in a certain colour. The container will have a fixed width and I need to know the resulting height of the container given a certain text.
What I've tried: Tried making each word a separate UILabel, added actions where actions were needed, calculated line breaks myself. The problem with this approach was that it was too slow, especially UILabel sizeThatFits. I need to generate a lot of text for a scrolling UITableView and this approach killed the scrolling performance.
What I also tried: UIWebView. For a few different reasons, it's just not an option.
What I would prefer: A solution that does not require third party code. This is optional, though if they are open source. iOS 7-only solutions are acceptable.
Lastly, what needs to be fast is the generation of the text and the measuring of its height. Determining where to click is allowed to take some time.
See that https://github.com/mattt/TTTAttributedLabel
..but i not understood about height
If iOS only is an option, watch the WWDC 2013 session 210 "Introducing Text Kit". They show things that are at least very similar to what you are asking for.

Two Lines in UITableViewCell's textLabel with new line being determined ONLY by newline character in text

I want to format a cell's textLabel to display text on two lines, with a line break character determining where the second line will begin. My problem is that, since I do not control the text that will be in the first line, sometimes the text on the first line spills over to the second line and my second line text does not display at all. Specifying UILineBreakModeWordWrap actually sometimes even breaks a word in two to wrap it, which makes no sense (I use the first line for names). I need two lines and two lines only for this label, as that is all there is room for in this particular cell. I am already using the detailTextLabel for something else. I really do not want to create a custom cell for this. Is it possible to do what I am asking?
Here's what you COULD do:
You could take your long string, split into two with componentsSeparatedByString, take each piece, use an iterative sizeWithFont:constrainedToSize:lineBreakMode to calculate the longest string that fits with the default textLabel width, then take your two newly crafted strings and append them with a '\n' character. Use that as your textLabel text.
That should achieve what you're trying to do.
But what I HIGHLY recommend to you is that you do yourself a favor and go custom.
For a number of reasons:
Yes, custom cells typically do take longer to create. But, I'd argue that in this particular case, it would be faster to go custom than to implement the above. The implementation above doesn't even account for ellipses at the ends of truncated strings. You can throw that into the mix, but that's just gonna add even more time and complexity. With custom cells and individual labels, something like this becomes a gimme.
Custom allows you to easily give your two lines of text their own fonts/sizes. Using IB, basic styling on these fields becomes a breeze. And that's a pretty slick bonus. For your users especially. You mention that the first line of text is for names - why not make it bold to better distinguish it from the second line of text?
If you plan on creating and releasing iOS apps in the future, you're gonna be making A LOT of custom cells. Why not use this one as practice?
If you need guidance on creating custom cells, this is a pretty thorough tutorial.

Placing UIView or UILabel inside UITextField or UITextView acting like character

I need to create a dialog, similar to the one that is used to write functions in Numbers from APple, for example.
User can select range in the table, which is then represented as any kind of UIView inside text input line. When long-tapped, the content can be edited like normal text, but what is most important is that whole subView, containing text with range description is treated as one character.
Does anybody know or have idea how to achieve this?
I would appreciate any hints...
I had to deal with something similar, to have custom UIView(s) in a search field.
I'm not aware of a "simple" way (ie, API) to achieve your goal. You need to create a custom component that looks like a classic field, but isn't one.
To be a little more specific:
Subclass an UIView (or directly an UIScrollView)
Have inside a TextField (or UITextView depending if it needs more than one line) to handle the "keyboard".
Put some custom UIView/UILabel before the textField/textView and adjust the textField/textView origin depending these views/labels
If you want to have a label/view IN the text, then it's a little more complex and you'll need something even more custom:
Handling the keyboard events without a textField/textView (there is a way but I forgot how exactly)
Drawing the text and adding views/labels in specific locations.
Of course all depends on the component you want to create ^^ there is no one simple answer.

iOS to display a headline and a paragraph

I want to compose a view in an ios app that includes a headline and a paragraph. It will look a lot like an HTML page with h1 tag and p tag, how do I make them look like that in iOS? What controls should I use? I would prefer the answer to work with UI Builder instead of dynamical objects in code.
What I tried is using labels, and it didn't work well.
The long-standing approach for doing this is with multiple labels (UILabel), each in a different style/font/color. This is not difficult, but with multiline labels iOS will try to center the text vertically for you, so you have to lay out the height of the labels in code, using sizeWithFont:forWidth:lineBreakMode:, and then you have to position the labels correctly in code.
I must stress that this is not hard to do. It is tedious but it works.
However, in iOS 6, the problem is completely solved: you can just use NSAttributedString. This lets you create one string consisting of multiple paragraphs in different styles/fonts/colors, which is a way doing for real the very thing we were trying to simulate earlier using multiple UILabel objects. You get to dictate margins, spacing between paragraphs, etc. - the whole works. It's fantastic.
I suggest you watch the WWDC 2012 videos concerning attributed strings in iOS 6. Do not, however, believe their repeated mantra that UILabel is your locus of power for displaying attributed strings. I have found, for example, in rewriting my app, that multiparagraph attributed strings do not always play nicely with UILabel. So I have found it easiest to lay out the attributed string by drawing it directly in the drawRect: of a custom view, using the new NSAttributedString drawWithRect:options:context: method.
Why didn't labels work? I would recommend subclassing UIView to hold two labels (heading and paragraph) and style them appropriately. You'll need to specify what your issues with the labels were and what exactly you're trying to accomplish if you need further advice.

How to make more use of the separator line? E.g. making it a cell?

I was wondering, how you could do something like this, e.g. make the separator line usable, in this example as a display of votes. I think the separator line is a cell here. When you click on it a popover menu comes and you can click what you want to vote for. My question is: Does someone know how to do that or has a link to a useful explanation?
I don't think that the "seperators" are actual cells, but rather part of the previous cell. You can see that the indicatorview is seemingly not centered vertically (which I personally even find sloppy).
So, just make a custom cell with your desired behavior. Maybe google for "Accordeon cell" or something like that, I think I remember they talked about cells like that in the previous WWDCs.

Resources